Foco

El foco es el estado de ser el receptor activo de la entrada de teclado. Solo un elemento de la página puede tener el foco en cada momento, y el indicador visual de ese estado —el anillo de foco— es la única señal más importante para los usuarios de teclado, de dispositivos de acceso alternativo y de lectores de pantalla.

Por qué importa el foco

Una parte significativa de los usuarios navega por la web sin ratón:

• Usuarios exclusivamente de teclado con discapacidades motoras que dificultan o imposibilitan el uso del puntero.
• Usuarios de dispositivos de acceso alternativo que exploran las interfaces mediante un solo botón o dispositivos de sip-and-puff.
• Usuarios de lectores de pantalla, que recorren la interfaz mediante el teclado incluso en pantallas táctiles.
• Usuarios de control por voz («Pulsar el botón Enviar») cuyos programas resuelven los comandos identificando los elementos enfocables.

Para todos ellos, el foco es el cursor. La posición del foco, su destino siguiente y su apariencia determinan si la página puede usarse o no.

Las reglas de foco en WCAG

WCAG 2.x y 2.2 incluyen varios criterios relacionados con el foco:

• 2.1.1 Teclado (A) — toda la funcionalidad debe poder operarse desde el teclado.
• 2.1.2 Sin trampa de teclado (A) — los usuarios de teclado deben poder mover el foco fuera de cualquier elemento enfocable usando únicamente el teclado.
• 2.4.3 Orden del foco (A) — el orden del foco debe ser lógico y significativo.
• 2.4.7 Foco visible (AA) — el elemento con el foco debe tener un indicador visible.
• 2.4.11 Foco no oculto (AA, nuevo en WCAG 2.2) — las cabeceras fijas, los banners de cookies y los widgets flotantes de chat no pueden ocultar completamente un elemento enfocado.
• 2.4.13 Apariencia del foco (AAA, nuevo en 2.2) — el indicador de foco debe cumplir umbrales específicos de área y contraste.

Patrones de error más comunes

• outline: none sin sustituto. Los diseñadores eliminan el anillo predeterminado porque no encaja en el lenguaje visual y olvidan reemplazarlo por un equivalente con estilos propios. Es un fallo de nivel AA y el más frecuente.
• Foco solo en :focus-visible, no en :focus. La práctica moderna consiste en usar :focus-visible para que el anillo aparezca únicamente durante la navegación por teclado, no al hacer clic con el ratón. Es válido, pero el indicador en :focus-visible debe seguir cumpliendo el contraste de nivel AA.
• Foco perdido tras acciones dinámicas. Al cerrar un diálogo modal, el foco debe volver al elemento que lo abrió. Al eliminar una fila, el foco debe moverse a un elemento vecino apropiado. De lo contrario, el usuario aterriza en un lugar arbitrario —habitualmente el cuerpo del documento— y tiene que volver a recorrer la página con Tab desde el principio.
• Foco oculto bajo elementos fijos. Un enlace enfocado a 50 píxeles de la parte superior de la página queda detrás de la cabecera fija que también ocupa 50 píxeles de altura. El usuario presiona Tab y parece que el foco desaparece en el vacío. Se puede solucionar aplicando scroll-padding-top igual a la altura de la cabecera, o detectando la superposición y desplazando el elemento enfocado a la vista.

La auditoría manual más rápida

Recorrer la página completa con Tab desde la barra de direcciones hasta el pie de página. Si en algún momento no se ve dónde está el foco, no se puede alcanzar un control interactivo o se queda atrapado en una trampa de foco, la página falla el criterio 2.4.7 o 2.1.2.