Deutsch
Website-Menü

aria-required-attr

Rollen müssen ihre erforderlichen ARIA-Zustände und -Eigenschaften tragen

automaticWCAG 4.1.2 (A)Konfidenz: highSchweregrad: seriousrobust

Prüft, dass Elemente mit expliziter Rolle jeden eindeutigen, kontextunabhängigen erforderlichen aria-*-Zustand bzw. jede solche Eigenschaft für diese Rolle tragen (z. B. muss role="checkbox" aria-checked haben).

Anwendbarkeit. Gilt für Elemente mit einer expliziten, gültigen, nicht abstrakten Rolle, die zugleich zu der kleinen Menge von Rollen mit einem dokumentierten, kontextunabhängigen erforderlichen Zustand bzw. einer solchen Eigenschaft gehört (checkbox, combobox, heading, menuitemcheckbox, menuitemradio, meter, radio, scrollbar, separator, slider, switch) – außer wenn diese explizite Rolle mit der nativen/impliziten Rolle des Elements identisch ist (ACT 4e8ab6: z. B. <input type="checkbox" role="checkbox">, das ausgenommen ist, weil die Zustandsbereitstellung des nativen Steuerelements das bereits abdeckt; aria-checked ist nicht erforderlich. helpers.aria.getNativeRoleForElement löst das auf). Ein natives <input type="checkbox"> oder <input type="radio"> mit einer anderen ankreuzbaren Rolle (switch, menuitemcheckbox, menuitemradio oder checkbox auf einem Radio und umgekehrt) liegt im Geltungsbereich, aber sein aria-checked gilt als vorhanden: Der Browser stellt den eigenen checked-Zustand des Inputs bereit (HTML-AAM), daher besteht es auch ohne das Attribut.

Erwartung. Jeder erforderliche Zustand bzw. jede erforderliche Eigenschaft für diese Rolle ist vorhanden und nicht leer. Abgestuft danach, ob ARIA einen Ersatz für das fehlende Attribut vorsieht:

  • FAIL, wenn nicht, sodass der Zustand schlicht nicht bereitgestellt wird (aria-checked auf checkbox/radio/switch/menuitemcheckbox/menuitemradio, aria-valuenow auf slider/scrollbar/meter und auf einem fokussierbaren separator).
  • CANTTELL, wenn ARIA einen impliziten Wert definiert, auf den die Rolle zurückfällt (aria-expanded auf combobox, aria-level auf heading), sodass die Rolle weiterhin einen Wert bereitstellt und nur der Autor weiß, ob es der richtige ist.

Was ein Befund meldet.

  • attr: das erforderliche Attribut, das fehlt oder leer ist.
  • role: die Rolle des Elements.
  • implicitValue (der cantTell-Fall): der Wert, auf den ARIA zurückfällt, false für aria-expanded bei einer Combobox, 2 für aria-level bei einer Überschrift.

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 role="checkbox" aria-checked="true"></div>

role="checkbox" erfordert aria-checked, und es ist vorhanden.

fail
<div role="checkbox"></div>

role="checkbox" erfordert aria-checked; es fehlt vollständig.

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_ATTR_REQUIRED_MISSING_IMPLICIT

  1. Untersuchen Sie das im Bericht genannte Element und notieren Sie seine Rolle und das fehlende Attribut (etwa aria-expanded bei einer Combobox, aria-level bei einer Überschrift).
  2. Öffnen und schließen Sie bei einer Combobox ihr Popup mit der Tastatur (Alt+Pfeil nach unten, Esc) und mit der Maus und prüfen Sie, ob aria-expanded hinzugefügt und aktualisiert wird.
  3. Vergleichen Sie bei einer Überschrift ihre Stelle in der Gliederung der Seite mit Ebene 2, dem Standardwert, den sie erhält, und prüfen Sie, ob eine andere Ebene gemeint ist.
  4. Navigieren Sie mit einem Screenreader zum Element und achten Sie darauf, welcher Zustand oder welche Ebene angesagt wird.

Bestanden. Der Standardwert entspricht der Wirklichkeit: Die Combobox meldet „reduziert“ nur, wenn ihr Popup geschlossen ist, oder die Überschrift ist tatsächlich Ebene 2.

Nicht bestanden. Der angesagte Wert ist falsch, etwa eine Combobox, die als reduziert angesagt wird, während ihre Liste offen ist, oder eine Überschrift der Ebene 2, die eine andere Ebene haben sollte; das verstößt gegen WCAG 4.1.2 (oder 1.3.1 bei Überschriften).

state_internals

  1. Untersuchen Sie das im Bericht genannte benutzerdefinierte Element und notieren Sie seine Rolle und den fehlenden Zustand (etwa checked oder value).
  2. Öffnen Sie den Bereich „Barrierefreiheit“ in den Entwicklertools des Browsers und prüfen Sie, ob dieser Zustand für das Element angezeigt wird.
  3. Bedienen Sie das Element (klicken Sie darauf, drücken Sie die Leertaste oder die Pfeiltasten) und prüfen Sie, ob sich der im Bereich angezeigte Zustand ändert.
  4. Navigieren Sie mit einem Screenreader zum Element und achten Sie auf den Zustand.

Bestanden. Der Zustand wird bereitgestellt und aktualisiert sich bei der Bedienung des Elements, gesetzt über seine Internals.

Nicht bestanden. Der erforderliche Zustand fehlt im Barrierefreiheitsbaum oder ändert sich nicht, wenn das Element bedient wird; das verstößt gegen WCAG 4.1.2.

Verwandte Regeln

Quellcode ansehen