html-einfach.de

Barrierefreie Komponenten · Navigation & Bedienelemente

Mega-Menüs barrierefrei umsetzen

Von Zuletzt geändert am

Ein Mega-Menü ist ein großes, oft mehrspaltiges Aufklapp-Panel, das viele Links auf einmal zeigt – ideal für Websites mit vielen Themen. Es ist kein neues Muster, sondern die Anwendung des Disclosure-Prinzips im Großen. Genau so ist auch das Menü dieser Website gebaut, deshalb schreibe ich hier aus der Praxis.

Die Struktur: Buttons und Listen

Das Fundament bleibt schlicht: eine Navigation mit einer Liste, deren Top-Einträge Buttons mit aria-expanded und aria-controls sind. Das Panel enthält die Links – bei Bedarf in mehreren Spalten mit Zwischenüberschriften.

<nav aria-label="Hauptnavigation">
  <ul>
    <li>
      <button type="button" aria-expanded="false" aria-controls="panel-seo">SEO & KI</button>
      <div id="panel-seo" hidden>
        <ul>
          <li><a href="/seo-und-ki/title-und-meta-description.html">Title & Meta</a></li>
          <li><a href="/seo-und-ki/interne-verlinkung.html">Interne Verlinkung</a></li>
        </ul>
      </div>
    </li>
  </ul>
</nav>

Wichtig: kein role="menubar". Es sind Links zu Seiten, kein Anwendungsmenü – das vertraute Tab-Modell ist hier genau richtig.

Tastatur und Verhalten

  • Enter / Leertaste auf dem Button öffnet und schließt das Panel.
  • Tab läuft logisch ins Panel und wieder heraus – kein Fokus-Trap.
  • Esc schließt das Panel und gibt den Fokus an den auslösenden Button zurück.
  • aria-expanded spiegelt immer den sichtbaren Zustand.
  • Die aktuelle Seite wird mit aria-current="page" markiert.

Hover ja – aber nie nur Hover

Am Desktop darf sich ein Mega-Menü ergänzend bei Hover öffnen. Entscheidend ist die Regel: niemals ausschließlich Hover. Klick und Tastatur müssen immer funktionieren, sonst ist das Menü auf Touch und ohne Maus tot. Eine kleine Schließverzögerung verhindert, dass das Panel bei minimalem Mauszucken zuklappt.

Randnotiz – Progressive Enhancement. Ein Mega-Menü sollte ohne JavaScript grundsätzlich nutzbar sein. Ein gangbarer Weg: Panels per CSS über :focus-within und :hover erreichbar machen, dann mit einer schlanken JS-Schicht aria-expanded mitführen und Esc behandeln. So bleibt die Navigation selbst dann bedienbar, wenn das Skript scheitert – genau dieser Ansatz steckt hinter dem Menü dieser Seite.

Das mobile Pendant

Aus derselben Datenquelle speist sich die mobile Navigation: ein Hamburger-Button als <button aria-expanded>, der dieselben Einträge in einer aufklappbaren Liste zeigt. Trefferflächen mindestens 24 × 24 px (WCAG 2.2). So bleibt eine Datenquelle für Desktop und Mobil – ohne Drift.

Häufige Fehler

  • role="menubar" für die Seitennavigation – erzwingt unerwartete Pfeiltasten.
  • Nur Hover, unerreichbar für Touch und Tastatur.
  • aria-expanded nicht gepflegt – falsche Ansage „zu“, obwohl offen.
  • Fokus-Trap im Panel, aus dem Tab nicht mehr herausführt.
  • Zu kurze oder fehlende Schließverzögerung, sodass das Panel „wegflutscht“.

Häufige Fragen

In Spalten mit kurzen Zwischenüberschriften und Listen. Das schafft Struktur für Auge und Screenreader – und entspricht dem Topic-Cluster-Denken.

Brauche ich für Desktop und Mobil zwei Datenquellen?

Nein, im Gegenteil. Eine gemeinsame Quelle für beide Ansichten verhindert, dass die Menüs auseinanderlaufen.

Ist ein Mega-Menü überhaupt barrierefrei machbar?

Ja – es ist „nur“ ein großes Disclosure. Die Komplexität liegt in der Menge der Links, nicht im Muster. Sauberes aria-expanded, Tastatur und Esc genügen.

Fazit

Ein Mega-Menü ist Disclosure im Großformat: Buttons mit aria-expanded steuern mehrspaltige Panels mit normalen Links – tastaturbedienbar, mit Esc, ohne menubar-Mechanik. Hover nur ergänzend, mobil aus derselben Quelle, aktuelle Seite per aria-current. Damit bleibt selbst eine umfangreiche Navigation für alle bedienbar. Die Grundlagen dazu vertieft Menüs & Dropdowns.