---
title: CPS Use Case Technische Barrierefreiheit
url: "https://www.cps-it.de/cases/short/technische-barrierefreiheit"
description: Ein Navigationsmenü ist als Eingangstor zu den Inhalten für jede Website ein entscheidender Faktor der User Experience. Welche Anpassungen für ein barrierefreies Navigationsmenü wichtig sind, haben wir durch unser BITV-Projekt für die Websites des PtX Lab Lausitz gelernt.
date: 2024-03-22
modified: 2024-03-26
---

# CPS Use Case Technische Barrierefreiheit

©

stock.adobe.com/elypse

 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?

  Case ansehen (2 Minuten Lesezeit)

 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