Form Accessibility
Jedes Feld nennt seinen Zweck
Eingabefeld, Auswahlliste, Eingabezweck: drei Stellen im Formular.
Formular als Nutzerweg
Jede Eingabe braucht Name, Hilfe und Rückmeldung
Eine schematische Anfrage zeigt die Verbindungen hinter einem zugänglichen Formular.
- 1Sichtbarer Name
for="name"zeigt aufid="name". - 2Hilfe am Feld
aria-describedbyverbindet die kurze Erklärung. - 3Gruppe mit Frage
fieldsetundlegendhalten Auswahl und Frage zusammen. - 4Eingabezweck
Gültige
autocomplete-Werte unterstützen das Ausfüllen.
„E-Mail, Pflichtfeld, Eingabefeld. Wir senden die Antwort an diese Adresse.“
Die genaue Ansage hängt von Hilfsmittel und Browser ab. Entscheidend sind Name, Zweck und Beschreibung.
Nach dem Absenden
Der Fehlerweg bleibt sichtbar und kurz
Text, Fokus und Verknüpfung führen zur Korrektur und danach zur Bestätigung.
Die Prüfung findet zwei unvollständige Angaben.
Absenden- E-Mail: Bitte geben Sie eine vollständige Adresse ein.
- Nachricht: Bitte beschreiben Sie Ihr Vorhaben.
Bitte geben Sie eine vollständige Adresse ein.
Zusammenfassung und Feld nennen denselben Fehler.Eine Statusmeldung bestätigt den Abschluss, ohne den Fokus unnötig zu versetzen.
Referenzmuster
Die Verbindungen im HTML
Das Beispiel zeigt ein Feld vollständig: sichtbarer Name, Zweck, Hinweis, Fehlermeldung und eine Zusammenfassung mit Sprungziel.
- Name
labelundfor- Hilfe
aria-describedby- Fehler
aria-invalidplus Text- Ergebnis
role="status"
<form id="anfrage" novalidate>
<div id="fehler" tabindex="-1" hidden>
<h2>Bitte prüfen Sie Ihre Eingabe</h2>
<a href="#email">
E-Mail: vollständige Adresse eingeben
</a>
</div>
<label for="email">E-Mail (Pflichtfeld)</label>
<input id="email" name="email" type="email"
autocomplete="email" required
aria-describedby="email-hilfe email-fehler">
<p id="email-hilfe">
Wir senden die Antwort an diese Adresse.
</p>
<p id="email-fehler"></p>
<button type="submit">Anfrage senden</button>
<p id="erfolg" role="status"></p>
</form>Zustand aktualisieren
Fehler in Text und Code setzen
Das Skript ergänzt die Browserprüfung um eigene Rückmeldung. Die gleiche Prüfung gehört weiterhin auf den Server.
const form = document.querySelector('#anfrage');
const email = document.querySelector('#email');
const fehler = document.querySelector('#fehler');
const text = document.querySelector('#email-fehler');
const erfolg = document.querySelector('#erfolg');
form.addEventListener('submit', (event) => {
event.preventDefault();
const ungueltig = !email.validity.valid;
email.setAttribute('aria-invalid', String(ungueltig));
text.textContent = ungueltig
? 'Bitte geben Sie eine vollständige Adresse ein.'
: '';
fehler.hidden = !ungueltig;
if (ungueltig) {
fehler.focus();
return;
}
erfolg.textContent = 'Anfrage gesendet.';
});So prüfen Sie es
Beobachten Sie den ganzen Weg
- 01Name
Klick auf das sichtbare Label setzt den Fokus ins Feld.
- 02Fehler
Leeres Absenden zeigt Zusammenfassung und Text direkt am Feld.
- 03Tastatur
Der Link in der Zusammenfassung führt zurück zum fehlerhaften Feld.
- 04Erfolg
Nach gültiger Eingabe wird die Bestätigung wahrnehmbar ausgegeben.
Aus dem Prüfbericht
Drei Regeln, drei Befunde
Kritisch Die Felder tragen nur Platzhalter Regel label
Der graue Text im Feld verschwindet beim Tippen. Ein label mit for gibt jedem Feld einen bleibenden Namen.
Kritisch Die Auswahl der Anrede hat keinen Namen Regel select-name
Über der Liste steht „Anrede“ nur als span. Ein label mit for oder aria-labelledby verbindet den Text mit dem Auswahlfeld.
Kritisch Der Eingabezweck ist frei erfunden Regel autocomplete-valid
Am E-Mail-Feld steht autocomplete="mailadresse". Nur ein Wert aus der festen Liste, hier email, lässt den Browser das Feld füllen.
Zum Mitnehmen
Das Formular, korrigiert
Drei Änderungen im HTML. Felder, Namen und Werte bleiben.
Korrektur in 3 Schritten ansehen
Den Platzhalter durch ein label ersetzen
Ein label mit for wird zum Namen des Feldes und bleibt beim Tippen stehen. Der Platzhalter ist dafür kein Ersatz.
KorrekturvergleichSchritt 1 · HTML Vorher
<input type="text" name="vorname" placeholder="Vorname">Nachher
<label 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 der Name verbunden.
Die Auswahlliste benennen
Aus dem span wird ein label mit for. Der sichtbare Text bleibt gleich und ist zugleich der Name der Auswahlliste.
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 Klicken Sie auf „Anrede“. Der Fokus springt in die Auswahlliste.
Einen gültigen Eingabezweck setzen
autocomplete kennt eine feste Liste von Werten. Nur ein gültiger Wert erlaubt es Browser und Hilfsmitteln, das Feld automatisch zu füllen.
KorrekturvergleichSchritt 3 · HTML Vorher
<label for="mail">E-Mail</label> <input id="mail" type="email" name="mail" autocomplete="mailadresse">Nachher
<label for="mail">E-Mail</label> <input id="mail" type="email" name="mail" autocomplete="email">Markierte Zeilen wurden geändert
So prüfen Sie es Tippen Sie einen Buchstaben in das Feld. Der Browser bietet Ihre gespeicherte Adresse an.