invalid-field-error-message

Als ungültig markierte Felder sollten eine angezeigte Fehlermeldung haben

automaticWCAG 3.3.1 (A)Konfidenz: highSchweregrad: seriousunderstandable

Prüft, dass ein Element mit aria-invalid eine Fehlermeldung in Textform hat: Sein aria-errormessage sollte ein angezeigtes Element mit Text nennen, und zu einem Feld ohne verknüpfte Meldung wird nachgefragt.

Anwendbarkeit. Elemente, die die Seite anzeigt, die im Accessibility Tree und nicht deaktiviert sind und deren aria-invalid angibt, dass sie ungültig sind: true oder ein Wert, den ARIA als true liest (alles außer false, grammar, spelling oder leer). grammar und spelling markieren Text, keinen Wert, den Nutzende eingegeben haben.

Erwartung. Der Fehler wird erkannt und den Nutzenden in Textform beschrieben (WCAG 3.3.1).

aria-errormessage nennt ein Element, das angezeigt wird und Text hat: pass.
aria-errormessage nennt nur Elemente, die ausgeblendet sind (ERROR_MESSAGE_HIDDEN): cantTell mit Tendenz zu fail. ARIA verlangt, dass die Meldung angezeigt wird, solange das Feld ungültig ist, und die Seite gibt an, dass sie es nicht ist; aber wie bei einer leeren Meldung kann der Fehler trotzdem im Label oder neben dem Feld genannt werden, was 3.3.1 erfüllt.
aria-errormessage nennt nur angezeigte Elemente ohne Text (ERROR_MESSAGE_EMPTY): cantTell. ARIA stellt kein MUST für den Text der Meldung auf, und der Fehler kann im Label oder neben dem Feld genannt werden, was 3.3.1 erfüllt. Wenn das aria-describedby des Felds eine Beschreibung liefert, kann der Fehler dort stehen: cantTell (ERROR_MESSAGE_NOT_SHOWN_DESCRIBED).
aria-errormessage nennt kein Element der Seite: cantTell (ERROR_MESSAGE_TARGET_MISSING); ein Skript kann es hinzufügen.
Kein aria-errormessage, und aria-describedby liefert eine Beschreibung: pass.
Keines von beiden: cantTell (NO_ERROR_MESSAGE). Der Fehler kann im Label oder in Text neben dem Feld stehen, den das Markup nicht mit ihm verknüpft; prüfen Sie, ob den Nutzenden in Textform mitgeteilt wird, welches Feld fehlerhaft ist und was falsch ist.
aria-errormessage nennt eine Meldung, die selbst aria-hidden ist oder in einem aria-hidden-Element liegt: cantTell mit Tendenz zu fail (ERROR_MESSAGE_HIDDEN, mit hiddenBy: 'aria-hidden'). ARIA zählt ein solches Element als ausgeblendet und verlangt, dass eine zutreffende Fehlermeldung es nicht ist.
aria-errormessage nennt eine angezeigte Meldung, deren gesamter Text in aria-hidden-Elementen liegt, während die Meldung selbst es nicht ist: cantTell (ERROR_MESSAGE_ARIA_HIDDEN). Wer sie sieht, erfährt es; Screenreader-Nutzende möglicherweise nicht.

Ein Element gilt als ausgeblendet, wenn niemand es sieht: display: none, visibility: hidden, hidden, ein geschlossenes <details> oder content-visibility: hidden auf ihm oder einem Vorfahren; eine mit visibility: hidden ausgeblendete Meldung, deren Text mit visibility: visible zurückgeholt wird, gilt als angezeigt. Text ist, was die Berechnung des zugänglichen Namens liest: Das alt eines Bilds zählt, in der Meldung ausgeblendeter Text nicht. Die Meldung kann per id genannt oder per Skript als Element gesetzt werden (ariaErrorMessageElements).

Was ein Befund meldet.

ariaInvalid: der Wert des Attributs.
hiddenBy (ERROR_MESSAGE_HIDDEN): aria-hidden, wenn nur aria-hidden die Meldung ausblendet; fehlt, wenn niemand sie sieht.
errorMessageIds: die ids, die aria-errormessage nennt, oder [], wenn es keine gibt.

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

<label for="email">Email</label>
<input id="email" aria-invalid="true" aria-errormessage="email-error">
<p id="email-error">Enter an email address, like name@example.com.</p>

Das Feld ist als ungültig markiert, und die Meldung, die aria-errormessage nennt, wird angezeigt und sagt, was falsch ist.

can't tell

<label for="email">Email</label>
<input id="email" aria-invalid="true" aria-errormessage="email-error">
<p id="email-error" hidden>Enter an email address, like name@example.com.</p>

Das Feld ist als ungültig markiert, aber seine Fehlermeldung ist ausgeblendet. Es tendiert zu fail: Die mit dem Feld verknüpfte Meldung ist weder zu sehen noch zu hören, auch wenn der Fehler trotzdem im Label oder neben dem Feld genannt werden kann.

can't tell

<label for="age">Age</label>
<input id="age" aria-invalid="true">
<p>Age must be a number.</p>

Mit dem Feld ist keine Meldung verknüpft. Der Text daneben kann den Fehler beschreiben; eine Person prüft, ob den Nutzenden in Textform mitgeteilt wird, welches Feld fehlerhaft ist und warum.

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.

`ERROR_MESSAGE_ARIA_HIDDEN`

Suchen Sie das im Bericht genannte Feld und bestätigen Sie, dass seine Fehlermeldung auf dem Bildschirm sichtbar ist.
Untersuchen Sie das Meldungselement, auf das aria-errormessage verweist, und notieren Sie, welche seiner Kinder aria-hidden="true" tragen.
Fokussieren Sie das Feld bei laufendem Screenreader oder lesen Sie seine Fehlermeldung und Beschreibung im Bereich „Barrierefreiheit“.
Notieren Sie, ob die Worte des Fehlers auf irgendeinem Weg den Screenreader erreichen.

Bestanden. Screenreader-Nutzende erhalten denselben Fehlertext, der auf dem Bildschirm steht, zum Beispiel über die Beschreibung oder die Beschriftung des Feldes.

Nicht bestanden. Der Fehler ist sichtbar, aber vor assistiven Technologien verborgen, sodass Screenreader-Nutzende nicht erfahren, was falsch ist; das verstößt gegen WCAG 3.3.1.

`ERROR_MESSAGE_EMPTY`

Suchen Sie das im Bericht genannte Feld und lösen Sie seinen Fehlerzustand aus (Formular absenden oder einen ungültigen Wert eingeben), falls er nicht bereits angezeigt wird.
Untersuchen Sie das Feld und suchen Sie das Element, auf das sein aria-errormessage-Attribut verweist; bestätigen Sie, dass es leer ist.
Suchen Sie in der Beschriftung des Feldes und im Text daneben nach Wörtern, die sagen, welches Feld fehlerhaft ist und was falsch ist.
Fokussieren Sie das Feld bei laufendem Screenreader oder prüfen Sie Name und Beschreibung im Bereich „Barrierefreiheit“ und notieren Sie, ob der Fehler vermittelt wird.

Bestanden. Text auf der Seite, etwa die Beschriftung oder eine Meldung neben dem Feld, sagt, welches Feld fehlerhaft ist und was falsch ist.

Nicht bestanden. Kein Text teilt Nutzenden mit, welches Feld fehlerhaft ist oder was falsch ist; das verstößt gegen WCAG 3.3.1.

`ERROR_MESSAGE_HIDDEN`

Machen Sie das Feld so ungültig, wie es Nutzende tun würden (Formular leer absenden oder einen falschen Wert eingeben).
Suchen Sie die Fehlermeldung, auf die das Feld verweist (sein aria-errormessage), und prüfen Sie, ob sie auf dem Bildschirm erscheint.
Erscheint sie nicht, suchen Sie nach Text, der sagt, was falsch ist: in der Beschriftung, neben dem Feld oder in einer Zusammenfassung oben im Formular.
Navigieren Sie mit einem Screenreader zum Feld und achten Sie auf den Fehler.

Bestanden. Der Fehler wird als Text angezeigt und angesagt, an einer mit dem Feld verknüpften Stelle, auch wenn es nicht die Meldung ist, die aria-errormessage nennt.

Nicht bestanden. Kein Text sagt, welches Feld falsch ist und warum, oder Screenreader-Nutzende erfahren es nicht; das verstößt gegen WCAG 3.3.1.

`ERROR_MESSAGE_NOT_SHOWN_DESCRIBED`

Suchen Sie das im Bericht genannte Feld und lösen Sie seinen Fehlerzustand aus, falls er nicht bereits angezeigt wird.
Öffnen Sie den Bereich „Barrierefreiheit“ für das Feld und lesen Sie seine Beschreibung (aus aria-describedby).
Vergleichen Sie diese Beschreibung mit dem Fehler: Entscheiden Sie, ob sie sagt, was falsch ist, oder nur ein Hinweistext wie ein Eingabeformat ist.
Prüfen Sie, ob derselbe Fehlertext auf dem Bildschirm in der Nähe des Feldes sichtbar ist.

Bestanden. Die Beschreibung des Feldes oder anderer sichtbarer Text benennt den Fehler in Worten, sodass sowohl sehende als auch Screenreader-Nutzende erfahren, was falsch ist.

Nicht bestanden. Die Beschreibung ist nur ein Hinweistext und kein sichtbarer Text beschreibt den Fehler; das verstößt gegen WCAG 3.3.1.

`ERROR_MESSAGE_TARGET_MISSING`

Suchen Sie das im Bericht genannte Feld und notieren Sie die id in seinem aria-errormessage-Attribut.
Lösen Sie den Fehler aus (Formular absenden oder einen ungültigen Wert eingeben) und suchen Sie im Bereich „Elemente“ nach einem Element mit dieser id.
Erscheint das Element, prüfen Sie, ob es angezeigt wird und Text enthält, der den Fehler beschreibt.
Erscheint es nie, suchen Sie in der Nähe des Feldes oder in seiner Beschriftung nach anderem sichtbarem Text, der sagt, was falsch ist.

Bestanden. Sobald das Feld fehlerhaft ist, beschreibt eine angezeigte Meldung mit dieser id oder anderer sichtbarer Text den Fehler.

Nicht bestanden. Das Feld ist als ungültig markiert, aber kein Text beschreibt den Fehler; das verstößt gegen WCAG 3.3.1.

`NO_ERROR_MESSAGE`

Suchen Sie das im Bericht genannte Feld; es ist mit aria-invalid markiert.
Prüfen Sie, ob das Feld jetzt tatsächlich fehlerhaft ist; ist es als ungültig markiert, bevor Nutzende etwas eingegeben haben, geben Sie einen gültigen Wert ein und prüfen Sie, ob die Markierung verschwindet.
Suchen Sie in der Beschriftung des Feldes, im Text daneben und in einer etwaigen Fehlerzusammenfassung auf der Seite nach Wörtern, die dieses Feld nennen und sagen, was falsch ist.
Fokussieren Sie das Feld bei laufendem Screenreader und notieren Sie, ob der Fehler angesagt wird.

Bestanden. Sichtbarer Text identifiziert das fehlerhafte Feld und beschreibt, was falsch ist, oder das Feld ist gar nicht fehlerhaft.

Nicht bestanden. Das Feld ist fehlerhaft, aber kein Text identifiziert es und beschreibt das Problem; das verstößt gegen WCAG 3.3.1.

Quellcode ansehen