Interaktion & Wahrnehmung

Nutzer*innen müssen auch visuell erkennen können, welche Elemente interaktiv sind, welchen Zustand sie besitzen und was bei einer Interaktion passiert. Gleichzeitig müssen sie so gestaltet sein, dass sie mit unterschiedlichen Eingabemethoden zuverlässig aktiviert werden können. Barrierefreie Gestaltung betrifft also die Wahrnehmbarkeit und die Bedienbarkeit einer Navigation. Farbe, Kontrast, Größe, Abstand und visuelles Feedback können für die zuverlässige Nutzung eines Navigationssystems entscheidend sein.

Farbe & Kontrast

Farbe ist ein wichtiges Gestaltungsmittel, sollte im besten Fall aber nicht die einzige Möglichkeit sein, Informationen und Zustände zu vermitteln. Durch zusätzliche visuelle Mittel können Informationen besser erkennbar sein. Wird beispielsweise ein Navigationspunkt ausschließlich durch eine andere Textfarbe gekennzeichnet, kann dieser Unterschied mit eingeschränkter Farbwahrnehmung schwer erkennbar sein. Zusätzliche Merkmale können beispielsweise eine Unterstreichung oder eine veränderte Schriftstärke sein, damit der aktuelle Zustand nicht allein von der Wahrnehmung einer bestimmten Farbe abhängig ist.

Auch ausreichende Kontraste zwischen Vorder- und Hintergrund sind erforderlich. Nach WCAG 2.2 benötigt normaler Text grundsätzlich ein Kontrastverhältnis von mindestens 4,5:1, großer Text mindestens 3:1. Für relevante grafische Elemente und Zustände von Bedienelementen gelten ebenfalls Anforderungen an den Kontrast.

Kennzeichnung interaktiver Elemente

Ein Element sollte nicht erst nach einem Klick als interaktiv erkennbar werden, sondern ausreichend visuelle Hinweise auf seine Funktion erhalten. Dabei können Konventionen hilfreich sein: Unterstrichene Links werden häufig als Links erkannt, eine klar abgegrenzte Fläche mit Beschriftung kann als Button wahrgenommen werden.

Besonders problematisch sind Interaktionen, die ausschließlich durch einen Hover sichtbar werden, da auf einem Touchscreen beispielsweise kein Hover-Zustand existiert. Eine Funktion sollte nicht voraussetzen, dass Nutzer*innen ein bestimmtes Eingabegerät verwenden. Das haben wir unter “Mega- & Flyout-Menüs” bereits technisch betrachtet. Aus Perspektive der Barrierefreiheit wird daraus die Anforderung, dass die wesentlichen Funktionen beispielsweise mit Maus, Tastatur oder per Touch erreichbar bleiben.

Ausreichende Zielgrößen

Eine zu kleine Klick- beziehungsweise Touchfläche kann die Bedienung eines Links oder Buttons erheblich erschweren. Nicht nur Menschen mit motorischen Einschränkungen profitieren von ausreichenden Zielgrößen. WCAG 2.2 definiert als Minimum der Zielgröße 24 x 24 Pixel. Dabei ist die aktivierbare Fläche entscheidend, also auch bei einem kleineren Icon genügt es, wenn die aktivierbare Fläche groß genug ist:

.menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .75rem;
}

.menu-toggle svg {
    width: 1rem;
    height: 1rem;
}

Für eine komfortable Bedienung kann es sogar sinnvoll sein, über das Minimum der WCAG hinauszugehen, da das Minimum schließlich nur eine Mindestanforderung ist und somit nicht automatisch eine komfortable Bedienung bedeutet. Auch ausreichender Abstand zu benachbarten Elementen verringert das Risiko, versehentlich das falsche Element zu aktivieren.

Verständliches Feedback

BInteraktionen benötigen erkennbare Reaktionen: Wird beispielsweise ein Menü geöffnet oder eine Aktion ausgeführt, sollten Nutzer*innen nachvollziehen können, was sich verändert hat. Bei einer Navigation kann dieses Feedback zum Beispiel durch die Veränderung eines Icons oder die sichtbare Darstellung des Untermenüs erfolgen. Unterschiedliche Formen des Feedbacks sollten dabei zusammenpassen. Ein Pfeil kann sich beim Öffnen des Menüs drehen, während das Untermenü sichtbar wird und aria-expanded den Zustand technisch kommuniziert. Außerdem ist auch hier wichtig, dass Rückmeldungen nicht ausschließlich durch einzelne Wahrnehmungsformen vermittelt werden.

Zusammenfassung

Interaktive Navigation muss sowohl wahrnehmbar als auch zuverlässig bedienbar sein. Informationen und Zustände sollten deshalb nicht ausschließlich durch Farbe vermittelt werden und ausreichende Kontraste die Erkennbarkeit von Texten und Bedienelementen unterstützen. Interaktive Elemente sollten als solche erkennbar sein und ausreichend große Bedienflächen besitzen. Außerdem sollte eine Navigation unterschiedliche Eingabeformen berücksichtigen und verständliches Feedback auf Interaktionen geben.

Quellen

1. Designing for Web Accessibility. W3C Web Accessibility Initiative (WAI). Abgerufen am 14.09.2026.
2. What’s New in WCAG 2.2. W3C Web Accessibility Initiative (WAI). Abgerufen am 14.09.2026.
3. Module 3: Navigation Design. W3C Web Accessibility Initiative (WAI). Abgerufen am 14.09.2026.
4. § 12 Allgemeine Anforderungen an Dienstleistungen (BFSGV), Nr. 2 Buchst. f. Gesetze im Internet. Abgerufen am 01.11.2026.