G165Usar el indicador de foco propio del navegador y del sistema

Por qué es importante

Quien navega con el teclado necesita saber en todo momento dónde está: en qué enlace, botón o campo. Sin indicador de foco se pierde por completo.

Muchas personas con baja visión agrandan el indicador o le dan un color llamativo en la configuración del sistema. Si la web usa el indicador normal, esos ajustes se respetan. Si lo sustituye por un efecto propio, por ejemplo cambiando el color de fondo con JavaScript, los ajustes se pierden. Además, los magnificadores (programas que amplían la pantalla) y otros productos de apoyo no sabrán dónde está el foco.

Cómo se hace

1. Use elementos que reciben el foco de forma natural: enlaces, botones y campos de formulario.
2. Si un elemento personalizado debe recibir el foco, añada tabindex="0" para que use el indicador normal.
3. No quite el contorno con outline: none ni outline: 0 en la hoja de estilos.
4. No simule el foco cambiando colores con JavaScript mientras el foco real está en otro sitio.
5. Si el diseño exige un indicador propio, siga las técnicas que piden que sea bien visible, como C40 o C45.

Cómo comprobarlo

1. Busque en la hoja de estilos reglas como outline: none o outline: 0 aplicadas a :focus.
2. Si su sistema lo permite, cambie en las opciones de accesibilidad el color o el grosor del indicador de foco.
3. Recorra la página con la tecla Tab.
4. Compruebe que en cada enlace, botón y campo se ve el indicador de foco, con los ajustes que ha elegido.

Ejemplo

Basta con no anular el contorno de foco. Esta regla, muy habitual, es la que hay que evitar:

/* Incorrecto: elimina el indicador de foco */
a:focus, button:focus {
  outline: none;
}

/* Correcto: no escribir ninguna regla que lo quite.
   El navegador mostrará su indicador normal. */