Recetario de accesibilidad web

Capítulo 6. Gestionar el enfoque

Este trabajo se ha traducido utilizando IA. Agradecemos tus opiniones y comentarios: [e-mail]

Las páginas Web son accesibles desde el teclado por defecto porque los elementos interactivos nativos vienen con el estilo y la funcionalidad que necesitas para utilizarlos nada más sacarlos de la caja. Son enfocables e indican su estado de enfoque visualmente. Cuando añades CSS o especialmente JavaScript, debes asegurarte de que mantienes esa accesibilidad de base o incluso la mejoras, y de que tus soluciones personalizadas también son accesibles.

6.1 Proporcionar Estilos de Enfoque

Problema

Cuando las personas acceden a un sitio web utilizando un teclado, un dispositivo de conmutación, un lector de pantalla o una tecnología de asistencia similar, pueden utilizar la tecla Tab (o un control de otro dispositivo físico que se asigne a la tecla) para saltar de un elemento interactivo a otro.

Si tú, como desarrollador, no resaltas visualmente el elemento activo en ese momento mediante CSS, los usuarios no podrán orientarse y navegar.

Solución

Utiliza pseudoclases para dar estilo a los elementos interactivos en su estado enfocado o enfocado-visible, como se muestra en los Ejemplos 6-1, 6-2, 6-3 y 6-4.

Ejemplo 6-1. Estilizar todos los elementos en su estado de foco visible

:focus-visible {
  outline: 0.25em solid;
  outline-offset: 0.25em;
}

Ejemplo 6-2. Estilizar todos los elementos en su estado de foco

:focus {
  outline: 0.25em solid ...