Barrierefreies Navigationsmenü

Die Hauptnavigation ist das Erste, was jeder Besucher benutzt, und in einem Shop wächst sie oft zu einem Mega-Menü mit Kategorien, Marken und Aktionen. Der häufigste Fehler bei der Barrierefreiheit ist nicht fehlendes ARIA, sondern das falsche ARIA: ein role="menubar", kopiert aus einer Komponentenbibliothek. Diese Seite erklärt, was das APG stattdessen empfiehlt. Sie gehört zur Reihe barrierefreie UI-Muster.

Menü oder Disclosure? Was das APG sagt

Das APG hat ein Muster für Menü und Menubar für Anwendungsmenüs – „eine Liste von Auswahlmöglichkeiten, etwa Aktionen oder Funktionen“, die sich wie Menüs in Desktop-Software verhält. Sein Beispiel einer Navigations-Menubar trägt eine ausdrückliche Warnung:

„Das Muster menubar erfordert komplexe Funktionen, die für typische Website-Navigation unnötig sind“ … „Ein Muster, das für typische Website-Navigation mit aufklappbaren Linkgruppen besser geeignet ist, ist das Disclosure-Muster.“

Das APG ergänzt, das Disclosure-Muster sei „für die meisten Websites besser geeignet, weil nur wenige Websites die zusätzliche Tastaturfunktionalität brauchen“. Sein Beispiel für Disclosure-Navigation verwendet die Rolle menu nicht, weil es „nicht die komplexe Funktionalität bietet, die assistive Technologien erwarten“. Ein role="menu" ist das Versprechen eines Menüverhaltens wie auf dem Desktop; liefert die Website das nicht, ist das Menü schwerer zu bedienen als schlichte Links.

Empfehlung: ein nav-Landmark, verschachtelte Listen mit Links und Disclosure-Buttons für die Gruppen.

Relevante WCAG-Kriterien

• 2.1.1 Tastatur (A): Jedes Untermenü öffnet sich per Tastatur, nicht nur beim Darüberfahren.
• 1.3.1 Info und Beziehungen (A): Listen und Verschachtelung vermitteln die Hierarchie.
• 4.1.2 Name, Rolle, Wert (A): Umschalt-Buttons stellen aria-expanded bereit.
• 1.4.13 Inhalt bei Hover oder Fokus (AA): Beim Darüberfahren geöffnete Flyouts lassen sich schließen (Escape) und bleiben beim Überfahren sichtbar.
• 2.4.1 Blöcke umgehen (A): Ein Sprunglink oder Landmarks, um ein langes Menü zu überspringen.
• 2.4.3 Fokus-Reihenfolge (A) und 2.4.7 Fokus sichtbar (AA).
• 3.2.3 Konsistente Navigation (AA): Auf jeder Seite dieselbe Reihenfolge.
• 1.4.10 Umfluss (Reflow) (AA) und 2.5.8 Zielgröße (Minimum) (AA) für das mobile Menü.

Codebeispiel

<nav aria-label="Hauptnavigation">
  <ul>
    <li>
      <button type="button" aria-expanded="false" aria-controls="nav-women">Damen</button>
      <ul id="nav-women" hidden>
        <li><a href="/de/damen/kleider">Kleider</a></li>
        <li><a href="/de/damen/schuhe" aria-current="page">Schuhe</a></li>
      </ul>
    </li>
    <li><a href="/de/sale">Sale</a></li>
  </ul>
</nav>

<script>
  document.querySelectorAll('nav button[aria-expanded]').forEach((button) => {
    const list = document.getElementById(button.getAttribute('aria-controls'));
    button.addEventListener('click', () => {
      const open = button.getAttribute('aria-expanded') === 'true';
      button.setAttribute('aria-expanded', String(!open));
      list.hidden = open;
    });
  });
</script>

Hinweise:

• Muss der oberste Eintrag zugleich ein Link zur Kategorieseite sein, hat das APG eine Variante, „Disclosure Navigation Menu with Top-Level Links“: Der Link und ein eigener Umschalt-Button stehen nebeneinander. Machen Sie ein Element nicht gleichzeitig zum Link und zum Umschalter.
• Ergänzen Sie Escape: Schließen Sie die offene Gruppe und setzen Sie den Fokus zurück auf ihren Button, wie es das APG-Beispiel tut.
• Auf Mobilgeräten ist der „Hamburger“-Button dieselbe Disclosure: aria-expanded, ein Name wie „Menü“, und das Panel folgt ihm im DOM.

Tastaturbedienung

Aus dem APG-Beispiel für Disclosure-Navigation:

Eine echte Menubar würde stattdessen verlangen, dass Pfeiltasten zwischen den Einträgen wechseln, Tab die gesamte Menubar verlässt und die Eingabe des Anfangsbuchstabens springt – die „komplexe Funktionalität“, die das APG meint.

Typische Fehler in Online-Shops

• Mega-Menüs, die sich nur beim Darüberfahren mit der Maus öffnen; Tastaturnutzer tabben durch die oberen Links und erreichen die Unterkategorien nie.
• role="menubar" und role="menuitem" auf gewöhnlichen Links, oft aus einem Theme oder Plugin, ohne das Pfeiltasten-Verhalten.
• Verborgene Untermenüs, die noch fokussierbar sind: Tab verschwindet in unsichtbaren Links (Fokus geht hinter opacity: 0 verloren).
• Der Kategoriename ist zugleich Link und Umschalter, sodass Touch- und Tastaturnutzer das Untermenü nicht öffnen können.
• Kein aria-expanded oder es wechselt nie von false.
• Mehrere nav-Landmarks ohne Beschriftung (Haupt-, Footer-, Konto-Navigation), sodass Screenreader-Nutzer sie nicht unterscheiden können.
• Hamburger-Buttons ohne Namen und mobile Menüs, die als Vollbild-Overlay gebaut sind und den Fokus weder halten noch zurückgeben.

Was automatische Prüfungen finden und was manuell zu testen ist

Alle sind Karten in unserer Regelbibliothek. Die Prüfung sieht die Seite so, wie sie lädt, mit geschlossenen Untermenüs. Manuelle Tests: Öffnen Sie jede Gruppe mit Enter oder Leertaste, prüfen Sie, dass sich aria-expanded ändert, drücken Sie Escape, tabben Sie durch die offene Gruppe, prüfen Sie, dass geschlossene Gruppen keinen Fokus erhalten können, und wiederholen Sie das mit dem mobilen Menü bei 320 CSS-Pixeln Breite. Die Browser-Erweiterung kann die Seite mit geöffneter Gruppe prüfen.

Starten Sie die kostenlose Prüfung einer Seite auf Ihrer Startseite. Sie ist eine automatische Prüfung, kein vollständiges Audit.

Häufige Fragen

Sollte die Navigation einer Website role="menu" oder role="menubar" verwenden?

In der Regel nicht. Das APG warnt, das Muster menubar erfordere komplexe Funktionen, die für typische Website-Navigation unnötig sind, und empfiehlt für Navigation mit aufklappbaren Linkgruppen das Disclosure-Muster.

Was ist Disclosure-Navigation?

Ein nav-Element mit einer Liste von Links, bei dem jede Gruppe mit Unterlinks einen Button mit aria-expanded hat, der die Unterliste ein- oder ausblendet. Nutzer bewegen sich darin wie auf der übrigen Seite mit Tab, Enter und Leertaste.

Wie kennzeichne ich die aktuelle Seite im Menü?

Setzen Sie aria-current="page" auf den Link zur Seite, auf der sich der Nutzer befindet, und zeigen Sie es auch optisch, nicht allein durch Farbe.

Braucht das Menü Unterstützung für Pfeiltasten?

Nicht im Disclosure-Muster. Das APG-Beispiel unterstützt Pfeiltasten, Pos1 und Ende als optionale Ergänzung zu Tab. Eine echte menubar muss dagegen das vollständige Pfeiltasten-Modell umsetzen.

Kann eine automatische Prüfung ein Navigationsmenü testen?

Sie findet Links und Buttons ohne Namen, Menürollen ohne Menüeinträge, doppelte unbeschriftete Navigations-Landmarks und verborgene, aber fokussierbare Links. Sie kann nicht testen, ob sich Untermenüs per Tastatur öffnen oder ob aria-expanded aktualisiert wird.

Quellen

• W3C WAI, APG Navigation Menubar example (caution about site navigation): https://www.w3.org/WAI/ARIA/apg/patterns/menubar/examples/menubar-navigation/
• W3C WAI, APG Menu and Menubar pattern: https://www.w3.org/WAI/ARIA/apg/patterns/menubar/
• W3C WAI, APG Disclosure pattern: https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/
• W3C WAI, APG Disclosure Navigation Menu example: https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/
• W3C WAI, APG Menu Button pattern: https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/