WCAG 2.0, 1.3.1 c, A

Info und Beziehungen: Formulare

  • WCAG: 2.0
  • Stufe: A
  • Thema: Semantik

Formularfelder müssen über korrekt verbundene Beschriftungen (Labels) verfügen; zudem sollen Abschnitte von umfangreicheren Formularen sowie zusammengehörige Radiobuttons und Checkboxen gruppiert werden. Dies ermöglicht assistierenden Technologien (z.B. Screenreadern), die einzelnen Elemente korrekt anzukündigen, damit mit ihnen interagiert werden kann.

Verstehen

Die Beschriftung von Formularfeldern (etwa Textfeldern oder Checkboxen) muss eine korrekt verknüpfte Beschriftung aufweisen, z.B. das <label>-Element: es muss das Formularfeld entweder umspannen oder mittels for-Attribut mit demselben verknüpft werden. Nur ein einzelnes <label> pro Eingabefeld ist erlaubt. Soll zusätzliche Information verknüpft werden (etwa ein Hinweis zum Eingabeformat), so kann das aria-describedby-Attribut verwendet werden. Beschriftungen müssen prägnant sein, siehe dazu auch 3.3.1, 3.3.2 und 3.3.3.

Das placeholder-Attribut hingegen ist mit Bedacht einzusetzen, da es eine Reihe von Problemen aufweist (etwa Verschwinden derselben bei Eingabe, uneinheitliche Interpretation durch assistierende Technologien, sowie problematische Kontrastsituation in Abgrenzung zu eingegebenem Text).

Für die Schaffung von Abschnitten bei umfangreicheren Formularen eignet sich die <fieldset>/<legend>-Kombination; Überschriften alleine sind diesbezüglich nicht geeignet, können aber bei Bedarf in das <legend>-Element gesetzt werden. Dasselbe gilt für die Gruppierung von Checkboxen und Radiobuttons. <fieldset>/<legend>-Kombinationen können verschachtelt werden.

Verantwortlichkeiten

  • Das Entwicklungsteam versieht alle Formularfelder mit korrekten Labels und sinnvollen Gruppierungen. Zusätzliche Informationen (etwa Fehlermeldungen) werden ebenfalls verknüpft.

WCAG-Text

Info und Beziehungen: Informationen, Struktur und Beziehungen, die über die Darstellung vermittelt werden, können durch Software bestimmt werden oder stehen in Textform zur Verfügung.

Code-Beispiel

<!-- Typisches Formular -->
<form action="...">
  <fieldset><!-- Erste Gruppierung -->
    <legend>
      Lieferadresse
    </legend>

    <label for="first_name">
      Vorname:
    </label>
    <input type="text" id="first_name" />

    <label for="last_name">
      Nachname:
    </label>
    <input type="text" id="last_name" />

    <label><!-- Label umspannt Eingabefeld -->
      <input type="checkbox" />
      Ja, ich bin volljährig.
    </label>
  </fieldset>

  <fieldset><!-- Zweite Gruppierung -->
    <legend>
      Rechnungsadresse
    </legend>

    <!-- Weitere Felder -->

  </fieldset>
</form>

<!-- Radiobuttons / Checkboxen -->
<fieldset>
  <legend>
    Geschlecht
  </legend>

  <label>
    <input type="radio" name="female" />
    Weiblich
  </label>

  <label>
    <input type="radio" name="male" />
    Männlich
  </label>

  <label>
    <input type="radio" name="other" />
    Anderes
  </label>
</fieldset>

<!-- Zusätzliche Information verknüpfen -->
<input aria-describedby="password_help" type="password" />
<p id="password_help">
  Das Passwort muss mindestens 8 Zeichen lang sein.
</p>