A: < form>-Elemente müssen eine Beschriftung haben (WCAG 4.1.2)

Bedeutung
Auswirkung
Empfehlung
Beispiele

Stellt sicher, dass jedes <form> Element über eine eindeutige, programmatisch ermittelbare Beschriftung verfügt.

Das bedeutet

Das Formular hat keinen zugänglichen Namen. Screenreader kündigen nur „Formular“ an, ohne Zweck oder Kontext. Nutzerinnen und Nutzer wissen nicht, welches Formular sie öffnen.

Auswirkung

Orientierung leidet, Vorgänge werden abgebrochen, Fehlerquote steigt. Risiko eines WCAG Verstoßes und negative Wirkung auf Conversion.

Empfehlung

Einen kurzen, eindeutigen Formulartitel vergeben.
Programmatisch verknüpfen: aria-labelledby zu einer sichtbaren Überschrift oder aria-label direkt am <form>.
Titel sichtbar machen und auf der Seite eindeutig halten.

Beispiel

Problematisch

<form>
  <!-- Felder ohne Formulartitel -->
</form>

Besser (sichtbare Überschrift verknüpfen)

<h2 id="contact-h">Kontaktformular</h2>
<form aria-labelledby="contact-h">
  …
</form>

Alternative (kompakt mit Label)

<form aria-label="Newsletter Anmeldung">
  …
</form>

Suche (zusätzliche Semantik hilfreich)

<form role="search" aria-label="Website Suche">
  …
</form>

Verknüpfte WCAG-Kriterien:
WCAG 4.1.2 - Name, Rolle, Wert