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
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.
- 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