AA: Interaktive Elemente zeigen ihren Zweck und Zustand an (WCAG 1.3.1 + 4.1.2)

Das bedeutet

Interaktive Elemente wie Schaltflächen, Links oder Eingabefelder müssen klar als bedienbar erkennbar sein. Nutzer und Nutzerinnen sollen sofort verstehen, dass ein Element anklickbar oder fokussierbar ist und welchen Zustand es aktuell hat (zum Beispiel „aktiv“, „gedrückt“, „deaktiviert“ oder „besucht“).
Das Erscheinungsbild (Form, Farbe, Stil) sollte sich deutlich von statischen Inhalten unterscheiden.

Auswirkung

Wenn interaktive Elemente nicht als solche wahrgenommen werden, wissen Nutzer und Nutzerinnen nicht, wo sie klicken oder interagieren können. Das kann zu Verwirrung, Fehlbedienung oder einem Abbruch der Interaktion führen. Ein fehlender oder unklarer Zustand (z. B. kein Hover, kein Fokus) verletzt WCAG 1.3.1 (A) Info und Beziehungen sowie WCAG 4.1.2 (A) Name, Rolle, Wert.

Empfehlung

Interaktive Elemente sollten sich optisch deutlich von statischem Text unterscheiden (z. B. durch Farbe, Unterstreichung, Schatten oder Rahmen).
Verwenden Sie Zustände wie hover, focus, active und disabled, um Interaktionen visuell darzustellen.
Entfernen Sie keine Fokusrahmen – sie zeigen an, welches Element gerade aktiv ist.
Links sollten sich im normalen Zustand vom Text unterscheiden und bei Hover oder Fokus eine sichtbare Veränderung zeigen.
Schaltflächen sollten inaktiv (disabled) klar erkennbar sein.

Beispiele

Problematisch:

Klicken Sie hier.

<span>Klicken Sie hier</span>

Dieses Element sieht aus wie normaler Text und zeigt keine Interaktionsmöglichkeit.

Besser:

<button type="button">Klicken Sie hier</button>

Ein echtes Schaltflächen-Element ist per Tastatur fokussierbar, reagiert auf Klicks und zeigt optische Zustände.

Alternativ (Link):

Kontakt aufnehmen.

<a href="/kontakt" style="color:#2563eb; text-decoration:underline;">Kontakt aufnehmen</a>

Der Link ist klar als interaktives Element erkennbar und hebt sich visuell vom Fließtext ab.

Hinweis

Eine gute visuelle Affordanz ist ein Kernprinzip barrierefreier Gestaltung. Interaktive Elemente müssen sich erkennbar verhalten und sichtbar auf Benutzeraktionen reagieren – unabhängig von Farbe allein.

Verknüpfte WCAG-Kriterien:

WCAG 1.3.1 – Info und Beziehungen
WCAG 4.1.2 – Name, Rolle, Wert
Zur offiziellen WCAG-Dokumentation →