Zustand Widget-Zustand

`aria-invalid`

Zeigt an, dass ein Formularelement die Validierung nicht bestanden hat. In Kombination mit aria-describedby, das auf die lesbare Fehlermeldung zeigt, gibt der Screenreader sowohl den ungültigen Zustand als auch den Grund dafür bekannt.

Wann zu verwenden

Bei einem Eingabefeld, einer Textarea, einer Combobox, einer Listbox oder einem anderen Formular-Widget, dessen aktueller Wert die Validierung nicht bestanden hat. aria-invalid="true" sollte erst gesetzt werden, nachdem die Nutzenden die Möglichkeit hatten, einen Wert einzugeben — in der Regel beim Verlassen des Feldes (Blur) oder beim Absenden des Formulars. Das Setzen beim ersten Rendern, bevor etwas eingegeben wurde, ist störend und meldet leere Pflichtfelder als ungültig, bevor die Person überhaupt etwas getan hat.

Das Attribut sollte mit der eigentlichen Fehlermeldung kombiniert werden. Das Muster lautet:

Eine sichtbare Fehlermeldung mit eigener id rendern.
aria-invalid="true" auf dem Eingabefeld setzen.
aria-describedby auf die id der Fehlermeldung zeigen lassen.

Screenreader geben dann sowohl den ungültigen Zustand als auch die Erklärung bekannt: „E-Mail, Bearbeitungsfeld, ungültige Eingabe, bitte geben Sie eine gültige E-Mail-Adresse ein.“

Synchronisierung

Gültige Werte sind "true", "false", "grammar" und "spelling". In der Praxis werden hauptsächlich "true" und "false" verwendet. "grammar" und "spelling" werden von Rich-Text-Editoren genutzt, um einen bestimmten Abschnitt zu markieren; die meisten Formular-Workflows benötigen sie nicht.

Standardmäßig sollte "false" verwendet werden (oder das Attribut wird weggelassen). Schlägt die Validierung fehl, wird "true" gesetzt und die Fehlermeldung angezeigt. Wenn die Nutzenden das Feld korrigieren, müssen beide gleichzeitig zurückgesetzt werden — aria-invalid auf "false" setzen und die Fehlermeldung entfernen oder ausblenden.

Das HTML-Attribut required und die CSS-Pseudoklasse :invalid arbeiten unabhängig davon. aria-invalid ist das Signal, das Screenreader auslesen; die anderen sind für Browser und Darstellung zuständig. Alle sollten synchron gehalten werden.

Häufige Fehler

aria-invalid="true" setzen, bevor die Nutzenden die Möglichkeit hatten, mit dem Feld zu interagieren.
Ein Feld als ungültig markieren, ohne aria-describedby und ohne sichtbare Fehlermeldung — der Screenreader meldet „ungültig“ ohne jede Erklärung.
aria-invalid="true" stehen lassen, nachdem der Wert korrigiert wurde.
aria-describedby auf einen leeren Container zeigen lassen, sodass die Fehlerankündigung lautlos bleibt.
aria-invalid auf <fieldset> oder anderen Nicht-Eingabe-Containern verwenden — dort hat es keine Bedeutung.
Sich allein auf die Farbe verlassen, um den Fehlerzustand anzuzeigen — aria-invalid hilft Screenreadern; für sehende Nutzende ist trotzdem eine sichtbare Beschriftung oder ein Symbol erforderlich (WCAG 1.4.1).

Beispiel

<label for="email">E-Mail-Adresse</label>
<input
  id="email"
  type="email"
  aria-invalid="true"
  aria-describedby="email-error"
  required
>
<p id="email-error">Bitte geben Sie eine gültige E-Mail-Adresse ein.</p>