aria-valid-attr-value

Werte von aria-*-Attributen müssen ihrem deklarierten Typ entsprechen

automaticWCAG 4.1.2 (A)Konfidenz: highSchweregrad: seriousrobust

Prüft, dass jedes bekannte aria-*-Attribut einen Wert hat, der seinem in WAI-ARIA deklarierten Werttyp entspricht (Boolean, Tristate, Token, Integer, Zahl oder ID-Referenz).

Anwendbarkeit. Gilt für jedes Element mit mindestens einem bekannten aria-*-Attribut (unbekannte Attributnamen sind Sache von aria-valid-attr und werden hier nicht ausgewertet).

Erwartung. Der Wert jedes Attributs entspricht dem von WAI-ARIA deklarierten Werttyp: boolean ("true"/"false"), tristate ("true"/"false"/"mixed"), ein Token aus einer festen Aufzählung, eine Ganzzahl (innerhalb des Bereichs, den WAI-ARIA dafür festlegt), eine reelle Zahl oder eine ID-Referenz (bzw. -Liste), die zu einem existierenden Element im Dokument aufgelöst wird. Boolean-, Tristate- und Token-Werte werden ohne Berücksichtigung der Groß-/Kleinschreibung gelesen, so wie Chromium sie liest (aria-checked="TRUE" gilt als checked). Gemäß der Anwendbarkeit von ACT 6a7281 selbst („jeder Zustand oder jede Eigenschaft, die NICHT leer ist“) liegt ein explizit leerer Wert, einschließlich eines booleschen Attributs ganz ohne „=Wert“, z. B. aria-checked allein, für jeden Werttyp außerhalb des Geltungsbereichs und ist kein Verstoß: ein häufiges, bewusstes Muster in Template-Markup (z. B. React, das aria-describedby={hasError ? errorId : ''} bedingt rendert). Manche Attribute schränken sich auch gegenseitig ein; das wird geprüft, sobald jedes für sich gültig ist:

Auf einem Element mit der Rolle slider, scrollbar, progressbar, meter, separator oder spinbutton: aria-valuemin größer als aria-valuemax ergibt fail (ARIA_VALUE_RANGE_INVERTED), ebenso ein aria-valuenow außerhalb des Bereichs (ARIA_VALUENOW_OUT_OF_RANGE), da der Browser assistiven Technologien dann stattdessen das nächstgelegene Ende des Bereichs übergibt (Chromium sagt für 50 bei 0 bis 10 den Wert 10 an). Der Bereich ist der angegebene; sonst der eigene eines nativen Elements (ein <progress>, <meter>, ein range- oder number-Input, über min und max), wie HTML-AAM ihn abbildet; sonst die ARIA-Standardwerte 0 und 100, außer bei einem spinbutton, der keine hat. Mit aria-valuetext, das anstelle der Zahl angesagt wird, wird der Wert nicht verglichen.
aria-posinset größer als aria-setsize ergibt fail (ARIA_POSINSET_EXCEEDS_SETSIZE); eine Setgröße von -1 (unbekannt) bleibt unberücksichtigt.
aria-haspopup, dessen Popup, ein von aria-controls genanntes Element (oder eines darin), eine andere Rolle hat: cantTell (ARIA_HASPOPUP_ROLE_MISMATCH), da ein Skript ein anderes Popup anzeigen kann. true bedeutet menu. Verglichen wird nur, wenn ein genanntes Element eine Rolle hat.
aria-activedescendant, das ein Element nennt, das weder im Element liegt noch in einem, das es in aria-owns oder aria-controls nennt: cantTell (ARIA_ACTIVEDESCENDANT_OUTSIDE). Eine combobox bleibt außen vor, da ihre Optionen in dem Popup liegen, das sie steuert.

Was ein Befund meldet.

attr: das Attribut, dessen Wert nicht gültig ist.
value: sein Wert, wie geschrieben.
valueReason: was daran falsch ist. Bei einem fail: expected-true-false, expected-true-false-undefined, expected-true-false-mixed, expected-integer, expected-number oder invalid-token, wenn er nicht dem Typ des Attributs entspricht, integer-out-of-range, wenn er unter dem niedrigsten Wert liegt, den ARIA erlaubt, expected-single-idref, wenn ein Attribut, das eine einzige id aufnimmt, mehrere enthält, idref-not-found, wenn die id von aria-activedescendant zu keinem Element passt. Bei einem cantTell: idref-list-none-found, wenn keine der ids in einer Liste zu einem Element passt, idref-controls-not-found für dasselbe bei aria-controls.
Bei den Einschränkungen zwischen Attributen die verglichenen Werte: role, valuenow, valuemin, valuemax (der verwendete Bereich, Standardwerte eingeschlossen); posinset, setsize; haspopup, expectedRole, popupRole; activedescendant.

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

<div aria-hidden="true"></div>

„true“ ist ein gültiger Wert für das Boolean-typisierte aria-hidden.

fail

<div aria-hidden="yes"></div>

aria-hidden ist Boolean-typisiert; „yes“ ist kein gültiges Boolean-Token.

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_ACTIVEDESCENDANT_OUTSIDE`

Untersuchen Sie das im Bericht genannte Element und notieren Sie die id in seinem aria-activedescendant und wo sich dieses Element befindet.
Fokussieren Sie das Element und bewegen Sie das aktive Element mit den Pfeiltasten.
Achten Sie bei laufendem Screenreader darauf, ob jedes aktive Element beim Bewegen angesagt wird.
Prüfen Sie, ob das referenzierte Element in das Element verschoben oder mit aria-owns oder aria-controls daran gebunden werden könnte.

Bestanden. Jedes aktive Element wird angesagt, während die Pfeiltasten durch die Einträge bewegen.

Nicht bestanden. Der Screenreader sagt nichts oder das falsche Element an, wenn sich das aktive ändert, sodass Tastaturnutzende nicht folgen können; das verstößt gegen WCAG 4.1.2.

`ARIA_ATTR_VALUE_TARGET_ABSENT`

Untersuchen Sie das im Bericht genannte Element und notieren Sie das Attribut und die ids, auf die es verweist.
Nutzen Sie die Seite wie Nutzende es tun würden (öffnen, aufklappen, absenden), um den Zustand zu erreichen, in dem das referenzierte Element existieren sollte.
Führen Sie in der Konsole der Entwicklertools für jede id document.getElementById('the-id') aus und suchen Sie im Markup nach einer fast passenden id (andere Groß-/Kleinschreibung, Tippfehler oder in einem anderen Shadow Root).
Öffnen Sie den Bereich „Barrierefreiheit“ in den Entwicklertools des Browsers und prüfen Sie, ob der Name, die Beschreibung oder die Beziehung erscheint, die das Attribut liefern soll.
Erscheint sie nicht, prüfen Sie im Bereich Barrierefreiheit, ob das Element diesen Namen oder diese Beschreibung auf anderem Weg erhält, zum Beispiel aus seinem eigenen Text, einem <label> oder einem aria-label.

Bestanden. Das referenzierte Element existiert, wenn es darauf ankommt, und Name, Beschreibung oder Beziehung erscheinen im Barrierefreiheitsbaum, oder das Element erhält denselben Namen oder dieselbe Beschreibung auf anderem Weg.

Nicht bestanden. Die id wird nie aufgelöst (fehlt, ist falsch geschrieben oder liegt jenseits einer Shadow-Grenze), und nichts anderes liefert Beschriftung, Beschreibung oder Beziehung, sie geht also verloren; das verstößt gegen WCAG 4.1.2 (ACT 6a7281).

`ARIA_HASPOPUP_ROLE_MISMATCH`

Untersuchen Sie das im Bericht genannte Element und notieren Sie seinen aria-haspopup-Wert (menu, listbox, tree, grid, dialog; true bedeutet menu).
Öffnen Sie das Popup mit der Maus und mit der Tastatur (Eingabetaste, Leertaste oder Pfeil nach unten).
Untersuchen Sie das erscheinende Popup und prüfen Sie seine Rolle im Bereich „Barrierefreiheit“ in den Entwicklertools des Browsers.
Vergleichen Sie die Rolle des Popups mit dem Typ, den aria-haspopup ankündigt.

Bestanden. Das sich öffnende Popup hat die Rolle, die aria-haspopup ankündigt.

Nicht bestanden. Das sich öffnende Popup hat eine andere Rolle als angekündigt (etwa ein Dialog, der als Menü angekündigt wird), was Screenreader-Nutzende in die Irre führt; das verstößt gegen WCAG 4.1.2.

Quellcode ansehen