Presentación del curso en vídeo

0:00 Te damos la bienvenida

Hola, te damos la bienvenida a WAI-ARIA: fundamentos, un curso del nivel 3 de la Certificación ADDAW de Accesibilidad Digital. ARIA es el vocabulario que completa al HTML cuando este no basta. Es un curso para quien desarrolla o audita interfaces web y quiere usar ARIA con criterio: sin miedo, y sin excesos.

0:22 Qué es ARIA y qué no

ARIA cambia lo que perciben los lectores de pantalla y demás tecnologías de apoyo: el rol, el nombre, el estado. Pero no añade comportamiento. Si pones el rol de botón a un bloque genérico, el lector dirá: «Botón.» Aunque no reciba el foco ni responda al teclado. ARIA es una promesa que tu código debe cumplir.

0:45 Cinco reglas

Todo el curso se apoya en cinco reglas. Usa primero el HTML nativo. Y no destruyas la semántica que ya existe. Haz que cada control sea operable con teclado. Y no ocultes al lector nada que pueda recibir el foco. Por último, da un nombre a todo lo interactivo. Por eso se dice que es mejor no usar ARIA que usarlo mal.

1:08 Del código al lector

Verás el camino que recorre cada atributo: del código al árbol de accesibilidad, de ahí a la interfaz del sistema operativo y, por último, al lector de pantalla. Entenderás por qué el modo exploración se come las flechas de un componente sin rol. Y por qué el rol de aplicación casi nunca está justificado.

1:29 Roles, estados y propiedades

Para cada componente hay que responder a tres preguntas: qué es, cómo se llama y cómo está. Es lo que exige el criterio 4.1.2, Nombre, función, valor. Por ejemplo, un interruptor de avisos necesita su rol, su texto y un estado de activado o desactivado que se actualice cada vez que se pulsa.

1:52 Leer la especificación

Aprenderás a consultar las fuentes en lugar de copiar fragmentos. La ficha de cada rol dice dónde debe estar, qué debe contener y qué atributos exige. La especificación ARIA in HTML dice qué puedes poner en cada elemento. Y la guía de patrones explica el teclado de cada componente, aunque no sea una norma.

2:12 Relaciones entre elementos

Muchas relaciones se expresan apuntando a otro elemento por su identificador. Así se asocian la ayuda de un campo, la opción activa de un buscador con sugerencias, o la posición real en una lista de 1.250 trámites. Verás qué relaciones funcionan bien, cuáles tienen poco soporte, y por qué los identificadores duplicados las rompen.

2:35 Ocultar, anular y desactivar

Retirar semántica también tiene su técnica. Aprenderás cuándo ocultar algo solo al lector, y cuándo a todo el mundo. Verás cómo dejar inutilizado el fondo de una ventana modal. Y sabrás desactivar un botón sin que quien usa teclado se quede sin saber por qué no funciona.

2:54 Anunciar los cambios

Cuando aparece un mensaje sin mover el foco, como «8 resultados encontrados», el lector no se entera si no lo anuncias. Lo exige el criterio 4.1.3, Mensajes de estado. Usarás regiones de estado para casi todo, y alertas solo para urgencias. Siempre creadas vacías, antes de escribir en ellas. Y entonces sí: «8 resultados encontrados.»

3:19 Errores y cómo detectarlos

Casi todos los errores de ARIA se reducen a tres. Prometer un comportamiento que no existe. Olvidar actualizar un estado. O poner un atributo donde no tiene efecto. Las herramientas automáticas detectan la sintaxis. Para el significado, tendrás que escuchar cada componente con un lector de pantalla.

3:38 Por qué importa

Imagina a una vecina que usa lector de pantalla, y no puede pedir cita en la sede electrónica porque los filtros no se abren. La normativa española, con el Real Decreto 1112 de 2018 y la Ley 11 de 2023, exige, a través de la norma EN 301 549, el nivel doble A de las pautas WCAG 2.1. Y ojo: añadir ARIA sin criterio suele empeorar las cosas.

4:08 Al terminar sabrás

Al terminar sabrás decidir cuándo usar ARIA y cuándo no. Construirás componentes que comunican bien su rol, su nombre y su estado, y revisarás los de otras personas. El curso acaba con un caso práctico real, resuelto paso a paso. Abre las herramientas de desarrollo de tu navegador, y empecemos.