Praxisleitfaden Eingabezweck im Formular

Autocomplete-Werte richtig setzen

Ungültige Eingabezwecke erkennen, passend korrigieren und am selben Feld nachprüfen.

autocomplete-validWCAG 1.3.5

Sehen Sie, was sich durch die Korrektur ändert.

Beispiel im Prüfbericht
Markierter Befund · Kritisch · WCAG 1.3.5Namensfeld mit ungültigem Eingabezweck

Befund verstehen

Das Namensfeld nennt keinen gültigen Eingabezweck

Schematische Einordnung des Befunds
Erkannter Befund

Scanner-Signal

autocomplete-valid meldet autocomplete="berghuette" am Feld „Name der beobachtenden Person“.

Technische Einordnung

Regel
autocomplete-valid
Referenz
WCAG 1.3.5

Die Wetterstation besitzt ein benanntes Eingabefeld. Sein autocomplete-Attribut enthält jedoch einen selbst erfundenen Wert. Die sichtbare Darstellung verrät diesen Fehler nicht; er steht im HTML.

Bedeutung im Nutzungskontext

Standardisierte Eingabezwecke helfen Browsern und assistiven Werkzeugen, persönliche Angaben zuzuordnen. Ein unbekannter Wert liefert diese Zuordnung nicht. Das kann das wiederholte Eingeben für Menschen mit Gedächtnis- oder motorischen Einschränkungen erschweren.

Diagnose am Namensfeld
Zugänglicher Name: Name der beobachtenden Person
autocomplete: berghuette
Axe: the autocomplete attribute is incorrectly formatted

Eingabezwecke gezielt durchsehen

Planen Sie die fachliche Prüfung der Formulare zusätzlich zum Attributtest. Entscheidend ist, welche persönlichen Angaben die Felder tatsächlich erheben.

Rechenbeispiel · Eingabezwecke in Formularen

Ihre Annahmen für die manuelle Prüfung

Ganze Zahl von 1 bis 10.000.

Ganze Zahl von 1 bis 120.

8 Seiten × 6 Minuten pro Seite48 Minuten48 Min. manuelle Prüfzeit unter diesen Annahmen.
  • Annahme: eine Formularseite je geprüfter Seite.
  • Annahme: sechs Minuten je Seite für Feldzwecke und angebotene Vervollständigung.
  • Korrektur, weitere Formularzustände und vollständige Bedienprüfung sind nicht eingerechnet.

Das ist keine gemessene Prüfzeit und kein Vergleich mit der Scanner-Geschwindigkeit. Inhaltliche Beurteilungen bleiben manuelle Arbeit.

Welche Angabe soll die Person hier machen?

Bestimmen Sie den erwarteten Inhalt, bevor Sie einen Wert auswählen.

Umsetzungen im Vergleich
FallWann trifft er zu?Passende Umsetzung
Eigener vollständiger NameDie beobachtende Person trägt wie in diesem Beispiel ihren eigenen Namen ein. autocomplete="name" kennzeichnet den vollständigen Personennamen.
Vor- und Nachname getrenntIhr Formular erhebt beide Namensteile in getrennten Feldern. Verwenden Sie given-name und family-name am jeweils passenden Feld.
Messwert oder StationskennungDas Feld sammelt fachliche Daten statt Angaben über die ausfüllende Person. Erfinden Sie keinen Autocomplete-Wert. Prüfen Sie, ob ein standardisierter Zweck überhaupt zutrifft; WCAG 1.3.5 verlangt ihn nicht für beliebige Fachdaten.

Fundstelle ansehen

Das betroffene Feld in der Wetterstation

Der vollständige Abschnitt enthält Überschrift, Importhinweis, Eingaben und Stationsnotiz. Markiert ist das leere Feld links in der zweiten Zeile.

Der BefundNamensfeld mit ungültigem Eingabezweck

Das Feld heißt für assistive Technik „Name der beobachtenden Person“. Im Bild fehlt eine sichtbare Beschriftung; die hier geprüfte Korrektur betrifft ausschließlich seinen ungültigen Autocomplete-Wert. Benachbarte Mängel bleiben eigene Aufgaben.

Beispiel im Prüfbericht Markierter Befund
Markierter Befund · Kritisch · WCAG 1.3.5Namensfeld mit ungültigem Eingabezweck

Attribut korrigieren

Den erfundenen Wert durch name ersetzen

Am vorhandenen Namensfeld ändert sich nur autocomplete. Der zugängliche Name bleibt erhalten. Da diese Metadaten keine sichtbare Gestaltung erzeugen, sehen beide Zustände gleich aus.

  1. Fundstelle zuordnen

    Ordnen Sie den Vorher-Code dem betroffenen Element Ihrer Website zu.

  2. Änderung umsetzen

    Im Formular-Editor Suchen Sie nach „Autocomplete“, „Autofill“ oder „Eingabezweck“. Wählen Sie den vollständigen Namen und kontrollieren Sie nach Veröffentlichung das tatsächlich gerenderte input-Element.

    KorrekturvergleichHTML am betroffenen Feld

    Vorher

    <input
      aria-label="Name der beobachtenden Person"
      autocomplete="berghuette">

    Nachher

    <input
      aria-label="Name der beobachtenden Person"
      autocomplete="name">

    Markierte Zeilen wurden geändert

  3. Änderung nachprüfen

    Prüfen Sie die geänderte Seite erneut mit dem Scanner und kontrollieren Sie das Element im Nutzungskontext.

In der Anwendung umsetzen

Die Felddefinition an der Quelle berichtigen

Übertragen Sie die Korrektur in das Template oder Formularmodell.

  1. 1

    Suchen Sie den bisherigen Wert berghuette in der Feldkonfiguration und ersetzen Sie ihn dort.

  2. 2

    Prüfen Sie, ob dieselbe Feldkomponente auch andere Eingabezwecke rendert; setzen Sie name nicht pauschal für jede Instanz.

  3. 3

    Belassen Sie die Beschriftung am Feld. Ein Autocomplete-Wert ersetzt keinen verständlichen Feldnamen.

  4. 4

    Kontrollieren Sie dynamisch nachgeladene Formularschritte nach dem Öffnen; maßgeblich ist ihr gerendertes HTML.

Fehlkorrekturen vermeiden

Gültig geschrieben reicht nicht immer aus

Den Feldtitel als Wert übernehmen

autocomplete="Name der beobachtenden Person" wäre ebenfalls kein zulässiger Zweck. Der standardisierte Wert lautet name, unabhängig von der Sprache des Formulars.

Nur die Fehlermeldung beseitigen

Das Attribut zu entfernen oder auf off zu setzen liefert am eigenen Namensfeld keine Kennzeichnung des erwarteten Namens.

Einen beliebigen gültigen Wert einsetzen

email wäre am Namensfeld inhaltlich falsch. Der Wert muss zu den tatsächlich erwarteten Angaben passen.

Die Beschriftung übersehen

Das Beispiel hat einen zugänglichen Namen, aber keinen sichtbaren Feldtitel. Ergänzen Sie in einer produktiven Überarbeitung auch eine verständliche sichtbare Beschriftung und prüfen Sie diese gesondert.

Dasselbe Feld besteht den erneuten Regeltest

Der Re-Test findet am unveränderten Ziel ein gültiges autocomplete="name". Axe führt dieses Feld nun als bestanden; die Bildschirmdarstellung ist pixelgleich.

Im Beispiel dokumentiert

Gelöst

autocomplete="berghuette" wurde durch autocomplete="name" ersetzt. Die sichtbare Darstellung bleibt identisch.

Was Sie zusätzlich beurteilen müssen

Dieser Nachweis gilt für autocomplete-valid an einem Feld. Er bestätigt weder die übrigen Felder noch die vollständige Erfüllung von WCAG 1.3.5.

Was der Scan erkennt und was Sie beurteilen

Prüfauftrag für Ihre Umsetzung

  • Den veröffentlichten Formularzustand öffnen und autocomplete="name" am Namensfeld kontrollieren.
  • autocomplete-valid erneut ausführen und die Fundstelle mit dem ursprünglichen Feld abgleichen.
  • Mit einem geeigneten Testprofil prüfen, ob eine angebotene automatische Vervollständigung den erwarteten Namen einträgt.
Beispiel im Prüfbericht Gelöst
GelöstGültiger Eingabezweck am NamensfeldAxe bestätigt einen gültig formatierten Autocomplete-Wert am selben Eingabefeld.
Re-Test am Namensfeld
autocomplete: name
Axe: the autocomplete attribute is correctly formatted
Ergebnis am Ziel: bestanden
Sichtbare Änderung: keine

Prüfgrenzen kennen

Was der Scan erkennt und was Sie beurteilen

Der Regeltest prüft technische Werte; der tatsächliche Formularzweck braucht Kontext.

Automatisch prüfbar

  • Den ungültigen Wert berghuette an dieser Fundstelle erkennen.
  • Das betroffene Eingabefeld mit seinem HTML zuordnen.
  • Die korrigierte Schreibweise beim erneuten Lauf überprüfen.

Im Kontext zu entscheiden

  • Feststellen, ob das Feld eigene Personendaten oder Angaben über Dritte erfasst.
  • Den gewählten Zweck mit der realen Aufgabe des Formulars vergleichen.
  • Sichtbare Beschriftung und Bedienbarkeit im gesamten Nutzerweg prüfen.
  • Browserangebote mit passenden Testdaten erproben; ihre Verfügbarkeit hängt auch vom Browserprofil ab.

Werbung

Kostenloser Website-Barrierefreiheits-Check

Website auf Barrierefreiheit prüfen.

Technische WCAG-Warnsignale erkennen. Kritische Stellen zuerst prüfen.

Der Website-Check ist bereit.

Werbung

Ein letzter Schritt

Prüfen, bevor Sie gehen.

Finden Sie automatisch erkennbare Barrieren auf Ihrer eigenen Website.

Website prüfen

Kostenlos starten · keine Installation

Automatisches Screening. Tastaturbedienung und Screenreader bleiben manuelle Prüfung.