css-hidden-focus

Fokussierbare Elemente dürfen nicht visuell ausgeblendet sein

manualWCAG 2.4.7 (AA)Konfidenz: lowSchweregrad: seriousoperable

Prüft, dass per Tastatur fokussierbare Elemente nicht durch CSS-Techniken visuell ausgeblendet sind, die sie in der Tab-Reihenfolge belassen können.

Anwendbarkeit. Gilt für Elemente, die per Tab erreichbar (per Tastatur fokussierbar) sind, aber durch CSS-Techniken visuell ausgeblendet werden, die sie in der Tab-Reihenfolge belassen können.

Erwartung. Kein Element sollte per Tab erreichbar sein, während es visuell ausgeblendet ist (z. B. opacity:0, abgeschnitten, außerhalb des sichtbaren Bereichs). Ein Element, das CSS beim Fokussieren wieder sichtbar macht, ist im fokussierten Zustand nicht ausgeblendet und wird nicht gemeldet: das übliche Skip-Link-Muster (.skip { position: absolute; left: -9999px } .skip:focus { left: 0 }) oder eine Ausblenderegel, die beim Fokus nicht mehr greift (.visually-hidden-focusable:not(:focus) { clip: rect(0 0 0 0) }). Eine in eine andere verschachtelte Fokusregel (.skip { &:focus { top: 0 } }) zählt wie ausgeschrieben; eine, deren Fokus in :has() steht, zählt für ihr Subjekt wie :focus-within. Eine Fokusregel ohne !important setzt eine !important-Deklaration, die das Element ausblendet, nicht außer Kraft.

Was ein Befund meldet.

metrics.visibilityHints: wie das Element ausgeblendet ist, während es den Fokus erhalten kann: opacityZero, offscreen, clipped oder zeroSizeOverflowHidden (ohne Größe, mit overflow hidden) durch seine eigenen Styles; wenn diese es zeigen, outOfReach (ein Container ist außerhalb des Bildschirms positioniert, oder, im Browser, die Box, die der Fokus zeigen würde, liegt dort, wohin kein Scrollen reicht) oder containerClipped (ein Container ist auf nichts abgeschnitten, hat keine Größe bei overflow hidden oder ist auf nichts skaliert, oder, im Browser, das Element liegt vollständig außerhalb eines Containers mit overflow: clip, den der Fokus nicht scrollt).
runtimeProbe: null, außer wenn das Fokussieren des Elements den Fokus direkt zu einem anderen Element bewegt hat (cssHiddenTabbable_runtimeRedirect_needsReview). Dann enthält es redirected: true sowie Tag und id des Elements, zu dem der Fokus gewechselt ist (redirectedToTag, redirectedToId). Nur die ersten drei ausgeblendeten Elemente werden auf diese Weise ausprobiert.

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

can't tell

<a href="/x" style="opacity:0;">Hidden but tabbable link</a>

Der Link bleibt in der Tab-Reihenfolge, obwohl opacity:0 ihn für sehende Personen, die mit der Tastatur navigieren, unsichtbar macht.

n/a

<a href="/x">Visible link</a>

Der Link ist sowohl fokussierbar als auch sichtbar – nichts zu melden.

n/a

<style>.skip { position: absolute; left: -9999px; } .skip:focus { left: 0; }</style>
<a class="skip" href="#main">Skip to content</a>

Der Link liegt im Ruhezustand außerhalb des sichtbaren Bereichs, aber seine :focus-Regel holt ihn beim Fokussieren wieder ins Bild.

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.

`cssHiddenTabbable_needsFocusStateVerification`

Klicken Sie direkt vor das im Bericht genannte Element und drücken Sie dann Tab, bis der Fokus es erreichen sollte.
Prüfen Sie document.activeElement in der Konsole der Entwicklertools, um sicherzugehen, dass der Fokus darauf liegt.
Suchen Sie das Element und seinen Fokusindikator auf dem Bildschirm.

Bestanden. Das Element wird sichtbar und zeigt einen sichtbaren Fokusindikator, solange es den Fokus hat.

Nicht bestanden. Der Fokus landet auf dem Element, während es verborgen bleibt, sodass Tastaturnutzende nicht sehen, wo der Fokus ist; das verstößt gegen WCAG 2.4.7.

`cssHiddenTabbable_runtimeRedirect_needsReview`

Klicken Sie direkt vor das im Bericht genannte Element und drücken Sie dann Tab, bis der Fokus es erreichen sollte.
Beobachten Sie, wo der Fokus landet, und prüfen Sie document.activeElement in der Konsole der Entwicklertools.
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 verborgenen Element bleiben, sodass Tastaturnutzende nicht sehen, wo der Fokus ist; das verstößt gegen WCAG 2.4.7.

Quellcode ansehen