Presentación del curso en vídeo

0:00 Teclado y gestión del foco

Hola, 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. Sin tocarlo ni una sola vez. Es un curso para desarrollo, y también para diseño, QA y auditoría.

0:18 Todo con teclado, sin trampas

Todo debe ser alcanzable, activable y completable con teclado. Lo dice 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. Menudo susto.

0:45 Cómo funciona el foco

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

1:06 Orden y foco visible

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

1:26 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 deja de ser 31 paradas y pasa a ser una sola.

1:50 Eventos y atajos propios

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

2:12 El foco en contenido dinámico

Cuando JavaScript cambia la pantalla, el foco no se mueve solo: tú decides dónde está. 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:33 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 siempre en el evento click, y no en las teclas. Y para el control por voz, el nombre accesible debe contener el texto visible: quien dice «pulsa Continuar» espera que funcione.

2:57 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. Poco tiempo, para todo lo que descubre.

3:18 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. Nadie debería quedarse a medias por culpa de una tecla.

3:48 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. Así que aparta el ratón, y empieza por la primera lección.