Nivel 3: Desarrollo web accesible · Desarrollo web
N3-C4 WAI-ARIA: fundamentos
WAI-ARIA es el vocabulario que permite describir a las tecnologías de apoyo lo que el HTML por sí solo no puede expresar: bien usado, hace accesibles componentes complejos; mal usado, rompe lo que funcionaba. Este curso explica las cinco reglas de uso, el camino del código al lector de pantalla, roles, estados, propiedades y relaciones, cómo leer la especificación y la APG, cómo ocultar y desactivar correctamente y cómo anunciar cambios con regiones activas. Termina con los errores más repetidos, cómo detectarlos y un caso práctico resuelto.
- 10 lecciones
- 1 vídeo con subtítulos
- 2 infografías
- 127 minutos
- 10 ejercicios prácticos
- Test de práctica ilimitado
Contenido revisado el 26/10/2026 · Historial de actualizaciones · Cómo se elabora y se evalúa
Objetivos
- Al terminar sabrás qué es WAI-ARIA 1.2, qué aporta y qué no, y aplicarás las cinco reglas de uso de ARIA.
- Explicar cómo llega la información del DOM al lector de pantalla a través del árbol de accesibilidad y las API de la plataforma, y cómo influyen los modos del lector.
- Distinguirás roles, estados y propiedades, y construirás nombres y descripciones accesibles conformes a 4.1.2.
- Consultar la ficha de un rol en WAI-ARIA 1.2, las reglas de ARIA in HTML y los patrones de la APG para decidir qué atributos usar.
- Expresar relaciones entre elementos con referencias por id (aria-describedby, aria-activedescendant, aria-setsize…) conociendo su soporte real.
- Elegir el mecanismo adecuado entre hidden, aria-hidden, inert, role="none", disabled y aria-disabled.
- Implementarás regiones activas con aria-live, role="status" y role="alert" para cumplir 4.1.3 Mensajes de estado.
- Reconocerás los errores habituales de ARIA (roles redundantes, atributos inválidos, aria-hidden en elementos enfocables) y los detectarás con herramientas y con lector de pantalla.
El curso, paso a paso
El curso es guiado: después de cada lección haces un test corto y, cuando toca, uno o varios ejercicios prácticos con una página real que revisar. Al superarlos se abre el paso siguiente.
Todas las lecciones se pueden leer libremente. Para hacer los tests, los ejercicios prácticos, guardar tu avance y optar al examen y al certificado, matricúlate.
- Paso 1: Lección 1: Presentación del curso en vídeo
- Paso 2: Lección 2: Qué es ARIA, las cinco reglas y «no ARIA es mejor que mal ARIA»
- Paso 3: Ejercicio práctico: Los recibos del área de clientes de una compañía de aguas
- Paso 4: Lección 3: Del código al lector: árbol de accesibilidad, API y modos del lector
- Paso 5: Lección 4: Roles, estados y propiedades; nombre y descripción accesibles (4.1.2)
- Paso 6: Ejercicio práctico: El reproductor del pódcast de una radio municipal
- Paso 7: Lección 5: Leer la especificación: la ficha de cada rol, ARIA in HTML y la APG
- Paso 8: Ejercicio práctico: El selector de hora de llegada de un museo
- Paso 9: Lección 6: Relaciones entre elementos: referencias por id y propiedades de relación
- Paso 10: Ejercicio práctico: La suscripción al boletín de una red de bibliotecas
- Paso 11: Ejercicio práctico: El buscador de municipios de una sede tributaria
- Paso 12: Lección 7: Ocultar, anular y desactivar: aria-hidden, role="none", inert y aria-disabled
- Paso 13: Ejercicio práctico: Las noticias de portada de un diario comarcal
- Paso 14: Ejercicio práctico: El botón de presentar una declaración de beneficiarios
- Paso 15: Lección 8: Regiones activas: aria-live, role="status" y role="alert" (4.1.3)
- Paso 16: Ejercicio práctico: El aviso «añadido a la cesta» de una librería en línea
- Paso 17: Ejercicio práctico: El guardado del borrador de una solicitud de subvención
- Paso 18: Lección 9: Errores habituales con ARIA y cómo detectarlos
- Paso 19: Ejercicio práctico: Las preguntas frecuentes de una oficina de turismo
- Paso 20: Lección 10: Caso práctico, ejercicios y lista de comprobación