css-focus-indicator-suppressed
Fokusindikator darf nicht ohne Ersatz entfernt werden
Meldet Elemente in der Tab-Reihenfolge, deren Fokus-Outline entfernt wird, durch eine :focus/:focus-visible-Regel oder durch eine Regel ohne Zustand wie a { outline: none }, ohne Ersatzindikator (border, box-shadow, background, ...) in einer auf sie zutreffenden Fokusregel.
Anwendbarkeit. Elemente in der sequenziellen Fokusnavigation (per Tab erreichbar und gerendert) auf einer Seite, deren lesbare Stylesheets mindestens eine Regel enthalten, die die Outline entfernt. Gibt es nirgends eine solche Regel, behält jedes Element den eigenen Indikator des User Agents, und es gibt nichts zu prüfen.
Erwartung. Kein Element ist von einer Regel betroffen, die die Outline entfernt (outline: none, outline: 0, outline-color: transparent, ...), es sei denn, eine auf es zutreffende Fokusregel zeichnet einen Ersatz: einen Rahmen, box-shadow, Hintergrund, Farbwechsel, eine eigene positive Outline oder eine ::before/::after-Dekoration. Die entfernende Regel ist entweder eine :focus/:focus-visible-Regel oder eine Regel ganz ohne Zustand (a { outline: none }, * { outline: 0 }): Eine Autorendeklaration hat unabhängig von ihrer Spezifität Vorrang vor der Fokus-Outline des User Agents und entfernt den Indikator daher auch im fokussierten Zustand (WCAG F78). Eine Regel, die sie nur unter :not(:focus-visible) entfernt, behält sie für den Tastaturfokus bei und wird nicht gezählt; ebenso wenig die Form, die das focus-visible-Polyfill dafür verwendet, :not(.focus-visible) unter .js-focus-visible oder :not([data-focus-visible-added]) unter [data-js-focus-visible].
Was ein Befund meldet.
suppressingSelectors: der Selektor jeder Stylesheet-Regel, die die outline des Elements entfernt, ein Eintrag pro Selektor.
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
<style>.reset-only:focus { outline: none; }</style><a class="reset-only" href="/pricing">Pricing</a>
:focus { outline: none; } entfernt den Fokusindikator, und keine andere für diesen Link passende Regel zeichnet einen Ersatz.
<style>a { outline: none; }</style><a href="/news">News</a>
Eine Regel ohne :focus gilt auch, während der Link den Fokus hat, und hat Vorrang vor der Fokus-Outline des Browsers (F78). Keine Fokusregel zeichnet einen Ersatz.
<style>.reset-shadow:focus { outline: none; box-shadow: 0 0 0 3px navy; }</style><button class="reset-shadow" type="button">Send</button>
Dieselbe Regel, die die Outline entfernt, zeichnet stattdessen einen box-shadow.
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.
FOCUS_INDICATOR_SUPPRESSED
- Klicken Sie direkt vor das im Bericht genannte Element und drücken Sie dann Tab, bis es den Fokus hat.
- Achten Sie am Element und in seiner Umgebung auf jede sichtbare Änderung, wenn es den Fokus erhält.
- Drücken Sie Tab und Umschalttaste+Tab, um den Fokus weg- und zurückzubewegen, und vergleichen Sie beide Zustände.
Bestanden. Ein sichtbarer Indikator, etwa ein Umriss, ein Rahmen, eine Unterstreichung, eine Farb- oder Hintergrundänderung, zeigt an, wenn das Element den Fokus hat.
Nicht bestanden. Nichts Sichtbares ändert sich, wenn das Element den Fokus erhält; das verstößt gegen WCAG 2.4.7 (F78).