Barrierefreiheitszertifikat – Startseite
Kostenlos prüfen Menü

Navigation mit Untermenüs, die nicht nur mit der Maus funktioniert

Viele Menüs klappen nur beim Überfahren mit der Maus auf. Das Disclosure-Muster ist einfacher und robuster: Ein Button öffnet eine ganz normale Liste von Links.

2.1.14.1.21.4.132.4.33.2.3

Live-Demo

Diese Demo ist mit axe-core ohne Verstöße geprüft und vollständig per Tastatur bedienbar.

Probieren Sie es mit der Tastatur: Tab, Enter, Leertaste, Pfeiltasten, Escape. Mit eingeschaltetem Screenreader hören Sie, was angesagt wird.

Die Live-Demo braucht JavaScript. Code und Anforderungen stehen unten.

Tastaturbedienung

Tab
Geht von Button zu Button und durch die Links eines geöffneten Untermenüs.
Enter / Leertaste
Öffnet oder schließt das Untermenü.
Escape
Schließt das offene Untermenü und setzt den Fokus auf seinen Button.

Wann Sie das Muster einsetzen

Für die Hauptnavigation einer Website empfiehlt das W3C das Disclosure-Muster, nicht das Muster „Menu“ mit role="menu". Das Menu-Muster ist für Anwendungsmenüs gedacht, wie man sie aus Programmen kennt, und verlangt eine aufwendige Pfeiltasten-Steuerung. Viele Screenreader-Nutzer erwarten auf Websites einfache Listen mit Links.

Unsere eigene Hauptnavigation oben auf dieser Seite folgt demselben Muster.

Rollen, Zustände, Eigenschaften

  • Die Navigation steht in <nav> mit einem Namen, wenn es mehrere gibt (aria-label).
  • Jeder Menüpunkt mit Untermenü ist ein <button> mit aria-expanded und aria-controls.
  • Das Untermenü ist eine normale Liste (<ul>) mit Links, ausgeblendet mit hidden.
  • Keine Rollen menu, menubar oder menuitem für Website-Navigation.
  • Die aktuelle Seite trägt aria-current="page".

Tastaturbedienung

TasteWirkung
TabGeht von Button zu Button und durch die Links eines geöffneten Untermenüs.
Enter / LeertasteÖffnet oder schließt das Untermenü.
EscapeSchließt das offene Untermenü und setzt den Fokus auf seinen Button.

Code

HTML und JavaScript (gekürzt)
<nav aria-label="Hauptnavigation">
  <ul>
    <li>
      <button type="button" aria-expanded="false"
        aria-controls="sub-wissen">Wissen</button>
      <ul id="sub-wissen" hidden>
        <li><a href="/wissen/kriterien/">Kriterien</a></li>
        <li><a href="/wissen/glossar/">Glossar</a></li>
      </ul>
    </li>
    <li><a href="/preise/">Preise</a></li>
  </ul>
</nav>

Häufige Fehler

  • Untermenü öffnet nur bei :hover: per Tastatur und auf Touchgeräten nicht erreichbar.
  • Der Hauptpunkt ist gleichzeitig Link und Aufklapper: ein Klick soll zwei Dinge tun, Tastaturnutzer kommen nur an eines.
  • role="menu" ohne die dazugehörige Pfeiltasten-Steuerung: Screenreader schalten in einen Modus, in dem Tab nicht mehr wie erwartet funktioniert.
  • Untermenü, das beim Verlassen mit der Maus sofort zuklappt, bevor man es erreicht (Hover-Falle, siehe 1.4.13 Eingeblendete Inhalte bei Hover oder Fokus).

Passende WCAG-Kriterien

Quellen

Sind Ihre Komponenten so gebaut?

Der kostenlose Check findet viele Fehler automatisch. Im Audit prüft ein Mensch jede Komponente mit Tastatur und Screenreader.

Kostenlos prüfenPrüfmethode ansehen