Nivel 3: Desarrollo web accesible · Desarrollo web
N3-C1 HTML semántico y estructura
El HTML es la capa donde se gana o se pierde la mayor parte de la accesibilidad. Este curso explica cómo el navegador construye el árbol de accesibilidad y calcula el nombre accesible, y cómo estructurar páginas con landmarks, encabezados, listas, semántica del texto y tablas que cualquier tecnología de apoyo entienda. Después lo aplica a plantillas reales, a la orientación dentro del sitio, al título, el idioma y el orden del código, y a los errores de marcado que rompen la accesibilidad en silencio.
- 10 lecciones
- 1 vídeo con subtítulos
- 2 infografías
- 123 minutos
- 10 ejercicios prácticos
- Test de práctica ilimitado
Objetivos
- Al terminar sabrás explicar qué es el árbol de accesibilidad y cómo se calcula el nombre accesible de un elemento.
- Estructurarás páginas con landmarks, encabezados y listas correctos conforme a los criterios 1.3.1, 2.4.1, 2.4.6 y 2.4.10.
- Elegirás los elementos de texto adecuados (énfasis, citas, siglas, fechas, figuras) y sabrás cuándo un significado debe expresarse también con palabras.
- Marcarás tablas de datos simples y complejas con th, scope, caption y headers de forma que un lector de pantalla las lea bien.
- Aplicarás patrones de estructura a plantillas de portada, listado, ficha y artículo, incluidos los marcos incrustados con título.
- Implementarás migas de pan, paginación, buscador y mapa web conforme a 2.4.5, 2.4.8, 3.2.3 y 3.2.6.
- Aplicarás correctamente título de página, idioma y orden del DOM (2.4.2, 3.1.1, 3.1.2, 1.3.2) y sabrás comprobarlos con las herramientas del navegador.
- Detectarás y corregirás identificadores duplicados, anidamientos no válidos y atributos erróneos, y conocerás la situación de 4.1.1 Procesamiento en WCAG 2.2.
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.
0 de 20 pasos completados
- Paso 1: Lección 1: Presentación del curso en vídeo
- Paso 2: Lección 2: Semántica: por qué importa; árbol de accesibilidad y nombre accesible
- Paso 3: Ejercicio práctico: La cabecera de una papelería en línea con controles de icono
- Paso 4: Lección 3: Landmarks, encabezados, listas y regiones
- Paso 5: Ejercicio práctico: La ficha de la ayuda para el comedor escolar de un ayuntamiento
- Paso 6: Ejercicio práctico: La página de servicios de un centro de día para personas mayores
- Paso 7: Ejercicio práctico: Las regiones de la página de visita de un museo
- Paso 8: Lección 4: Semántica del texto: énfasis, citas, abreviaturas, fechas y figuras
- Paso 9: Ejercicio práctico: La corrección de errores de unas bases de becas de transporte
- Paso 10: Lección 5: Tablas de datos accesibles
- Paso 11: Ejercicio práctico: La tabla de tarifas por tramos de una empresa municipal de aguas
- Paso 12: Ejercicio práctico: La tabla de personas atendidas por canal y semestre en una memoria anual
- Paso 13: Lección 6: Patrones de estructura para páginas reales: portada, listados, fichas y artículos
- Paso 14: Lección 7: Orientación en el sitio: migas de pan, paginación, buscador y mapa web
- Paso 15: Ejercicio práctico: Las migas de pan y la paginación del listado de noticias de una mancomunidad
- Paso 16: Lección 8: Título de página, idioma, metadatos y orden del DOM
- Paso 17: Ejercicio práctico: La ficha de la tarjeta de transporte joven de un consorcio comarcal
- Paso 18: Lección 9: HTML válido y robusto: identificadores, anidamiento y el fin de 4.1.1
- Paso 19: Ejercicio práctico: Las tarjetas de eventos de una agenda cultural municipal
- Paso 20: Lección 10: Caso práctico, ejercicios y lista de comprobación