Deutsch
Website-Menü

aria-hidden-focus

Mit ARIA ausgeblendete Elemente dürfen nicht fokussierbar sein

automaticWCAG 4.1.2 (A)Konfidenz: highSchweregrad: seriousrobust

Prüft, dass Elemente mit aria-hidden="true" nicht fokussierbar sind und keine fokussierbaren Nachfahren enthalten.

Anwendbarkeit. Gilt für Elemente mit aria-hidden="true", wobei der Wert ohne Berücksichtigung der Groß-/Kleinschreibung und ohne umgebende Leerzeichen gelesen wird (aria-hidden="TRUE" blendet Inhalte auch in Browsern aus).

Erwartung. Kein Element mit aria-hidden="true" darf selbst fokussierbar sein, und innerhalb eines aria-hidden="true"-Teilbaums darf kein fokussierbares Element existieren.

Was ein Befund meldet.

  • metrics.focusableTotal: wie viele fokussierbare Elemente das ausgeblendete Element enthält, es selbst mitgezählt, wenn es fokussierbar ist.
  • metrics.focusableDescendants: wie viele davon in ihm liegen.
  • metrics.rootIsFocusable: ob das ausgeblendete Element selbst den Fokus erhalten kann.
  • offenders: bis zu 5 der fokussierbaren Elemente. Jeder Eintrag nennt sein tag, seinen tabindex, sein href (bei einem Link), seinen type (bei einem input) und seine visibilityHints. metrics.offendersCaptured gibt an, wie viele aufgeführt sind.
  • metrics.visibilityHints: wie die fokussierbaren Elemente unsichtbar gemacht werden, während sie weiterhin den Fokus erhalten: opacityZero, offscreen, clipped, zeroSizeOverflowHidden. Ein solches Element ist ein Fokus-Stopp, den sehende Personen, die mit der Tastatur navigieren, nicht sehen können.
  • metrics.modalOpen: ob anderswo auf der Seite ein modaler Dialog geöffnet war, wodurch der Befund zu einem zu prüfenden wird.
  • runtimeProbe: null, außer wenn das Fokussieren des einzigen fokussierbaren Elements den Fokus direkt aus dem ausgeblendeten Element hinausbewegt hat. Dann enthält es redirected: true, Tag und id des Elements, zu dem der Fokus gewechselt ist (redirectedToTag, redirectedToId), und focusTrace, die Elemente, die der Fokus durchlaufen hat. Ein ausgeblendetes Fokus-Sentinel, das den Fokus so weitergibt, wird zur Prüfung gemeldet.

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">
  <p>Decorative text</p>
</div>

Nichts im ausgeblendeten Teilbaum ist fokussierbar, daher entsteht beim Ausblenden für assistive Technologien kein toter Fokus-Stopp.

fail
<div aria-hidden="true">
  <a href="/x">Link</a>
</div>

Der Link bleibt in der Tab-Reihenfolge, obwohl aria-hidden ihn aus dem Accessibility Tree entfernt.

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.

ariaHiddenFocusable_modalOpen_needsReview

  1. Suchen Sie das im Bericht genannte Element hinter dem auf der Seite geöffneten modalen Dialog und notieren Sie, was darin den Fokus erhalten kann.
  2. Drücken Sie bei geöffnetem Dialog mehrmals Tab, dann Umschalttaste+Tab, und beobachten Sie, wohin der Fokus geht.
  3. Prüfen Sie document.activeElement in der Konsole der Entwicklertools, sobald der Fokus den Dialog zu verlassen scheint.

Bestanden. Der Fokus bleibt im geöffneten Dialog und erreicht nie die verborgenen Inhalte dahinter.

Nicht bestanden. Der Fokus erreicht Inhalte hinter dem Dialog innerhalb von aria-hidden="true", wo ein Screenreader nichts ansagt; das verstößt gegen WCAG 4.1.2.

ariaHiddenFocusable_runtimeRedirect_needsReview

  1. Klicken Sie direkt vor das im Bericht genannte Element und drücken Sie dann Tab, bis der Fokus es erreichen sollte.
  2. Beobachten Sie, wo der Fokus landet, und prüfen Sie document.activeElement in der Konsole der Entwicklertools.
  3. Drücken Sie vom nachfolgenden Bedienelement aus Umschalttaste+Tab und sehen Sie, ob der Fokus auf dem verborgenen Element stehen bleibt oder direkt weitergeht.

Bestanden. Der Fokus bleibt nie auf dem verborgenen Element, sondern geht direkt zu einem sichtbaren Bedienelement weiter, wie es das Wächterelement einer Fokusfalle tut.

Nicht bestanden. Der Fokus kann auf dem Element innerhalb von aria-hidden="true" bleiben, wo ein Screenreader nichts ansagt; das verstößt gegen WCAG 4.1.2.

Verwandte Regeln

Quellcode ansehen