Ein Mann mit Headset sitzt vor einem Laptop und tätigt Eingaben über eine Braille-Tastatur.

Technische Barrierefreiheit

Accessibility, WAI-ARIA, WCAG

Ein Navigationsmenü ist das Eingangstor zu den Inhalten für jede Website und ein entscheidender Faktor der User Experience. Auch User mit Vorlesetechnologien sollten sich problemlos im Menü zurechtfinden und einen Überblick über die Inhalte verschaffen können. Welche Anpassungen sind für ein barrierefreies Navigationsmenü wichtig und wie kann damit BITV-Konformität erreicht werden?

Das Problem

Oberflächlich betrachtet besitzen viele Navigationsmenüs eine gute User Experience. Wenn unser Accessibility Team diese Menüs dann aber auf Barrierefreiheit überprüft, bestehen viele nicht die erforderlichen Prüfschritte. Die sind aber wichtig, damit das Menü mit Maus und Tastatur einwandfrei zu bedienen ist und assistive Vorlesetechnologien wie Screenreader zu dem wechselnden Status der Bedienelemente Feedback geben können – zum Beispiel, ob ein Untermenüpunkt geöffnet oder geschlossen ist.

Die Lösung

Schaltflächen und Pfeile im Navigationsmenü müssen beschriftet werden und sich bei Interaktion mit Maus und Tastatur korrekt verhalten. Daher geben wir dem Schließen-Button sowie den Pfeilen zum Öffnen und Schließen der Untermenü-Punkte mittels span class = u-accessibility aussagekräftige Beschriftungen und zeichnen it aria-expanded „true“ und „false“ die wechselnden Zustände aus. Der Screenreader kann nun die Beschriftungen und Zustände der Menüpunkte erkennen und sprachlich ausgeben. Für unseren Kunden PtX Lab Lausitz war das Navigationsmenü ein Baustein im Gesamtkonstrukt der BITV-konformen Website.

Projektdetails

Kunde

PtX Lab Lausitz / Zukunft – Umwelt – Gesellschaft (ZUG) gGmbH

Branche

Umwelttechnologie

Schlagworte

Accessibility
WAI-ARIA
WCAG