Presentación del curso en vídeo

0:00 Teclado y gestión del foco

Te damos la bienvenida a Teclado y gestión del foco, el tercer curso del nivel 3 de la Certificación ADDAW. Aprenderás a construir interfaces que se usan por completo sin ratón. Es un curso para desarrollo, y también para diseño, QA y auditoría.

0:15 Todo con teclado, sin trampas

Todo debe ser alcanzable, activable y completable con teclado, según el criterio 2.1.1. El foco siempre debe poder salir de un componente, según el 2.1.2. Y los atajos de una sola tecla deben poder desactivarse, como pide el 2.1.4. Piensa en un correo que archiva un mensaje cada vez que alguien dicta la letra E.

0:38 Cómo funciona el foco

Después verás cómo gestiona el foco el navegador. Enfocable no es lo mismo que tabulable. Lo que se oculta debe salir también de la secuencia de Tab, o aparece el foco fantasma: un menú plegado con quince enlaces invisibles. Y recibir el foco nunca debe abrir ventanas ni enviar formularios.

0:56 Orden y foco visible

El foco debe moverse en un orden lógico y verse siempre. Ordenarás el código como se lee, usarás tabindex solo con 0 y menos 1, y dibujarás un indicador con focus-visible. Debe tener contraste de 3 a 1 frente a lo que lo rodea. Y comprobarás que ninguna cabecera fija lo tapa.

1:14 Componentes compuestos

En una barra de herramientas o en un calendario, Tab entra y sale del componente, y las flechas se mueven dentro. Lo implementarás con roving tabindex, que mueve el foco real. Para un combobox con campo de texto usarás aria-activedescendant. Así un calendario de 31 días pasa a ser una sola parada.

1:34 Eventos y atajos propios

Programarás eventos de teclado con keydown y la propiedad key. Conocerás las trampas del teclado español: en Windows, AltGr llega como Control más Alt. Un atajo con Control, Alt y E se dispararía al escribir el símbolo del euro. Y aprenderás a no disparar nunca un atajo mientras alguien escribe.

1:53 El foco en contenido dinámico

Cuando JavaScript cambia la pantalla, tú decides dónde está el foco. Añadirás enlaces de salto. Construirás modales que mueven el foco dentro, lo retienen, se cierran con Escape y lo devuelven. Y en cada cambio de vista actualizarás el título y llevarás el foco al encabezado principal.

2:10 Teclado y tecnologías de apoyo

Verás cómo usan el teclado las tecnologías de apoyo. En modo exploración, el lector de pantalla intercepta las teclas y activa los controles con un clic. Por eso la activación va en el evento click. Y para el control por voz, el nombre accesible debe contener el texto visible: quien dice «pulsa Continuar» espera que funcione.

2:30 Un protocolo de prueba

Terminarás con un protocolo de prueba con teclado. Completarás tareas reales sin ratón y registrarás cada hallazgo de forma reproducible, con su criterio y su gravedad. Lo aplicarás a un caso completo: la cita previa de una sede electrónica. Son unos 10 minutos por página.

2:48 Por qué importa

Piensa en Lucía, que maneja el ordenador con un conmutador. Cada parada sobrante le cuesta segundos y una trampa la deja fuera. Los criterios de teclado están en la norma EN 301 549, que el Real Decreto 1112 de 2018 exige al sector público. Y la Ley 11 de 2023 lleva la accesibilidad a la banca o al comercio electrónico.

3:11 Al terminar sabrás…

Al terminar sabrás hacer operable con teclado cualquier interfaz y gestionar el foco en cada cambio de pantalla. También sabrás probarlo y documentarlo con un método que cualquier equipo puede repetir. Aparta el ratón y empieza por la primera lección.