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.027
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
  #3 (permalink)  
Alt 19.05.2020, 11:21
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.042
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

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.
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
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 04:40 Uhr.