aria-conditional-attr

aria-errormessage setzt aria-invalid mit einem Wert ungleich false voraus

automaticWCAG 4.1.2 (A)Konfidenz: highSchweregrad: moderaterobust

Prüft, dass Elemente mit aria-errormessage auch aria-invalid mit „true“, „grammar“ oder „spelling“ haben; andernfalls fällt die Fehlermeldung aus dem Accessibility Tree heraus.

Anwendbarkeit. Elemente mit einem nicht leeren aria-errormessage-Attribut.

Erwartung. Laut ARIA-Spezifikation wird aria-errormessage assistiven Technologien nur bereitgestellt, wenn aria-invalid mit einem anderen Wert als "false" vorhanden ist (also "true", "grammar" oder "spelling"). Bei einem Element mit aria-errormessage, aber fehlendem oder auf "false" gesetztem aria-invalid fällt die Fehlermeldung stillschweigend aus dem Accessibility Tree heraus, obwohl Autoren fast immer wollen, dass sie bereitgestellt wird. Wird als CANTTELL statt FAIL gemeldet: aria-errormessage wird erst bereitgestellt, wenn aria-invalid gesetzt ist, der Verweis ist also derzeit wirkungslos. Ob das Nutzenden schadet, hängt davon ab, ob die Meldung auf anderem Weg vermittelt wird (sichtbarer Text neben dem Feld, aria-describedby), was sich am statischen Markup nicht klären lässt.

Was ein Befund meldet.

  • ariaInvalid: der aria-invalid-Wert des Elements, in Kleinbuchstaben; eine leere Zeichenkette, wenn das Attribut fehlt.

Diese Felder in data.details helfen, einen Befund zu lesen und zu reproduzieren. Außer reasonCode und den wenigen Feldern, die Ausgabeschema als stabil nennt, sind sie kein stabiler Vertrag: Ein Feld kann in einer Minor-Version umbenannt werden oder wegfallen, bauen Sie also nicht darauf auf.

Beispiele

pass
<input type="text" aria-invalid="true" aria-errormessage="err1">
<span id="err1">Enter a valid email address.</span>

Durch aria-invalid="true" wird aria-errormessage assistiven Technologien tatsächlich bereitgestellt.

can't tell
<input type="text" aria-errormessage="err1">
<span id="err1">Enter a valid email address.</span>

Ohne aria-invalid mit einem Wert ungleich "false" wird aria-errormessage nie bereitgestellt – der Verweis ist derzeit wirkungslos.

So prüfen Sie es

Wenn diese Regel nicht entscheiden kann, meldet sie cantTell und überlässt die Frage einer Person. Jede Frage, die sie stellen kann, steht hier unter ihrem Reason-Code, mit den Schritten, um sie zu beantworten. Ein Befund enthält dieselben Schritte in howToCheck, in der Sprache des Scans. Siehe Ausgabeschema.

ARIA_ERRORMESSAGE_WITHOUT_TRUTHY_INVALID

  1. Untersuchen Sie das im Bericht genannte Feld und notieren Sie die id in seinem aria-errormessage.
  2. Geben Sie einen ungültigen Wert ein (oder lassen Sie ein Pflichtfeld leer) und senden Sie ab oder verlassen Sie das Feld, damit ein etwaiger Fehler erscheint.
  3. Prüfen Sie, ob das Element mit dieser id jetzt Fehlertext zeigt, und untersuchen Sie das Feld erneut auf aria-invalid="true".
  4. Navigieren Sie mit einem Screenreader zurück zum Feld und achten Sie auf die Fehlermeldung.
  5. Hören Sie den Fehler am Feld nicht, prüfen Sie, ob die Seite ihn auf anderem Weg vorliest, zum Beispiel sobald die Meldung erscheint, ohne dass Sie den Fokus bewegen. Das zählt nur, wenn der Screenreader die ganze Meldung ansagt.

Bestanden. Wird der Fehler angezeigt, sagt der Screenreader ihn an, entweder am Feld (aria-invalid="true" oder die Meldung in aria-describedby) oder sobald er erscheint; ohne angezeigten Fehler muss nichts bereitgestellt werden.

Nicht bestanden. Der Fehlertext ist sichtbar, aber aria-invalid fehlt oder bleibt false, und der Screenreader sagt die Meldung weder am Feld noch beim Erscheinen an; das verstößt gegen WCAG 3.3.1 / 4.1.2 (siehe ARIA21).

Quellcode ansehen