1.3.5 Eingabezweck bestimmen

Was bedeutet das?

Mit dem Attribut autocomplete sagen Sie dem Browser, welche Angabe ein Feld erwartet, zum Beispiel autocomplete="email" oder autocomplete="postal-code". Dann kann der Browser gespeicherte Daten automatisch eintragen, und manche Hilfsmittel können bekannte Symbole neben dem Feld zeigen.

Das Kriterium gilt nur für Felder, die Angaben über die Person selbst abfragen, die das Formular ausfüllt, und nur für Zwecke aus der festen Liste in WCAG (Name, Adresse, Telefon, E-Mail, Geburtsdatum, Zahlungsdaten und weitere). Ein Feld für die Adresse einer anderen Person, etwa bei einem Geschenk, fällt nicht darunter; dort ist autocomplete aber auch nicht schädlich, wenn der Zweck stimmt.

Wem hilft das?

• Menschen mit motorischen Einschränkungen, die wenig tippen können
• Menschen mit kognitiven Einschränkungen oder Gedächtnisproblemen
• Menschen mit Lese-Rechtschreib-Schwäche, die Tippfehler vermeiden möchten

Typische Fehler

• Bestell- und Kontaktformulare ganz ohne autocomplete-Attribute
• Falsche Werte, etwa autocomplete="name" im Feld für die Postleitzahl
• autocomplete="off" bei Name oder E-Mail, das das automatische Ausfüllen abschaltet
• Erfundene Werte wie autocomplete="vorname" statt "given-name"

So prüfen wir das

• axe-core Automatisch: axe-core findet typische Verstöße. Ein Verstoß wird als „nicht erfüllt“ vorausgefüllt.
• Belege Belege: Unser Scanner sammelt Material, zum Beispiel Screenshots, Listen und Messungen.

Prüffrage: Haben Felder für persönliche Daten (Name, E-Mail, Telefon, Adresse) den passenden autocomplete-Wert?

Entschieden wird jedes Kriterium von einem Menschen. Kein Kriterium gilt automatisch als erfüllt.

So beheben Sie es

<label for="vn">Vorname</label>
<input id="vn" name="vn">
<label for="plz">PLZ</label>
<input id="plz" name="plz">

<label for="vn">Vorname</label>
<input id="vn" name="vn" autocomplete="given-name">
<label for="plz">PLZ</label>
<input id="plz" name="plz" autocomplete="postal-code" inputmode="numeric">
<label for="mail">E-Mail</label>
<input id="mail" type="email" name="mail" autocomplete="email">

Der Browser erkennt den Zweck jedes Feldes und kann gespeicherte Angaben korrekt vorschlagen.

Praxistipps

• Für getrennte Liefer- und Rechnungsadressen gibt es Präfixe wie autocomplete="shipping street-address".

Ratgeber und Muster dazu

• Formulare, die jeder ausfüllen kannAm Formular entscheidet sich, ob jemand kauft, bucht oder aufgibt. Hier lesen Sie, wie Beschriftungen, Pflichtfelder und Fehlermeldungen gebaut sein müssen, damit es mit Tastatur, Screenreader und Vergrößerung klappt.

Offizielle Quelle

Understanding WCAG 2.2 beim W3C (Englisch): 1.3.5 Identify Input Purpose