Presentación del curso en vídeo

0:00 Te damos la bienvenida

Te damos la bienvenida a HTML semántico y estructura, el primer curso del nivel 3 de la Certificación ADDAW de Accesibilidad Digital. El HTML es la base de la accesibilidad: aquí se gana o se pierde casi todo. El curso está pensado para desarrollo, maquetación y auditoría.

0:19 Lo que no se ve: el árbol de accesibilidad

El navegador construye, a partir del HTML, un árbol paralelo que leen las tecnologías de apoyo. Cada elemento tiene rol, nombre, estado y valor. Por eso un div con aspecto de botón no es un botón. No recibe el foco ni se anuncia como algo que se puede pulsar.

0:37 El nombre accesible

El nombre accesible es lo que anuncia el lector de pantalla y lo que necesita el control por voz para encontrar un botón. Verás cómo lo calcula el navegador. El ejemplo típico es un botón de cerrar con solo un icono. Sin texto ni etiqueta, se anuncia como botón, sin más.

0:54 Landmarks, encabezados y listas

Después construirás el mapa de la página. Las regiones permiten saltar de zona en zona. Los encabezados funcionan como el índice de un libro, y las listas dicen cuántos elementos hay. Por ejemplo, dos menús de navegación con nombres distintos: Principal y Pasos del trámite.

1:12 El significado del texto

El texto también tiene semántica: citas, siglas, fechas y figuras. Pero con su configuración habitual, los lectores de pantalla no anuncian la negrita ni el tachado. Un precio rebajado puede oírse como 30 euros, 20 euros. Lo imprescindible tiene que estar también en palabras.

1:30 Tablas de datos que se entienden

En una tabla de datos, cada celda depende de su fila y de su columna. Aprenderás a darle un título con caption y a marcar los encabezados de fila y de columna. Así, en una tabla de tasas municipales, cada importe se anuncia con su trámite y su tipo de tasa.

1:46 Plantillas de páginas reales

Llevarás todo esto a plantillas reales: portadas, listados, fichas y artículos. Verás cómo marcar tarjetas con su propio encabezado y un enlace claro, sin diez enlaces de leer más. Y por qué cada iframe, como el mapa de una oficina, necesita un título que diga qué contiene.

2:04 Saber dónde estás

También aprenderás a orientar a la persona dentro del sitio. Marcarás las migas de pan y la página actual, y una paginación con nombre. Además, ofrecerás un buscador o un mapa web, porque las pautas WCAG piden al menos dos vías para llegar a cada página.

2:19 Título, idioma y orden del código

Hay detalles pequeños que generan muchas reclamaciones. Cada página necesita un título único. El documento debe declarar su idioma real, o el castellano se leerá con voz inglesa. Y el orden del código manda: si el precio va detrás del botón de compra, se oirá después.

2:36 HTML robusto

Cerrarás con los errores de marcado que rompen la accesibilidad en silencio. Un identificador duplicado deja un campo sin etiqueta. Un botón dentro de un enlace confunde a los lectores. Aprenderás a validar el código y a confirmar el resultado en el árbol de accesibilidad.

2:53 Por qué importa

Piensa en una persona ciega que navega por encabezados para buscar las tasas de una licencia. Si la página no los tiene, o la tabla está mal marcada, no las encontrará. Además, la estructura es la base para cumplir el Real Decreto 1112 de 2018. Y también la Ley 11 de 2023, que ya se aplica a muchas empresas privadas.

3:15 Al terminar el curso

Al terminar, sabrás estructurar cualquier plantilla con un HTML que todo el mundo entiende. Sabrás comprobarlo con el árbol de accesibilidad y con un lector de pantalla. Tendrás una base sólida para formularios, teclado, ARIA y componentes, el resto del nivel. Empezamos.