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 08: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 21: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.

andir 19.05.2020 11:21

Da ich beginne, mich wieder etwas mit HTML/CSS -Authoring zu beschäftigen und Hamburger-Menüs derzeit so verbreitet (und praktisch) sind dass quasi jeder sie erkennt (auch wichtig ...)

zwei Anmerkungen:

position fixed / sticky und fallback per js (Gründe dort)

https://www.mediaevent.de/javascript...on-sticky.html

Links oder Buttons und Aria

https://www.barrierefreies-webdesign...nu-button.html

Die Idee mit dem Button ist daher gut.


Alle Zeitangaben in WEZ +2. Es ist jetzt 05:00 Uhr.

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

© Dirk H. 2003 - 2020