Barrierefreiheit

Formularfeld ohne zugänglichen Namen

Üblicher Schweregrad: hoch · Aufwand: minimal

Woran du es erkennst

Ein Eingabefeld, eine Auswahlliste oder ein Textbereich hat keinen programmatisch zugeordneten Namen — weder ein <label> noch aria-label noch aria-labelledby.

Warum es zählt

Ein Screenreader kündigt das Feld nur als „Eingabefeld" an, ohne seinen Zweck zu nennen. Das Formular ist damit ohne Raten nicht ausfüllbar — und es ist einer der häufigsten und folgenreichsten WCAG-Verstöße auf echten Seiten.

So behebst du es

  1. Verbinde jedes Feld über <label for="…"> mit seiner id. Das vergrößert nebenbei die Klickfläche, weil ein Klick auf die Beschriftung den Fokus setzt.
  2. Lässt sich eine sichtbare Beschriftung wirklich nicht zeigen, setze aria-label mit einer klaren Beschreibung des Feldzwecks.
  3. Wird das Feld durch danebenstehenden Text beschrieben, verknüpfe beides über aria-labelledby mit dessen id.
  4. Prüfe danach erneut automatisiert, ob der Verstoß wirklich behoben und nicht nur optisch überdeckt ist.

Zum Nachlesen