Zum Inhalt springen
44 Barrierefreiheit Dokumentation

1.3.5 - Eingabezweck identifizieren

AA 2.1 Umsetzung

Ziel

Erleichterung des Ausfüllens von Formularen durch programmatische Identifikation der Eingabefelder.

Beschreibung

  • Der Zweck von Eingabefeldern, die personenbezogene Daten erfassen, muss programmatisch identifizierbar sein. Dies gilt nur, wenn:
    • Die Eingabefelder einem in den WCAG definierten Zweck dienen (z. B. Name, E-Mail-Adresse).
    • Die verwendete Technologie eine entsprechende Identifikation unterstützt.
  • Mit Hilfe des autocomplete-Attributs können spezifische Zwecke definiert werden, z. B. autocomplete=“email” für E-Mail-Adressen.

Anforderungen

  • Sicherstellen, dass alle relevanten Eingabefelder durch klare Beschriftungen und unterstützende Symbole ergänzt werden.
  • Icons zur Verdeutlichung des Eingabezwecks bereitstellen.

Code-Beispiele

Beispiel für ein Bestellformular mit separaten Adressen:
<form action="/submit" method="post">
  <fieldset>
    <legend>Rechnungsadresse</legend>
    <label for="billing-street">Straße:</label>
    <input type="text" id="billing-street" name="billing-street" autocomplete="billing street-address">


    <label for="billing-zip">Postleitzahl:</label>
    <input type="text" id="billing-zip" name="billing-zip" autocomplete="billing postal-code">
  </fieldset>


  <fieldset>
    <legend>Lieferadresse</legend>
    <label for="shipping-street">Straße:</label>
    <input type="text" id="shipping-street" name="shipping-street" autocomplete="shipping street-address">


    <label for="shipping-zip">Postleitzahl:</label>
    <input type="text" id="shipping-zip" name="shipping-zip" autocomplete="shipping postal-code">
  </fieldset>
</form>