JavaScript/Anwendung und Praxis/zugängliche Dropdown-Navigation

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Unter Dropdown-Menus versteht man Menüs, die sich durch Userinteraktion z.B. bei :hover erweitern. Da eine Keyboard-Steuerung dabei meist vernachlässigt wird, sind solche Menüs für Leute mit Sichtbehinderungen und diejenigen, die eine Maus nicht bedienen können, unbenutzbar. In diesem Tutorial zeigen wir Ihnen, wie Sie Dropdown-Menüs erstellen, die auch mit der Tastatur bedient werden können.


Achtung!

Eine veraltete Version dieses Artikels finden Sie in unserem Museum: Eine zugängliche Multilevel-Dropdown-Navigation.

Inhaltsverzeichnis

[Bearbeiten] HTML-Grundgerüst

[Bearbeiten] ARIA-Roles

Beispiel
<nav id="nav" aria-label="navigation"> <ul class="menu-items"> <li> <a href="#">Link Haupt 1</a> </li> <li> <a href="#" aria-haspopup="true">Link Haupt 2</a> <ul aria-label="submenu"> <li><a href="#">Link Sub</a></li> <li> <a href="#" aria-haspopup="true">Link Sub</a> <ul aria-label="submenu"> <li><a href="#">Link Sub-Sub</a></li> <li><a href="#">Link Sub-Sub</a></li> <li><a href="#">Link Sub-Sub</a></li> </ul> </li> <li> <a href="#" aria-haspopup="true">Link Sub</a> <ul aria-label="submenu"> <li><a href="#">Link Sub-Sub</a></li> <li><a href="#">Link Sub-Sub</a></li> </ul> </li> </ul> </li> <li> <a href="#" aria-haspopup="true">Link Haupt 3</a> <ul aria-label="submenu"> <li><a href="#">Link Sub</a></li> <li><a href="#">Link Sub</a></li> </ul> </li> <li> <a href="#">Link Haupt 4</a> </li> </ul> </nav>

[Bearbeiten] ARIA-Zustände

Die vorliegende Lösung restauriert die für normale Linklisten verfügbare Funktionalität der TAB-Taste. Sie restauriert damit ein Stück Konvention oder Erwartung. Sie möchte allerdings keinen Freibrief für wild verschachtelte Menulisten schreiben. Auch wenn hier eine Tastaturlösung vorliegt, sollte man dem Mausbenutzer nie mehr als zwei Klapplevel abverlangen.

[Bearbeiten] Weblinks

keine ARIAs:

[Bearbeiten] Tabbed

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML