XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   Barrierefreiheit (http://xhtmlforum.de/forumdisplay.php?f=78)
-   -   Beste Praxis für "Navigationsmenü anzeigen/verbergen" (Burger) (http://xhtmlforum.de/showthread.php?t=73809)

AndreasB 05.05.2019 09:50

Beste Praxis für "Navigationsmenü anzeigen/verbergen" (Burger)
 
Moin.

Ist der folgende HTML-Code ein vernünftiger Ansatz?

Bisher hatte ich für die Bereitstellung der Funktion "Navigationsmenü anzeigen/verbergen" das Element a verwendet.

Aber es handelt sich ja um eine Interaktion auf der aktiven Seite.

Mir erscheint daher button geeigneter.

Wie seht ihr das?

Ohne JS:

HTML-Code:

<nav id="navigationsmenue" aria-label="Navigationsmenü">
  <ol>
    <li><a href="https://xhtmlforum.de/...">...</a></li>
    ...
  </ol>
</nav>

Mit JS, Anfangszustand:
HTML-Code:

<nav id="navigationsmenue" aria-label="Navigationsmenü">
  <button aria-hidden="true">
    <img src="navigationsmenue-zeigen.svg" alt="Navigationsmenü zeigen"/>
  </button>
  <ol>
    <li><a href="https://xhtmlforum.de/...">...</a></li>
    ...
  </ol>
</nav>

Mit JS, nach dem Klick auf "Navigationsmenü anzeigen":
HTML-Code:

<nav id="navigationsmenue" aria-label="Navigationsmenü">
  <button aria-hidden="true">
    <img src="navigationsmenue-verbergen.svg" alt="Navigationsmenü verbergen"/>
  </button>
  <ol>
    <li><a href="https://xhtmlforum.de/...">...</a></li>
    ...
  </ol>
</nav>

Ein passendes JS muss ich mir noch suchen.
Falls jemand eine Seite kennt, wo etwas Ähnliches realisiert ist, freue ich mich über einen Hinweis.

inta 05.05.2019 22:56

Ich habe mich letzte Woche exakt in dieser Frage für das a-Element entschieden, aber jetzt wo ich das hier lese eigentlich nur aus alter Gewohnheit. Ich finde den Ansatz mit einem Button auf jeden Fall nachvollziehbar und gut. Den einzigen Vorteil den ich beim Link sehe ist, dass man die Navigation auch mittels target-Pseudoklasse schalten könnte, beim Button brauchst du Javascript.

PS: Ich halte ol für eine Navigation falsch, die Reihenfolge sollte dort keine Rolle spielen.


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:30 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2020, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2019