css-focus-indicator-suppressed

El indicador de foco no debe eliminarse sin un reemplazo

manualWCAG 2.4.7 (AA)confianza: mediumgravedad: seriousoperable

Señala elementos en el orden de tabulación cuyo outline de foco se elimina mediante una regla :focus/:focus-visible sin un indicador de reemplazo (border, box-shadow, background, ...) en ninguna otra regla de foco que les aplique.

Ámbito de aplicación. Elementos en la navegación secuencial por foco (tabulables y renderizados) en una página cuyas hojas de estilo accesibles contienen al menos una regla `:focus` o `:focus-visible`. Si no hay ninguna regla de foco en ningún lugar, todos los elementos conservan el indicador propio del user agent y no hay nada que comprobar.

Resultado esperado. Ningún elemento coincide con una regla `:focus`/`:focus-visible` que elimine el outline (`outline: none`, `outline: 0`, `outline-color: transparent`, ...) a menos que otra regla de foco que le aplique dibuje un reemplazo: un border, box-shadow, background, un cambio de color, un outline positivo propio, o una decoración `::before`/`::after`.

Ejemplos

can't tell
<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.

n/a
<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 outline dibuja un `box-shadow` en su lugar.

Ver código fuente