aria-describedby
Der Draht zwischen Feld und Text
Beschreibung ohne Namen, Verweis ins Leere, doppelte ID: drei Fehlerbilder.
Schaltplan der Beschreibung
Eine ID-Liste baut den ganzen Hinweis
Verfolgen Sie den Weg vom Attribut zu Hinweis, Fehler und gesprochener Beschreibung.
Ausgang
Das Passwortfeld
Name bleibt Name: Das label nennt „Passwort“. aria-describedby ergänzt längere Hilfe.
Ziel-ID
pw-hinweis
Mindestens 12 Zeichen.
dauerhafte AnleitungZiel-ID
pw-fehler
Das Passwort ist zu kurz.
Fehler nach PrüfungBeim Fokus hörbar
Vier getrennte Informationskanäle
Zustandswechsel
Hinweis bleibt, Fehler kommt und geht
- 1Vor der Prüfung
aria-describedby="pw-hinweis"Nur die Eingabehilfe gehört zur Beschreibung.
- 2Nach dem Absenden
aria-describedby="pw-hinweis pw-fehler"Fehlertext und
aria-invalid="true"kommen gemeinsam hinzu. - 3Nach der Korrektur
aria-describedby="pw-hinweis"Fehlertext, Referenz und ungültiger Zustand werden zurückgenommen.
Vollständiges Grundgerüst
HTML mit eindeutigen Zielen
<form action="/konto" method="post">
<label for="pw">Passwort</label>
<input id="pw" name="passwort" type="password"
autocomplete="new-password"
aria-describedby="pw-hinweis">
<p id="pw-hinweis">Mindestens 12 Zeichen.</p>
<p id="pw-fehler" hidden></p>
<button type="submit">Konto anlegen</button>
</form> Jede Referenz trifft genau eine id im selben Dokument. Sichtbare Hilfe bleibt auch ohne Vorleseprogramm verständlich.
Nach der Prüfung
JavaScript hält vier Werte synchron
const feld = document.getElementById('pw');
const fehler = document.getElementById('pw-fehler');
function fehlerSetzen(text) {
const ungueltig = Boolean(text);
fehler.textContent = text;
fehler.hidden = !ungueltig;
ungueltig
? feld.setAttribute('aria-invalid', 'true')
: feld.removeAttribute('aria-invalid');
feld.setAttribute('aria-describedby', ungueltig
? 'pw-hinweis pw-fehler'
: 'pw-hinweis');
if (ungueltig) feld.focus();
}Der Fokus auf dem Feld macht Name, Zustand und aktualisierte Beschreibung erreichbar. Prüfen Sie nach dem Absenden, nicht bei jedem Tastendruck.
So prüfen Sie die Verbindung
- DOM: Jede ID aus dem Attribut existiert genau einmal.
- Fokus: Name, Zustand, Hinweis und Fehler werden verständlich.
- Sicht: Hinweise und Fehler stehen lesbar beim betroffenen Feld.
- Korrektur: Fehlerreferenz und
aria-invalidverschwinden.
Aus dem Prüfbericht
Drei Fehlerbilder, drei Befunde
Kritisch Beschrieben, aber nicht benannt Regel label
aria-describedby ersetzt kein label. Das Feld hat einen Hinweis, aber keinen Namen.
Kritisch Der Verweis trifft nichts Regel aria-valid-attr-value
aria-describedby nennt eine id, die es nicht gibt. Der Hinweis wird nie vorgelesen.
Prüfen Zwei Ziele, eine ID Regel duplicate-id-aria
Zwei Hinweise mit derselben id. Nur der erste wird verwendet, meist der falsche.
Zum Mitnehmen
Das Passwortfeld, korrigiert
Ein label für den Namen, aria-describedby für den Hinweis, jede id einmal.
Korrektur in 2 Schritten ansehen
Name und Beschreibung trennen
Das label ist der Name. aria-describedby hängt den Hinweis an. Beides wird nacheinander vorgelesen.
KorrekturvergleichSchritt 1 · HTML Vorher
<input id="passwort" type="password" aria-describedby="pw-hinweis"> <p id="pw-hinweis">Mindestens 12 Zeichen.</p>Nachher
<label for="passwort">Passwort</label> <input id="passwort" type="password" aria-describedby="pw-hinweis"> <p id="pw-hinweis">Mindestens 12 Zeichen.</p>Markierte Zeilen wurden geändert
So prüfen Sie es Tab ins Feld. Ein Vorleseprogramm sagt „Passwort, Eingabefeld. Mindestens 12 Zeichen.“
Verweis und ID abgleichen, IDs eindeutig halten
Der Wert in aria-describedby ist genau die id des Hinweises. Zwei Hinweise brauchen zwei ids.
KorrekturvergleichSchritt 2 · HTML Vorher
<input id="passwort" type="password" aria-describedby="hinweis"> <p id="hinweis">Mindestens 12 Zeichen.</p> <p id="hinweis">Keine Leerzeichen.</p>Nachher
<input id="passwort" type="password" aria-describedby="pw-laenge pw-zeichen"> <p id="pw-laenge">Mindestens 12 Zeichen.</p> <p id="pw-zeichen">Keine Leerzeichen.</p>Markierte Zeilen wurden geändert
So prüfen Sie es Ein Vorleseprogramm liest beide Hinweise nacheinander vor.