Usar una página con el teclado

Desconecta el mouse y pulsa Tab: cada enlace, botón y campo debería iluminarse por turnos, en el orden en que lees la página.

Quién usa el teclado

Mucha gente nunca toca un mouse. Algunas personas no pueden sostenerlo con firmeza; otras usan un pulsador, un puntero bucal o un sistema de reconocimiento de voz que envía pulsaciones de teclas; quienes usan lectores de pantalla también se mueven sobre todo con el teclado. El criterio de conformidad 2.1.1 Teclado de WCAG 2.2, de nivel A, dice que todo en la página debe funcionar con un teclado. El criterio 2.1.2 Sin trampas para el foco del teclado agrega que, si el foco puede entrar en una parte de la página, también debe poder salir de ella con el teclado.

Usa elementos que ya funcionan

Los enlaces con href, button, input, select y textarea pueden recibir el foco desde el principio y responden a las teclas correctas. Un div con un controlador de clic no: no se llega a él con Tab, Enter no hace nada y un lector de pantalla no lo anuncia como botón. El consejo de MDN es claro. No uses tabindex para que un div se comporte como botón; usa el elemento button, que ya trae incorporados su rol y su comportamiento con el teclado.

Orden del foco y tabindex

El orden de Tab sigue el orden de los elementos en el código HTML. El criterio 2.4.3 Orden del foco pide que ese orden conserve el sentido y el uso de la página, así que la solución más sencilla para un orden extraño es reordenar el HTML. MDN enumera tres tipos de valor de tabindex. El cero pone un elemento en el orden normal. Un valor negativo, normalmente -1, lo saca del orden de Tab, pero permite que un script llame a focus() sobre él, algo útil para un cuadro de diálogo o un mensaje de error. Un valor positivo obliga al elemento a ir antes que todo lo demás, y MDN recomienda usar solo 0 y -1, porque los valores positivos hacen que el orden sea difícil de seguir.

Ver dónde estás

Quienes usan el teclado necesitan ver qué elemento tiene el foco. El criterio 2.4.7 Foco visible, de nivel AA, pide un indicador de foco visible, así que una regla de estilo como outline: none sin nada que la reemplace es un fallo. WCAG 2.2 agregó dos criterios relacionados. 2.4.11 Foco no oculto (mínimo), de nivel AA, dice que el elemento con foco no debe quedar totalmente tapado por algo que agregó el autor, como un pie de página fijo o un aviso de cookies. 2.5.8 Tamaño del objetivo (mínimo), también AA, pide que lo que se pulsa o toca mida al menos 24 por 24 píxeles CSS, o tenga suficiente espacio alrededor.

Hay otro patrón que ayuda muchísimo: el enlace para saltar. Un sitio con un menú largo obliga a quien usa el teclado a pulsar Tab por cada elemento del menú en cada página. Un enlace colocado al principio de la página, que apunte al contenido principal, permite pasarlo de un solo toque de tecla. Puede quedar oculto a la vista hasta que recibe el foco.

La prueba lleva dos minutos. Haz clic en la barra de direcciones y pulsa Tab una y otra vez por toda la página. Comprueba que se puede llegar a todos los controles, que el orden coincide con el orden de lectura, que siempre se ve dónde está el foco y que Enter y Space hacen lo mismo que un clic. Después pulsa Shift+Tab para volver. Cualquier control al que no puedas llegar, o cualquier punto donde el foco desaparezca, es un error.