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
Contenido revisado el 26/10/2026 · Historial de actualizaciones · Cómo se elabora y se evalúa
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.
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: 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