Estados de enfoque accesibles: diseño de enfoque de teclado visible
Cómo diseñar un enfoque de teclado visible que cumpla con WCAG 2.2: qué requieren 2.4.7 y 2.4.13, cómo funciona :focus-visible y consejos de diseño para anillos de enfoque.
Idea clave
Cada elemento interactivo necesita un indicador de enfoque claramente visible para los usuarios del teclado; WCAG 2.2 lo requiere en el nivel AA (2.4.7). Para obtener un indicador sólido, apunte a la guía AAA de WCAG (2.4.13): al menos el área de un contorno de 2 píxeles CSS alrededor del elemento con un contraste de 3:1 entre los estados enfocados y desenfocados. Utilice :focus-visible para mostrar anillos a los usuarios del teclado sin mostrarlos con cada clic del mouse.
Por qué son importantes los estados de enfoque
Las personas que utilizan un teclado, un dispositivo conmutador o una lupa de pantalla se mueven por una página un elemento a la vez. El indicador de enfoque es la única forma en que saben dónde se encuentran. Eliminar el esquema del navegador sin reemplazarlo es una de las fallas de accesibilidad más comunes.
Qué requiere WCAG 2.2
Criterio de cumplimiento 2.4.7 Enfoque visible (nivel AA) requiere que cualquier interfaz operable por teclado tenga un modo en el que el indicador de enfoque sea visible. WCAG 2.2 agregó 2.4.13 Apariencia de enfoque (nivel AAA), que describe un indicador sólido: al menos tan grande como el área de un perímetro del componente de 2 CSS píxeles de espesor, con una relación de contraste de al menos 3:1 entre los estados enfocado y desenfocado.
:enfoque-visible
MDN explica que :focus-visible se aplica cuando un elemento tiene foco y el navegador decide, usando heurísticas, que se debe mostrar ese foco, generalmente para uso del teclado. Esto le permite mostrar anillos de enfoque intensos para los usuarios del teclado sin mostrarlos cada vez que alguien hace clic en un botón con el mouse. Úselo en lugar de eliminar contornos.
Diseñando el anillo
Orientación práctica:
- Utilice un contorno o anillo con un desplazamiento para que no se mezcle con el elemento.
- Verifique el contraste con cada fondo en el que pueda aparecer el elemento; un anillo de dos colores ayuda.
- Manténgalo coherente en todos los componentes, definido como un token en su sistema de diseño.
- Nunca confíes únicamente en un cambio de color sutil.
- Asegúrese de que el elemento enfocado no esté oculto detrás de encabezados adhesivos.
Enfoque y movimiento
Puede aparecer un anillo de enfoque con una transición muy corta, pero debería parecer instantáneo. Evite animaciones que retrasen el anillo o muevan el elemento, y para los componentes personalizados dibujados en el lienzo, asegúrese de que todavía haya un elemento real enfocable en la página para que los usuarios del teclado puedan acceder a él.
Principios clave para recordar
- Se requiere enfoque visible en WCAG AA (2.4.7)
- 2.4.13 (AAA): área de perímetro de 2 píxeles y cambio de contraste de 3:1
- Utilice :focus-visible en lugar de eliminar contornos
- Definir el anillo de enfoque como símbolo de diseño.
- La interfaz de usuario renderizada en lienzo necesita elementos enfocables reales
Preguntas frecuentes
Fuentes
- Understanding SC 2.4.7: Focus Visible — W3C WAI
- Understanding SC 2.4.13: Focus Appearance — W3C WAI
- :focus-visible — Documentos web MDN