aria-describedby

Anwendungsfälle

Für ergänzende Informationen, die neben einem Steuerelement stehen: ein Formathinweis unterhalb eines Datumsfeldes („MM/TT/JJJJ“), eine Liste mit Passwortregeln, eine inline angezeigte Fehlermeldung, die Anweisungen über einem komplexen Widget. Das Label beantwortet Was ist das?; die Beschreibung beantwortet Was muss ich sonst noch wissen?.

Anzuwenden auf Formulareingaben, Schaltflächen, Dialoge und beliebige eigene Widgets, bei denen zusätzlicher Kontext nach dem Namen sinnvoll ist.

Verhalten

Der Wert ist eine leerzeichen-getrennte Liste von Element-IDs, genau wie bei aria-labelledby. Screenreader lesen die Beschreibung nach dem zugänglichen Namen und der Rolle vor, in der Regel nach einer kurzen Pause — „E-Mail, Eingabefeld, Wir kontaktieren Sie nur wegen dieser Bestellung.“ Mehrere IDs werden in der angegebenen Reihenfolge zusammengefügt.

Die Beschreibung ist nicht der Name. Sie erscheint nicht im Namensfeld des Barrierefreiheitsbaums; axe-core zählt sie daher nicht als Beschriftung des Steuerelements. Fehlt ein Name, kann aria-describedby das nicht ausgleichen.

Ändert sich die Beschreibung (z. B. weil ein Fehler auftritt), sollte der Textinhalt des referenzierten Elements aktualisiert werden, anstatt den aria-describedby-Wert auszutauschen — viele assistive Technologien lesen nicht erneut vor, wenn sich das Attribut selbst ändert, reagieren aber auf Änderungen am referenzierten Text, wenn dieser Teil einer Live-Region ist oder der Fokus das Feld erneut betritt.

Typische Fehler

• aria-describedby für das verwenden, was der Name sein sollte. Das Steuerelement hat dann keinen Label; Nutzende hören die Beschreibung, aber nie den Namen.
• Auf eine ID verweisen, die nicht existiert oder durch einen Render-Vorgang aus dem DOM entfernt wurde.
• aria-describedby auf ein nicht fokussierbares Element anwenden. Die meisten Browser geben die Beschreibung nur preis, wenn das Element den Fokus erhält oder direkt abgefragt wird.
• Ausführlichen Marketing-Text als Beschreibung verwenden — weitschweifige Ankündigungen verleiten Nutzende dazu, Beschreibungen global zu deaktivieren.
• Vergessen, inline angezeigte Formularfehler zu verknüpfen. aria-describedby="email-error" zusammen mit aria-invalid="true" ist das kanonische Muster; ohne den Verweis ist der Fehler sichtbar, aber stumm.
• Dieselbe Beschreibungs-ID für viele Felder wiederverwenden mit aria-describedby="hint" — das funktioniert, aber es sollte geprüft werden, ob der Text tatsächlich für jedes Feld gilt.

Beispiel

<label for="password">Password</label>
<input
  id="password"
  type="password"
  aria-describedby="pw-rules pw-error"
  aria-invalid="true"
>
<p id="pw-rules">At least 12 characters, including a number.</p>
<p id="pw-error">Password is too short.</p>