Fehlererkennung

Fehlermeldungen bei Formulareingaben müssen mit den entsprechenden Eingabefeldern verknüpft sein. Dies ermöglicht assistierenden Technologien (z.B. Screenreadern) die Ausgabe von Fehlermeldungen (unabhängig von der visuellen Ebene), so dass auch visuell beeinträchtigte Menschen die Fehler wahrnehmen können.

Verstehen

Wenn Eingabefehler beim Ausfüllen eines Formulars vom System erkannt werden, so müssen die entsprechenden Fehlermeldungen für alle Nutzenden erfahrbar und das zugehörige Eingabefeld identifizierbar sein. Für farbliche Hervorhebung gelten die gebräuchlichen Anforderungen an Kontraste, siehe 1.4.3, bzw. an Farbverwendung siehe 1.4.1.

Räumliche Gruppierung reicht für visuell beeinträchtigte Menschen mit Screenreader nicht aus. Die einfachste Lösung besteht darin, die Fehlermeldungen direkt ins <label>-Element zu setzen. Alternativ kann sie mittels aria-describedby mit dem jeweiligen Eingabefeld (oder einem umspannenden <fieldset>-Element) verknüpft werden. Die Fehlermeldung wird dann automatisch vom Screenreader (zusätzlich zum <label>-Element) ausgegeben, sobald das Eingabefeld fokussiert wird. Zur Handhabung von Formularen generell siehe auch 1.3.1c.

Zudem müssen Screenreader darüber informiert werden, dass überhaupt Fehlermeldungen angezeigt werden. Setzen Sie dazu den Fokus nach Abschicken des Formulars direkt ins erste fehlerhafte (und gemäss obiger Beschreibung umgesetzte) Feld. Zusätzlich können Sie einen entsprechenden Hinweis im <title>-Element (Seitentitel) platzieren, siehe 2.4.2.

Verantwortlichkeiten

• Das Designteam definiert ein gut wahrnehmbares visuelles Design für Eingabefehler.
• Das Entwicklungsteam setzt die vom Designteam definierten Vorgaben korrekt um.

WCAG-Text

Wenn ein Eingabefehler automatisch erkannt wird, dann wird das fehlerhafte Element identifiziert und der Fehler wird dem Benutzer in Textform beschrieben.

Code-Beispiel

<!-- Beschreibung innerhalb des Labels -->
<label>
  Biography
  <textarea id="biography" type="text"></textarea>
  <p class="error">Bitte erzählen Sie uns etwas über Ihre Biographie!</p>
</label>

<!-- Beschreibung eines Eingabefelds mittels aria-describedby -->
<label for="name">Name</label>
<input id="name" type="text" aria-describedby="name_description">
<p id="name_description" class="error">Bitte geben Sie Ihren Namen ein!</p>

<!-- Beschreibung einer Gruppe von Radiobuttons mittels aria-describedby -->
<fieldset aria-describedby="gender_description">
  <legend>Geschlecht</legend>

  <input type="radio" id="gender_male" value="male"><label for="gender_male">Männlich</label>
  <input type="radio" id="gender_female" value="female"><label for="gender_female">Weiblich</label>
  <input type="radio" id="gender_other"><label for="gender_other">Anderes</label>

  <p id="gender_description" class="error">Bitte nennen Sie uns Ihr Geschlecht!</p>
</fieldset>