Nivel 3: Desarrollo web accesible · Desarrollo web
N3-C5 Componentes interactivos accesibles
Las interfaces se construyen con un puñado de componentes que se repiten en todas partes y, si estos son accesibles, casi toda la aplicación lo es. Este curso recorre cada uno con su patrón de referencia en la ARIA Authoring Practices Guide (APG): botones y enlaces, widgets compuestos, menús y pestañas, combobox, diálogos, controles de valor, carruseles, tablas, árboles y rejillas. Para cada componente verás el HTML que lo implementa, el teclado que debe soportar, los criterios WCAG 2.2 que lo afectan y los errores que más se repiten.
- 10 lecciones
- 1 vídeo con subtítulos
- 2 infografías
- 159 minutos
- 10 ejercicios prácticos
- Test de práctica ilimitado
Objetivos
- Al terminar sabrás elegir entre botón y enlace y construir controles personalizados con nombre, rol, estado y teclado completos.
- Gestionarás el foco de los widgets compuestos con roving tabindex o aria-activedescendant y sabrás cuándo conviene cada técnica.
- Implementarás menús, desplegables y pestañas siguiendo los patrones de la APG, con la gestión de teclado que cada uno exige.
- Construirás buscadores con sugerencias según el patrón combobox de WAI-ARIA 1.2, con el foco en el campo y el número de resultados anunciado.
- Construirás diálogos modales, acordeones y tooltips accesibles, incluidos los requisitos de 1.4.13 para el contenido que aparece al pasar el puntero o enfocar.
- Harás accesibles deslizadores, selectores de cantidad, interruptores y valoraciones exponiendo nombre, valor actual y límites.
- Harás accesibles carruseles, tablas interactivas y funciones de arrastrar y soltar cumpliendo 2.2.2, 2.5.7 y 2.5.8.
- Decidirás cuándo una estructura debe ser una tabla nativa, un tree, un grid o un treegrid, e implementarás su teclado.
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: Botones, enlaces y controles personalizados
- Paso 3: Ejercicio práctico: La cesta de una tienda de cerámica en línea
- Paso 4: Lección 3: Widgets compuestos: roving tabindex y aria-activedescendant
- Paso 5: Ejercicio práctico: La barra de formato del editor de un boletín vecinal
- Paso 6: Lección 4: Menús, desplegables y pestañas (patrones APG)
- Paso 7: Ejercicio práctico: Las pestañas de la ficha de un trámite municipal
- Paso 8: Lección 5: Combobox, listbox y autocompletado
- Paso 9: Ejercicio práctico: El buscador de estaciones de una compañía ferroviaria
- Paso 10: Lección 6: Diálogos modales, acordeones y tooltips
- Paso 11: Ejercicio práctico: La ampliación de plazo de un expediente en una sede electrónica
- Paso 12: Ejercicio práctico: Las ayudas emergentes del editor de plantillas de una gestoría
- Paso 13: Lección 7: Deslizadores, interruptores y otros controles de valor
- Paso 14: Ejercicio práctico: El selector de cantidad de la cesta de una tienda de montaña
- Paso 15: Lección 8: Carruseles, tablas interactivas y arrastrar y soltar (2.5.7)
- Paso 16: Ejercicio práctico: Las noticias destacadas de la portada de un ayuntamiento
- Paso 17: Ejercicio práctico: El tablero de tareas de mantenimiento de un centro deportivo
- Paso 18: Lección 9: Vistas en árbol y rejillas de datos (tree, grid y treegrid)
- Paso 19: Ejercicio práctico: El árbol de carpetas del gestor documental de un ayuntamiento
- Paso 20: Lección 10: Caso práctico, ejercicios y lista de comprobación