Wann Sie das Muster einsetzen
Jedes Formular braucht dieses Muster. Prüfen Sie Eingaben beim Absenden und zeigen Sie dann alle Fehler auf einmal: oben eine Übersicht mit Links zu den Feldern, an jedem Feld die genaue Meldung. Meldungen schon beim Tippen sind für Screenreader-Nutzer oft störend; wenn, dann erst, wenn jemand das Feld verlässt.
Mehr zu Beschriftungen, Pflichtfeldern und Autovervollständigung steht im Ratgeber zu barrierefreien Formularen.
Rollen, Zustände, Eigenschaften
- Jedes Feld hat ein sichtbares
<label>; Hinweise zum Format stehen vor dem Absenden da und sind peraria-describedbyverknüpft. - Bei einem Fehler:
aria-invalid="true"am Feld und die Fehlermeldung zusätzlich inaria-describedby. - Die Meldung beschreibt den Fehler und die Lösung als Text, nicht nur durch Farbe oder ein Symbol.
- Nach dem Absenden erhält eine Fehlerübersicht (Überschrift mit
tabindex="-1") den Fokus; sie listet jeden Fehler als Link zum Feld. - Eingaben bleiben erhalten; niemand muss das Formular neu ausfüllen.
Tastaturbedienung
| Taste | Wirkung |
|---|---|
| Tab | Durch die Felder und zum Absenden-Button. |
| Enter | Sendet das Formular ab; bei Fehlern springt der Fokus zur Fehlerübersicht. |
| Enter | Auf einem Link der Fehlerübersicht: springt direkt ins fehlerhafte Feld. |
Code
<label for="mail">E-Mail-Adresse</label>
<p id="mail-hint">Zum Beispiel [email protected]</p>
<input id="mail" type="email" autocomplete="email"
aria-describedby="mail-hint mail-err"
aria-invalid="true">
<p id="mail-err" class="err">
Fehler: Bitte geben Sie eine E-Mail-Adresse mit @
ein, zum Beispiel [email protected].
</p>
<!-- oben im Formular, erhält nach dem Absenden den Fokus -->
<div class="err-summary">
<h2 tabindex="-1">2 Fehler im Formular</h2>
<ul><li><a href="#mail">E-Mail-Adresse fehlt das @</a></li></ul>
</div>Häufige Fehler
- Fehler nur durch einen roten Rahmen gekennzeichnet (Verstoß gegen 1.4.1 Benutzung von Farbe und 3.3.1 Fehlererkennung).
- Meldung „Ungültige Eingabe“ ohne Hinweis, was erwartet wird (3.3.3).
- Fehlermeldung steht irgendwo auf der Seite, ist aber nicht mit dem Feld verknüpft.
- Absenden-Button bleibt deaktiviert, bis alles stimmt: Niemand erfährt, was fehlt.
- Nach dem Absenden ist das Formular leer.
Passende WCAG-Kriterien
Quellen
Sind Ihre Komponenten so gebaut?
Der kostenlose Check findet viele Fehler automatisch. Im Audit prüft ein Mensch jede Komponente mit Tastatur und Screenreader.