ARIA

ARIA-Eingabefelder brauchen einen Namen

Regel: aria-input-field-name
Schweregrad: Schwerwiegend
WCAG-Stufe A

Warum das wichtig ist

Eine Combobox, Listbox oder Suchbox aus generischen Elementen hat keine eigene Beschriftung. Ohne Namen wird sie nur über ihre Rolle angesagt — ihr Zweck bleibt unsichtbar für alle, die nicht auf den Bildschirm schauen.

So beheben Sie es

Verweisen Sie mit aria-labelledby auf das sichtbare Beschriftungselement.
Fehlt eine sichtbare Beschriftung, nutzen Sie aria-label mit demselben Wortlaut wie der Platzhalter.
Ein Platzhalter allein ist kein Name: Er verschwindet, sobald jemand tippt.

Im Markup

Fehlerhaft

<div role="combobox" aria-expanded="false"></div>

Korrekt

<div role="combobox" aria-expanded="false" aria-label="Country"></div>

Die Anforderung dahinter

Diese Regel ist eine Art, die folgenden WCAG-2.2-Erfolgskriterien zu verfehlen. Das W3C, das den Standard herausgibt, erläutert jedes davon:

4.1.2 Name, Rolle, Wert (öffnet in neuem Tab) — WCAG-Stufe A

Weiterführende Quellen

Deque University zu aria-input-field-name (öffnet in neuem Tab)

Deque entwickelt axe-core, die quelloffene Prüf-Engine unseres Scanners. Ihre Seite dokumentiert die Regel so, wie die Engine sie umsetzt.

Automatische Prüfungen finden Fehler, die ein Browser nachweisen kann. Ob eine Untertitelspur inhaltlich stimmt, ob ein Alternativtext wirklich hilft oder ob sich eine Seite durchgängig mit der Tastatur bedienen lässt, kann nur ein Mensch beurteilen.