zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > Barrierefreiheit
Seite neu laden Beste Praxis für "Navigationsmenü anzeigen/verbergen" (Burger)

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 05.05.2019, 08:50
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.326
AndreasB wird schon bald berühmt werden
Standard 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.
__________________

Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 05.05.2019, 21:56
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.025
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

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.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Per Burger eingeblendetes Navi-Menü ausblenden: Beste Technik AndreasB CSS 33 24.03.2018 12:09


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