css-focus-indicator-suppressed
El indicador de foco no debe eliminarse sin un reemplazo
Marca los elementos del orden de tabulación cuyo contorno de foco se elimina, mediante una regla :focus/:focus-visible o mediante una regla sin estado como a { outline: none }, sin ningún indicador sustituto (border, box-shadow, background, ...) en ninguna regla de foco que les corresponda.
Ámbito de aplicación. Elementos de la navegación secuencial por foco (tabulables y renderizados) en una página cuyas hojas de estilo accesibles contienen al menos una regla que elimina el contorno. Si no hay ninguna regla así, todos los elementos conservan el indicador propio del agente de usuario y no hay nada que comprobar.
Resultado esperado. Ningún elemento coincide con una regla que elimina el contorno (outline: none, outline: 0, outline-color: transparent, ...) a menos que alguna regla de foco que le corresponda dibuje un sustituto: un borde, box-shadow, fondo, cambio de color, un contorno positivo propio o una decoración ::before/::after. La regla que lo elimina es o bien una regla :focus/:focus-visible, o bien una regla sin ningún estado (a { outline: none }, * { outline: 0 }): una declaración del autor tiene prioridad sobre el contorno de foco del agente de usuario sea cual sea su especificidad, así que también elimina el indicador en el estado con foco (WCAG F78). Una regla que lo elimina solo bajo :not(:focus-visible) lo conserva para el foco de teclado y no se cuenta; tampoco la forma que adopta en el polyfill focus-visible, :not(.focus-visible) bajo .js-focus-visible, o :not([data-focus-visible-added]) bajo [data-js-focus-visible].
Qué informa un hallazgo.
suppressingSelectors: el selector de cada regla de hoja de estilo que elimina el contorno (outline) del elemento, un elemento por selector.
Estos campos de data.details ayudan a leer y reproducir un hallazgo. Salvo reasonCode y los pocos campos que Esquema de salida indica como estables, no son un contrato estable: un campo puede cambiar de nombre o desaparecer en una versión menor, así que no construyas sobre ellos.
Ejemplos
<style>.reset-only:focus { outline: none; }</style><a class="reset-only" href="/pricing">Pricing</a>
:focus { outline: none; } elimina el indicador de foco, y ninguna otra regla que aplique a este enlace dibuja un reemplazo.
<style>a { outline: none; }</style><a href="/news">News</a>
Una regla sin :focus sigue aplicándose mientras el enlace tiene el foco, y tiene prioridad sobre el contorno de foco del propio navegador (F78). Ninguna regla de foco dibuja un sustituto.
<style>.reset-shadow:focus { outline: none; box-shadow: 0 0 0 3px navy; }</style><button class="reset-shadow" type="button">Send</button>
La misma regla que elimina el contorno dibuja un box-shadow en su lugar.
Cómo comprobarlo
Cuando esta regla no puede decidir, informa cantTell y deja la pregunta a una persona. Cada pregunta que puede plantear aparece aquí bajo su código de motivo, con los pasos para responderla. Un hallazgo lleva los mismos pasos en howToCheck, en el idioma del análisis. Consulta Esquema de salida.
FOCUS_INDICATOR_SUPPRESSED
- Hacer clic justo antes del elemento que indica el informe y pulsar Tab hasta que tenga el foco.
- Observar el elemento, y la zona que lo rodea, en busca de cualquier cambio visible cuando recibe el foco.
- Pulsar Tab y Mayús+Tab para quitarle el foco y devolvérselo, comparando ambos estados.
Se cumple. Un indicador visible, como un contorno, un borde, un subrayado o un cambio de color o de fondo, muestra cuándo el elemento tiene el foco.
No se cumple. Nada visible cambia cuando el elemento recibe el foco, lo que incumple WCAG 2.4.7 (F78).