Barrierefreie Dropdown-Navigationen

Eine Navigation mit Dropdown-Menüs kann für die Barrierefreiheit eine echte Herausforderung sein. In diesem Artikel zeige ich dir anhand eines konkreten Beispiels, wie eine solche Navigation gestaltet werden kann. Ziel ist es, eine Navigation mit einem ausklappenden Untermenü, einem so genannten Dropdown so zu erstellen, dass es mit der Tastatur bedienbar ist und von einem Screenreader vorgelesen werden kann.

Schau dir dazu mein Beispiel unter https://web-einfach-machen.de/Kursmaterialien/Kurs_Frontend-komplett/Vorarbeiten/barrierearme-Dropdown-Navigation.html an. Du findest im Quellcode dieser Demodatei ausführliche Kommentare zu den einzelnen Code-Bestandteilen, in denen ich vor allen Dingen die Funktionen der aria-Attribute erläutere. 

Wenn du diese Seite auf unterschiedlichen Viewports betrachtest, siehst du, dass diese Navigation responsiv ist, d.h. die Menüpunkte werden auf Smartphones in einem Toggle-Menü / Hamburger-Menü untereinander und auf größeren Desktop-PC-Monitoren nebeneinander angezeigt.
Die Navigationselemente sind, wie üblich, in einer ungeordneten Liste <ul> organisiert. Für Dropdown-Menüs verwende ich allerdings <button>-Elemente, was für Tastatur- und Screenreader-Nutzer besser geeignet ist, als Hyperlinks mit JavaScript in Schaltflächen zu verwandeln.

Die Navigation ist vollständig per Tastatur bedienbar. Mithilfe der Enter- oder der Leertaste öffnet man das Dropdown-Menü. Mit den Pfeiltasten kannst du Elemente innerhalb des Dropdown-menüs auswählen und mit der Escape-Taste ein Dropdown schließen.

Ein blinder Nutzer, der sich die Seite von einem Screenreader vorlesen lässt, sollte hier die Information bekommen, dass er einen Dropdown Button mit entsprechendem ausklappenden Menü vor sich hat. Und die Information, ob dieses Untermenü aktuell ein- oder ausgeklappt ist.
An dieser Stelle arbeiten wir mit so genannten Aria Attributen.

Die wichtigsten aria-Attribute, die ich in meiner Demodatei nutze, sind

• aria-haspopup: Weist Screenreader darauf hin, dass ein Element ein Kontextmenü, Untermenü oder ein Pop-up-Element öffnet, wenn es aktiviert wird.
• aria-expanded: Gibt an, ob ein Element ausgeklappt (true) oder eingeklappt (false) ist.
• aria-hidden: Versteckt Text vor Screenreadern. Nutze ich, damit das Sonderzeichen für die Darstellung des Burger-Icons vom Screenreader nicht vorgelesen wird.

Eine Übersicht über alle aria-Attribute findest du unter https://developer.mozilla.org/de/docs/Web/Accessibility/ARIA/Reference/Attributes.

Das Öffnen und Schließen der Navigation und der Dropdowns geht per Javascript. Du findest einen gut kommentierten Quellcode in meiner Beispieldatei unter https://web-einfach-machen.de/Kursmaterialien/Kurs_Frontend-komplett/Vorarbeiten/barrierearme-Dropdown-Navigation.html in dem das Zusammenspiel von aria-Attributen, JS und CSS erklärt wird.

Um die Wirkungsweise der aria-Attribute wirklich zu verstehen, solltest du das Beispiel mit einem Screenreader testen. Ich verwende dafür VoiceOver auf dem Mac. Hinweise zur Bedienung von VoiceOver findest du unter https://dequeuniversity.com/screenreaders/voiceover-keyboard-shortcuts.

Soweit zur Einführung in grundlegende Techniken für die barrierearme Navigation. Jetzt ist es an der Zeit, dass du dir den gut kommentierten Quellcode in meiner Beispieldatei unter https://web-einfach-machen.de/Kursmaterialien/Kurs_Frontend-komplett/Vorarbeiten/barrierearme-Dropdown-Navigation.html anschaust, analysierst und für eigene Webprojekte adaptierst.