Addaw, ir a inicio Donar

Fallo común WCAG 2.2

F78Quitar o esconder con CSS el indicador del foco

Nombre oficial en el W3C: Fallo de los criterios de conformidad 1.4.11, 2.4.7 y 2.4.13 debido a aplicar estilos a los contornos y bordes de los elementos de forma que eliminan o hacen invisible el indicador visual del foco

En pocas palabras

Al navegar con el teclado, el navegador marca con un contorno el elemento activo. A ese elemento activo se le llama foco. El fallo consiste en quitar ese contorno con CSS, o en taparlo con bordes parecidos, sin poner en su lugar otro indicador bien visible.

Por qué es importante

Muchas personas no usan ratón. Por ejemplo, personas con problemas de movilidad que usan el teclado o un pulsador. Sin indicador del foco no saben dónde están. Es como escribir sin ver el cursor.

Pulsan Intro sin saber qué enlace van a abrir. En un formulario de cita previa pueden escribir en el campo equivocado o enviarlo sin querer.

Cómo evitarlo

  1. No use outline: none ni outline: 0 sin definir otro estilo de foco.
  2. Si el diseño pide cambiar el contorno del navegador, defina uno propio en :focus-visible. Debe ser grueso (2 o 3 px) y tener un contraste de al menos 3:1 con el fondo.
  3. No ponga bordes ni contornos decorativos que se parezcan al indicador del foco.
  4. Evite que el indicador sea del mismo color que el borde o el fondo del elemento. Si hace falta, sepárelo con outline-offset.
  5. Revise las hojas de estilo del tema, del reset y de los plugins. Ahí suele esconderse la regla que quita el foco.

Ejemplo práctico

Es el fallo más repetido en menús, botones y tarjetas. Una regla outline: none quita el indicador del foco y no se pone otro en su lugar. A menudo viene de una hoja de reset o del tema.

Así no: Menú con outline: none y sin otro indicador

La regla .menu a:focus { outline: none; } quita el contorno del navegador. No hay ningún otro estilo de foco. Al pulsar Tab, el foco avanza por el menú, pero no se ve en qué enlace está.

Captura de pantalla del ejemplo incorrecto: Menú con outline: none y sin otro indicador
Así se ve el ejemplo incorrecto.

La demostración contiene, a propósito, el error de accesibilidad que se explica.

Ver el código del ejemplo incorrecto
<style>
  .menu { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; padding: 0; }
  .menu a { color: #412c56; font-weight: bold; text-decoration: none; padding: 6px 8px; border-radius: 4px; }
  .menu a:hover { text-decoration: underline; }
  .menu a:focus { outline: none; }
</style>
<nav aria-label="Principal">
  <ul class="menu">
    <li><a href="#">Inicio</a></li>
    <li><a href="#">Trámites</a></li>
    <li><a href="#">Cita previa</a></li>
    <li><a href="#">Contacto</a></li>
  </ul>
</nav>

Así sí: Menú con un indicador del foco propio

Se cambia outline: none por un contorno propio en :focus-visible. Mide 3 px, es lila (#744E9A) y tiene un contraste de 6,4:1 con el fondo blanco. outline-offset lo separa del texto. Al usar el teclado, el foco siempre se ve.

Pruébelo aquí:

Ver el código del ejemplo correcto
<style>
  .menu { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; padding: 0; }
  .menu a { color: #412c56; font-weight: bold; text-decoration: none; padding: 6px 8px; border-radius: 4px; }
  .menu a:hover { text-decoration: underline; }
  .menu a:focus-visible { outline: 3px solid #744E9A; outline-offset: 2px; }
</style>
<nav aria-label="Principal">
  <ul class="menu">
    <li><a href="#">Inicio</a></li>
    <li><a href="#">Trámites</a></li>
    <li><a href="#">Cita previa</a></li>
    <li><a href="#">Contacto</a></li>
  </ul>
</nav>

Cómo comprobarlo

Teclado

  1. Pulsar Tab desde el principio de la página y recorrer todos los elementos que reciben el foco.
  2. Comprobar en cada uno que se ve bien cuál tiene el foco. Revisar también los fondos de color, las imágenes y las tarjetas.
  3. Repetir hacia atrás con Mayús+Tab para encontrar elementos en los que el indicador desaparece.

Herramientas del navegador

  1. Abrir las herramientas de desarrollo (F12) y seleccionar el elemento. En el panel Estilos, pulsar el botón :hov y activar el estado :focus-visible.
  2. En la pestaña Calculado (Computed), comprobar que outline-style no es none. Si lo es, debe haber otro cambio visible: borde, fondo o sombra.
  3. Buscar en las hojas de estilo las reglas outline: none u outline: 0. Cada una debe tener una alternativa.

Validación automática

  1. axe DevTools y WAVE no detectan que falte el indicador del foco. No navegan con el teclado ni comparan estados.
  2. Lighthouse solo lo incluye entre las comprobaciones manuales, que no puntúan. Por eso la revisión con teclado es imprescindible.

Errores frecuentes en auditorías

  • Hojas de reset o temas de WordPress con *:focus { outline: none; } o a:focus { outline: 0; }, que afectan a toda la web.
  • Cambiar el contorno por un box-shadow y poner outline: none. En el modo de colores forzados de Windows la sombra desaparece y el foco deja de verse.
  • Un indicador del mismo color que el fondo del botón o de la cabecera. Existe en el código, pero no se distingue.
  • Bordes decorativos en enlaces y tarjetas iguales al contorno del foco. No se sabe qué elemento tiene el foco.
Ver el texto completo del W3C (traducción al español)

Aplicabilidad

Cualquier tecnología

Descripción

Describe una condición de fallo que se produce cuando la indicación visual predeterminada del foco del teclado que ofrece el agente de usuario se desactiva o se vuelve invisible a causa de otros estilos de la página, sin que el autor proporcione un indicador visual del foco propio. Desactivar el indicador del foco indica al agente de usuario que no presente el indicador del foco. Otros estilos pueden dificultar que se vea el indicador del foco aunque esté presente, como contornos que tienen el mismo aspecto que el contorno del foco, o bordes gruesos del mismo color que el indicador del foco, de modo que no puede distinguirse sobre ellos.

Ejemplos

El indicador del foco se desactiva con CSS

El siguiente ejemplo de CSS elimina el indicador del foco predeterminado, lo que incumple el requisito de proporcionar un indicador del foco visible.

:focus {outline: none}

El contorno de los elementos es visualmente similar al indicador del foco

El siguiente ejemplo de CSS crea alrededor de los enlaces un contorno que tiene el mismo aspecto que el indicador del foco. Esto hace imposible que los usuarios determinen cuál de ellos tiene realmente el foco, aunque el agente de usuario sí dibuje el indicador del foco.

a {outline: thin dotted black}

Los elementos tienen un borde que tapa el indicador del foco

El siguiente ejemplo de CSS crea alrededor de los enlaces un borde que no tiene suficiente contraste para que el indicador del foco se vea cuando se dibuja sobre él. En este caso, el indicador del foco se dibuja justo por fuera del borde, pero como ambos son negros y el borde es más grueso que el indicador del foco, este ya no cumple la definición de «visible».

a {border: medium solid black}

Pruebas

Procedimiento

  1. Situar el foco, mediante el teclado, en todos los elementos enfocables de la página.
  2. Comprobar que el indicador del foco es visible.

Resultados esperados

  • La comprobación n.º 2 es verdadera.

Cómo lo comprobamos en ADDAW

Este error es uno de los que buscamos en cada auditoría de ADDAW. Se lo entregamos con capturas y la forma de corregirlo.

Solicitar una auditoría

Basado en la técnica F78 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.