Barrierefreie Navigationsmenüs mit der Popover API erstellen

Erstellt am 17.10.2024

Navigationsmenüs sind ein wesentlicher Bestandteil jeder Website. Sie sind meistens in der Kopfzeile platziert und bieten einen Überblick über die Seitenhierarchie einer Website. Nutzer:innen können sich einen Überblick über den Inhalt verschaffen und schnell zu den wichtigsten Abschnitten der Website navigieren.

Viele Websites verwenden Fly-Out-Menüs (oder Drop-Down-Menüs), bei denen bestimmte Menüpunkte ein Untermenü öffnen, wenn man sie anklickt oder den Mauszeiger über sie bewegt. Oft sind diese Menüs für Screenreader- und Tastatur-Nutzer:innen nur sehr schlecht zugänglich. Aber wir können es besser machen!

Ich zeige euch, wie ihr auf einfache Weise ein barrierefreies Fly-Out-Menü bauen könnt. Dazu nutzen wir die Fähigkeiten moderner Web-Features wie der Popover API.

Eine Hand hält einen Kompass zur Navigation hoch. Im Hintergrund ist eine felsige Küste mit Bäumen zu sehen. Foto: © Valentin Antonucci / pexels.com

Was wir erreichen wollen

Unser Navigationsmenü sollte für verschiedene Nutzergruppen einfach zu bedienen sein:

Die Untermenüs sollten über dem Inhalt der Website erscheinen und nicht sofort verschwinden, wenn die Maus den anklickbaren Bereich verlässt.
Nutzer:innen von Bildschirmlesegeräten benötigen aussagekräftiges Markup, um das Navigationsmenü zu verstehen und zu bedienen.
Tastaturnutzer:innen sollen das Menü allein mit der Tastatur bedienen können.

Demo: Barrierefreies Navigationsmenü

Ich habe eine CodePen-Demo eines barrierefreien Navigationsmenüs mit der Popover-API erstellt. Öffnet die Demo auf einem Desktop-Bildschirm oder einem Tablet im Querformat, um das Fly-Out-Menü zu sehen. Auf kleineren Geräten wird die Demo stattdessen ein mobiles Menü anzeigen.

Screenshot der Demo-Seite des barrierefreien Navigationsmenüs. Das Untermenü des Menüpunkts Solutions ist geöffnet. Foto: © Alexander Lehner

Das Navigationsmenü ist für Maus-, Tastatur- und Screenreader-Nutzer:innen leicht zu bedienen. Schauen wir uns die wichtigsten Elemente an.

Aussagekräftiges Markup

Wir verwenden das nav-Element, um die Rolle des Menüs zu vermitteln. Die Menüpunkte befinden sich in einer ungeordneten Liste (ul-Element). So können assistive Technologien die Anzahl der Menüpunkte vorlesen und entsprechende Navigationsfunktionen bereitstellen.

<nav class="main-nav">
    <ul>
        <li>
            <button popovertarget="nav-panel-solutions" type="button">Solutions</button>
            <div id="nav-panel-solutions" popover>...</div>
        </li>
        <li><a href="#">Products</a></li>
        <li>...</li>
        <li>...</li>
    </ul>
</nav>

Die Listenelemente enthalten entweder einen direkten Link zu einer Unterseite, oder sie enthalten ein button-Element, das ein Untermenü mit popover-Attribut öffnet. Die Schaltfläche ist mit dem Popover-Inhalt über das Attribut popovertarget verknüpft.

Einer der großen Vorteile der Popover-API: Sie teilt den assistiven Technologien automatisch mit, ob das Untermenü gerade ein- oder ausgeklappt ist. Weitere Informationen findet ihr im Artikel „On popover accessibility: what the browser does and doesn’t do“.

Vermeidet die `menu`-Rolle

In meiner Demo verwende ich die Rollen menu und menuitem nicht für das Navigationsmenü. Das ist Absicht! Diese ARIA-Rollen sind nur für Menü-Widgets gedacht, die sich wie native Betriebssystem-Menüs verhalten.

Lest den Artikel „Don’t Use ARIA Menu Roles for Site Nav“ von Adrian Roselli für eine detaillierte Erklärung.

Visuelle Platzierung

Wenn ein Untermenü geöffnet wird, erscheint es automatisch im Top-Layer, einer separaten Ebene, die über allen anderen im Webdokument angezeigten Ebenen liegt. Ihr müsst euch nur um die Platzierung und Größe des Untermenüs kümmern:

header nav.main-nav [popover] {
    top: var(--header-height);
    margin: 0;
    width: 100%;
}

Popover-Inhalte erscheinen standardmäßig in der Mitte des Bildschirms. Um unsere Untermenüs direkt unterhalb der Kopfzeile zu platzieren, setzen wir für top die Höhe der Kopfzeile und entfernen jeglichen margin. Anschließend setzen wir width auf 100%, damit das Untermenü die gesamte Breite der Seite einnimmt.

Tastaturbedienbarkeit

Mit der TAB-Taste könnt ihr die Links und Schaltflächen im Navigationsmenü fokussieren. Nach dem Öffnen eines Untermenüs ist dessen Inhalt der nächste in der Fokusreihenfolge. Durch Drücken der ESC-Taste wird das Untermenü geschlossen und der Fokus automatisch wieder auf die Trigger-Schaltfläche gesetzt. Alles dank der mächtigen Popover-API! 🤩

Light-Dismiss der Untermenüs

Ein weiteres integriertes Feature der Popover-API ist Light-Dismiss: Wenn ihr einen Bereich außerhalb des Untermenüs anklickt, wird das Untermenü geschlossen und der Fokus auf das Trigger-Element zurückgesetzt. Ihr müsst euch nicht mehr mit focusout-Events in JavaScript herumschlagen.

Nützliche Links