HTML Form Accessibility
Jedes Feld im Formular trägt seinen Namen
Eingabefeld, Auswahlliste, Autofill: drei Stellen in einem HTML-Formular.
Formular-Anatomie
Ein Feld ist mehr als ein Rechteck
Name, Zweck, Hinweis, Zustand und Gruppe sind getrennte Informationen. Erst ihre Verbindungen machen aus sichtbaren Feldern ein verständliches Formular.
Was sichtbar ist — und was im Browser ankommt
Die Nummern verbinden jedes sichtbare Teil mit seiner semantischen Aufgabe.
- Zustand
- erforderlich · ungültig
- Beschreibung
- Beispiel … · Geben Sie … ein.
- Eingabezweck
- E-Mail-Adresse
Prüfung und Umsetzung ordnen die Optionen in benannte Gruppen.
Die kurze legend liefert den gemeinsamen Kontext; jedes Optionsfeld behält sein eigenes label.
Die fünf Verbindungen
Eine Aufgabe pro HTML-Beziehung
- 01Name
label[for]↔id- Der sichtbare Text wird zum Namen und vergrößert die anklickbare Fläche.
- 02Beschreibung
aria-describedby→ Hinweis und Fehler- Zusatztext bleibt sichtbar und wird dem Feld programmatisch zugeordnet.
- 03Zustand
required+aria-invalid- Pflicht und erkannter Fehler stehen im Markup; die Fehlermeldung erklärt die Korrektur.
- 04Zweck
autocomplete="email"- Ein festgelegtes Token beschreibt erwartete persönliche Daten; Autofill hängt von Browser, Einstellungen und gespeicherten Daten ab.
- 05Gruppe
fieldset+legend·optgroup- Zusammengehörige Antworten erhalten Kontext. Die genaue Ansage variiert je nach Browser und Hilfstechnik.
Kopierbares Muster
Der Zustand nach einer fehlgeschlagenen Prüfung
Dieses HTML zeigt das vom Server erneut ausgegebene Formular. Die Fehlersumme nennt das betroffene Feld; die Meldung steht zusätzlich direkt am Feld. Setzen Sie den Fokus nach dem erneuten Laden auf die Fehlersumme oder das erste fehlerhafte Feld.
Farbe und Symbol ergänzen die Meldung. Hinweis und Fehler werden gemeinsam über aria-describedby verbunden. Layout ist kein Grund, native Elemente zu ersetzen.
<form action="/kontakt" method="post">
<div id="fehler" tabindex="-1" aria-labelledby="fehler-titel">
<h2 id="fehler-titel">Bitte korrigieren Sie einen Eintrag</h2>
<a href="#mail">E-Mail-Adresse: vollständige Adresse eingeben</a>
</div>
<label for="mail">E-Mail-Adresse (Pflichtfeld)</label>
<input id="mail" name="mail" type="email"
value="anna@firma" autocomplete="email" required
aria-invalid="true"
aria-describedby="mail-hint mail-error">
<p id="mail-hint">Beispiel: name@firma.de</p>
<p id="mail-error">
Geben Sie eine vollständige E-Mail-Adresse ein.
</p>
<label for="thema">Thema der Anfrage</label>
<select id="thema" name="thema">
<option value="">Bitte wählen</option>
<optgroup label="Prüfung">
<option value="bericht">Prüfbericht</option>
<option value="nachtest">Nachtest</option>
</optgroup>
<optgroup label="Umsetzung">
<option value="beratung">Beratung</option>
<option value="schulung">Schulung</option>
</optgroup>
</select>
<fieldset>
<legend>Wie sollen wir antworten?</legend>
<input id="weg-mail" name="weg" type="radio"
value="mail" checked>
<label for="weg-mail">Per E-Mail</label>
<input id="weg-tel" name="weg" type="radio"
value="telefon">
<label for="weg-tel">Per Telefon</label>
</fieldset>
<label for="nachricht">Nachricht (Pflichtfeld)</label>
<textarea id="nachricht" name="nachricht"
rows="5" required></textarea>
<button type="submit">Anfrage senden</button>
</form>Prüfweg
Vier Perspektiven, ein Formular
- 01Sichtbar
Labels, Pflichtangaben, Formate und Fehler bleiben ohne Platzhalter verständlich.
- 02Tastatur
Tab folgt der Lesereihenfolge; Leertaste und Pfeiltasten bedienen native Gruppen.
- 03Accessibility Tree
Jedes Feld zeigt Name, Rolle, Zustand und zugeordnete Beschreibung.
- 04Fehlerfall
Nach Absenden ist der Fehler in Text auffindbar, am Feld erklärt und per Fokus erreichbar.
Quellen: W3C WAI: Labeling Controls, W3C WAI: Grouping Controls, W3C WAI: Form Instructions, W3C: Error Identification und WHATWG: Autofill.
Aus dem Prüfbericht
Drei Regeln, drei Befunde
Kritisch Das Eingabefeld hat keinen Namen Regel label
Ein Text über dem Feld ist keine Verbindung. Ein label mit for auf die id macht ihn zum Namen des Feldes.
Kritisch Die Auswahlliste bleibt namenlos Regel select-name
Ohne Beschriftung sagt die Ausgabe nur den gewählten Eintrag an. Ein label mit for oder ein aria-labelledby nennt den Zweck der Liste.
Kritisch Ein erfundener Wert im autocomplete Regel autocomplete-valid
Nur festgelegte Werte lassen den Browser Name und Adresse einsetzen. Aus "vorname" wird "given-name".
Zum Mitnehmen
Das Formular, korrigiert
Drei Zeilen HTML, kein neues Aussehen.
Korrektur in 3 Schritten ansehen
Textfeld beschriften
Das label zeigt mit for auf die id des Feldes. Klasse und Position bleiben, das Feld bekommt seinen Namen.
KorrekturvergleichSchritt 1 · HTML Vorher
<span class="feldname">Vorname</span> <input id="vorname" type="text" name="vorname">Nachher
<label class="feldname" for="vorname">Vorname</label> <input id="vorname" type="text" name="vorname">Markierte Zeilen wurden geändert
So prüfen Sie es Klicken Sie auf das Wort „Vorname“. Springt der Cursor ins Feld, ist die Verbindung da.
Auswahlliste benennen
Auch eine Auswahlliste braucht eine verbundene Beschriftung. Sonst hört man nur den gewählten Eintrag, nicht die Frage dahinter.
KorrekturvergleichSchritt 2 · HTML Vorher
<span>Anrede</span> <select id="anrede" name="anrede"> <option value="keine">Keine Angabe</option> </select>Nachher
<label for="anrede">Anrede</label> <select id="anrede" name="anrede"> <option value="keine">Keine Angabe</option> </select>Markierte Zeilen wurden geändert
So prüfen Sie es Ein Vorleseprogramm sagt „Anrede“ und danach den gewählten Eintrag.
Gültigen Eingabezweck eintragen
Nur festgelegte Werte beschreiben den Eingabezweck zuverlässig. Mit given-name kann der Browser passende gespeicherte Daten anbieten.
KorrekturvergleichSchritt 3 · HTML Vorher
<label for="vorname">Vorname</label> <input id="vorname" type="text" name="vorname" autocomplete="vorname">Nachher
<label for="vorname">Vorname</label> <input id="vorname" type="text" name="vorname" autocomplete="given-name">Markierte Zeilen wurden geändert
So prüfen Sie es Prüfen Sie mit gespeicherten Formulardaten, ob der Browser einen passenden Vornamen anbietet. Das Verhalten hängt von Browser und Einstellungen ab.