nicht angemeldet
Gunnar Bittersmann@@Gabriele
Ich habe ein kleines Beispiel gefunden, zu dem ich schon zwei Fragen habe.
- Der Button hat die Bezeichnung Blacklist. Wenn man darauf klickt ist der erste Eintrag ebenfalls Blacklist.
Nö, das ist kein Button. Das ist eine Auswahlliste. Und was da angezeigt wird, ist die aktuelle Auswahl. Wenn du „Fringe“ auswählt und die Liste wieder schließt, dann wird „Fringe“ angezeigt.
- Statt dem Button sollte das Zeichen
angezeigt werden.
Aber nicht nur! Nicht alle Nutzer nehmen Webseiten visuell wahr; für die anderen muss eine Textalternative da sein.
Ein Hamburger-Button könnte so aussehen:
<button aria-expanded="false">
<span aria-hidden="true">☰</span>
<span class="visually-hidden">Menü</span>
</button>
aria-hidden="true" versteckt das ☰-Zeichen vor Screenreadern. Die Klasse visually-hidden sorgt mit den dazugehörigen Stilangaben aus How-to hide content dafür, das „Menü“ nicht sichtbar angezeigt wird, aber von Screenreadern vorgelesen wird.
Statt des ☰-Zeichens kannst du auch ein SVG verwenden.
Das aria-expanded-Attribut des Buttons gibt den Zustand des Menüs an. Wenn das Menü per JavaScript geöffnet wird, muss das Attribut auf "true" gesetzt werden. Beim Schließen dann wieder auf "false".
🖖 Live long and prosper
“In my home, the America I love, the America I've written about, that has been a beacon of hope and liberty for 250 years, is currently in the hands of a corrupt, incompetent and treasonous administration. Tonight, we ask all who believe in democracy and the best of our American spirit, to rise with us, raise your voices against authoritarianism, and let freedom reign.”
— Bruce Springsteen, Manchester 2025-05-14