Beschriftung und Eingabefeld verbinden
Eine Formularbeschriftung sagt dir, welche Angabe ein Feld erwartet. Der Text „E-Mail-Adresse“ neben einem Feld ist dafür ein Anfang. Damit ein Screenreader ihn dem Feld zuordnen kann, braucht es auch eine Verbindung im HTML.
Verwende dafür ein label. Dessen for-Wert muss mit der id des Felds übereinstimmen. Jede id darf auf der Seite nur einmal vorkommen. Das W3C-Tutorial zu Formularbeschriftungen erklärt diese Zuordnung und die Alternative, ein Feld direkt in sein label einzuschließen.
Beispiel für ein erfundenes Kontaktformular:
<label for="contact-email">Deine E-Mail-Adresse</label>
<input
id="contact-email"
name="email"
type="email"
autocomplete="email"
>
Der name-Wert benennt das Feld für die Datenübertragung. Für die Verbindung zum label zählt die id. Ein häufiger Fehler ist daher for="email", obwohl das Feld id="contact-email" trägt. Die sichtbare Nähe bleibt erhalten, die technische Verbindung fehlt. Ein korrekt zugeordnetes Label vergrößert auch die bedienbare Fläche: Ein Klick auf die Beschriftung aktiviert das zugehörige Feld.
Platzhalter und Hinweise ergänzen die Beschriftung
Ein placeholder steht im leeren Eingabefeld und verschwindet, sobald du etwas eingibst. Wer danach eine Angabe kontrolliert, kann die ursprüngliche Erklärung nicht mehr sehen. Verwende Platzhalter daher höchstens als ergänzendes Beispiel und lasse die Beschriftung sichtbar. Das W3C-Tutorial zu Formularhinweisen erklärt dieses Problem.
Ein Browser kann einen Platzhalter unter Umständen als Ersatznamen heranziehen. Für Menschen, die das ausgefüllte Formular sehen, fehlt trotzdem die Beschriftung. Die W3C-Erklärung zur Namensberechnung ordnet solche Ersatznamen ein.
Längere Hinweise passen neben das Feld. Verknüpfe sie bei Bedarf über aria-describedby. Der zugängliche Name beantwortet, welche Angabe erwartet wird; die Beschreibung kann etwa ein Datumsformat erklären. Markiere Pflichtfelder sichtbar und technisch, zum Beispiel mit „Pflichtfeld“ im Label und dem HTML-Attribut required. Ein Sternchen braucht eine verständliche Erklärung.
Zusammengehörige Felder als Gruppe kennzeichnen
Bei einer Auswahl braucht jede Option eine Beschriftung. Dazu kommt die gemeinsame Frage. fieldset fasst die Optionen zusammen, legend benennt die Gruppe. Das folgende erfundene Beispiel fragt nach dem gewünschten Rückrufzeitraum:
<fieldset>
<legend>Wann können wir dich zurückrufen?</legend>
<label>
<input type="radio" name="callback" value="morning">
Vormittags
</label>
<label>
<input type="radio" name="callback" value="afternoon">
Nachmittags
</label>
</fieldset>
Ohne die Gruppenbezeichnung fehlt den Antworten ihr Zusammenhang. Halte die Frage kurz und die einzelnen Beschriftungen verständlich, weil Screenreader die Gruppe je nach Einstellung unterschiedlich ausgeben. Weitere Beispiele enthält das W3C-Tutorial zum Gruppieren von Formularfeldern.
Den Eingabezweck mit autocomplete angeben
Das Attribut autocomplete kann Browsern und Hilfsmitteln den Zweck persönlicher Angaben mitteilen, etwa email, given-name oder postal-code. So können sie gespeicherte Daten passend anbieten oder das Feld mit einem vertrauten Symbol ergänzen.
WCAG 1.3.5 „Identify Input Purpose“ betrifft bestimmte standardisierte Eingabezwecke, wenn das Feld Angaben über den Nutzer erfragt und die eingesetzte Technik deren Kennzeichnung unterstützt. Daraus folgt keine Pflicht zu autocomplete für jedes beliebige Feld. Eine Produktsuche oder der Name eines beschenkten Dritten fällt nicht allein deshalb darunter, weil jemand Text eingibt. type="email" beschreibt wiederum nur die Art der Eingabe; es sagt noch nicht, wessen E-Mail-Adresse erwartet wird.
Fehler nennen und Korrekturen ermöglichen
Schreibe bei einer ungültigen Eingabe, welches Feld betroffen ist und wie der Nutzer den Fehler beheben kann. Eine rote Umrandung allein vermittelt diese Information nicht. Das W3C-Tutorial zu Formularrückmeldungen empfiehlt konkrete Fehlermeldungen, ihre Zuordnung zum Feld und bei mehreren Fehlern eine Übersicht mit Links zu den betroffenen Feldern.
Dieses erfundene Beispiel zeigt den Fehlerzustand eines Formulars für eine deutsche Lieferadresse nach einer unvollständigen Eingabe:
<label for="postal-code">Postleitzahl</label>
<input
id="postal-code"
name="postal_code"
autocomplete="postal-code"
value="12"
aria-invalid="true"
aria-describedby="postal-error"
>
<p id="postal-error">
Gib eine fünfstellige deutsche Postleitzahl ein.
</p>
aria-invalid="true" kennzeichnet hier den erkannten Fehler; aria-describedby verknüpft den erklärenden Text. Setze den Fehlerzustand nach der Prüfung und entferne ihn nach erfolgreicher Korrektur. Die W3C-Technik zu aria-invalid beschreibt diesen Einsatz. Prüfe bei dynamischen Formularen auch, ob Hilfsmittel neue Fehlermeldungen wahrnehmen und Nutzer das betroffene Feld erreichen können.
Grenzen der automatischen Formularprüfung
ClariSEO sucht im Quelltext nach Feldern ohne erkennbaren Namen, nach Platzhaltern als einziger Beschriftung und nach Hinweisen auf fehlende autocomplete-Angaben. Die Prüfung des Eingabezwecks nutzt unter anderem Feldtypen und Bezeichnungen. Sie meldet einen Hinweis erst bei mindestens zwei erkannten Feldern ohne das Attribut im selben Formular und überspringt vorhandene autocomplete-Angaben. Sie bestätigt damit weder, dass ein gesetzter Wert passt, noch dass alle betroffenen Felder gefunden wurden.
Verständlichkeit, dynamische Fehlerzustände und vollständige Formularabläufe brauchen ergänzende manuelle Prüfungen. Fülle dein Formular mit der Tastatur aus, löse absichtlich einen Fehler aus und korrigiere ihn. Prüfe mit einem Screenreader, ob Beschriftungen, Hinweise und Rückmeldungen im passenden Zusammenhang ankommen. Der Barrierefreiheit-Check beschreibt, welche automatisierten Prüfungen ClariSEO übernimmt.