Ungültiger autocomplete-Wert (autocomplete-valid)

Die Regel autocomplete-valid meldet Formularfelder, deren autocomplete-Attribut einen Wert enthält, den der HTML-Standard nicht kennt – firstname statt given-name, phone statt tel oder nope, um das automatische Ausfüllen abzuschalten. Browser und assistive Technik ignorieren unbekannte Werte. Die Lösung ist der richtige Wert aus der Autofill-Liste von HTML.

Was die Regel bedeutet

WCAG 1.3.5 verlangt, dass ein Feld, das Angaben zur Person abfragt – Name, E-Mail, Telefon, Adresse, Geburtsdatum –, maschinenlesbar sagt, wofür es da ist. Im Web geschieht das über das Attribut autocomplete mit einem der Zwecke, die WCAG auflistet; sie stammen aus den Autofill-Feldnamen von HTML. Dann kann der Browser das Feld ausfüllen, und Hilfsprogramme können ein vertrautes Symbol oder eine vertraute Bezeichnung daneben zeigen.

Die Regel liest jedes <input>, <select> und <textarea> mit einem nicht leeren autocomplete-Attribut. Deaktivierte und schreibgeschützte Felder, versteckte Felder und Buttons überspringt sie. Ein Wert besteht, wenn er ist:

• on oder off,
• ein einzelner Zweck, etwa given-name, email, postal-code oder one-time-code,
• davor optional section-…, dann shipping oder billing, dann – nur vor tel, email oder impp – home, work, mobile, fax oder pager, in dieser Reihenfolge.

Außerdem duldet axe einige nicht standardisierte Werte, mit denen Websites das Ausfüllen abschalten, etwa none oder false. Einige Werte, die nicht im Standard stehen – text, gender, pronouns, message, content –, entscheidet axe nicht; sie gehen zur Prüfung an einen Menschen.

Was die Regel nicht sieht: ob ein gültiger Wert auch der richtige ist. autocomplete="email" am Feld „Name“ besteht. Ebenso ein Feld zur Person ganz ohne autocomplete. Beides beurteilt ein Mensch – deshalb steht im Kasten oben „teilweise“.

Wen es betrifft

Menschen mit kognitiven Einschränkungen oder Gedächtnisproblemen, für die das erneute Eintippen einer Adresse eine echte Hürde ist, die das automatische Ausfüllen beseitigt. Menschen mit motorischen Einschränkungen, für die jeder Tastendruck Kraft kostet. Menschen, die Hilfsprogramme nutzen, die erkannte Felder mit vertrauten Symbolen versehen. Und alle, die einen Checkout am Smartphone ausfüllen.

Warum die Prüfung anschlägt

• Erfundene Werte, die plausibel klingen: firstname, lastname, phone, zip, mobile, birthday.
• Zufallswerte gegen das Ausfüllen – autocomplete="nope" oder "new-field" –, kopiert aus Forenantworten.
• Falsche Reihenfolge, etwa billing section-1 postal-code, oder zwei Zwecke in einem Wert, etwa name email.
• Ein Zusatz am falschen Wert – work name oder mobile postal-code; home, work und mobile gehören nur vor tel, email oder impp.
• Formularbaukästen und Shop-Plugins, die den internen Feldnamen in autocomplete schreiben.

So beheben Sie es

1. Schlagen Sie für jedes Feld zur Person den Zweck in der Autofill-Liste von HTML nach ^[4] und verwenden Sie genau diesen Wert.
2. Kombinieren Sie nur in der erlaubten Reihenfolge: section-…, dann shipping/billing, dann home/work/mobile, dann der Zweck.
3. Um das Ausfüllen bei einem Feld abzuschalten, das nicht die Person betrifft – ein Gutscheincode, ein Suchfeld –, nutzen Sie off, keinen erfundenen Wert.

<!-- Vorher: keiner dieser Werte existiert -->
<label for="vorname">Vorname</label>
<input id="vorname" name="vorname" autocomplete="firstname">
<label for="telefon">Mobilnummer</label>
<input id="telefon" type="tel" name="telefon" autocomplete="mobile phone">
<label for="email">E-Mail</label>
<input id="email" type="email" name="email" autocomplete="nope">

<!-- Nachher: gültige Werte in erlaubter Reihenfolge -->
<label for="vorname">Vorname</label>
<input id="vorname" name="vorname" autocomplete="given-name">
<label for="telefon">Mobilnummer</label>
<input id="telefon" type="tel" name="telefon" autocomplete="mobile tel">
<label for="email">E-Mail</label>
<input id="email" type="email" name="email" autocomplete="email">
<label for="liefer-plz">Postleitzahl</label>
<input id="liefer-plz" name="liefer-plz" autocomplete="shipping postal-code">

So prüfen Sie es von Hand

1. Listen Sie die Felder auf, die Angaben zur ausfüllenden Person abfragen – Name, Kontaktdaten, Adresse, Geburtsdatum, Benutzername.
2. Prüfen Sie in den Entwicklertools, ob jedes davon einen autocomplete-Wert hat und ob der Wert zu dem passt, was das Feld abfragt.
3. Füllen Sie das Formular mit der im Browser gespeicherten Adresse aus. Leere oder falsch befüllte Felder deuten auf einen fehlenden oder falschen Wert.
4. Achten Sie auf geteilte Felder wie Vor- und Nachname oder Tag, Monat und Jahr: Jedes braucht einen eigenen Wert (given-name, family-name, bday-day …).

Zugehöriges WCAG-Kriterium

1.3.5 Eingabezweck bestimmen, Stufe AA. Verwandt: 3.3.7 Redundante Eingabe, das verlangt, dass niemand dieselben Angaben in einem Vorgang zweimal eintippen muss, und 3.3.2 Beschriftungen oder Anweisungen – autocomplete hilft der Software; lesen können Menschen nur die sichtbare Beschriftung.

So meldet Reviseberg diese Regel

Reviseberg führt autocomplete-valid auf jeder gecrawlten Seite bei 1280 px aus. In der Befundliste sehen Sie die Regel mit Schweregrad, WCAG-Kriterium und Stufe, der Zahl der betroffenen Felder und Seiten und den Punkten, die ein Fix zurückbringt. Im Detail stehen der CSS-Selektor, der HTML-Ausschnitt mit dem ungültigen Wert und alle betroffenen Seiten. Ein Checkout- oder Newsletter-Formular ist meist eine einzige Komponente – ein Fix behebt es überall.

Werte, die axe nicht entscheidet, landen in der Warteschlange „Mögliche Probleme“. Dort prüft ein Mensch; Reviseberg zählt sie nicht als bestanden. Befunde können Sie mit Begründung als „ignorieren“, „nicht behebbar“ oder „Fehlalarm“ markieren; jede Entscheidung wird protokolliert. Ein Ergebnis ohne Befund markiert 1.3.5 nie als bestanden: Ob jedes Feld zur Person den richtigen Wert hat, prüft ein Mensch.

Verwandte Regeln

• undefined – dieselben Felder ohne sichtbare, verbundene Beschriftung.
• undefined – eine Länder- oder Anredeliste ohne Namen.
• undefined – eigene Felder mit ARIA-Rollen ohne Namen.

Formulare auf Ihrer Website prüfen – kostenloser Scan