Lección 6 de 12 · Lectura y práctica
HTML Semántico para Accesibilidad
El HTML Semántico es la Base de Todo El HTML semántico usa los elementos correctos para su propósito: un botón es un , un encabezado es un , una lista es un . Parece obvio, pero la mayoría de los problemas de.
Del concepto a la práctica
Taller de esta lección
Ejemplo resuelto
Una tarjeta abre los detalles de una sala mediante un elemento genérico que responde al clic. Parece un botón, pero el teclado no obtiene su comportamiento automáticamente. Sustituirlo por un botón nativo aporta semántica y comportamiento de interacción; después hay que verificar que su nombre describa la acción, por ejemplo «Ver detalles de Sala Norte». Si la acción lleva a otra página, evalúa un enlace en lugar de un botón.
Pruébalo
Inventaría cinco controles y anota si navegan o realizan una acción.
Elige el elemento nativo correspondiente y conserva su nombre visible.
Ordena los encabezados según la estructura de información de la página.
Recorre todos los controles con teclado y revisa sus nombres accesibles.
El error habitual es elegir elementos por su apariencia y compensar después con atributos. Una etiqueta de rol no añade por sí sola los eventos, estados o pruebas que necesita un componente.
Comprueba tu resultado
Entrega una tabla con control, propósito, elemento elegido y prueba. «Ver detalles» debe ser accionable desde el teclado; el enlace al reglamento debe mantener su destino y poder reconocerse como navegación.
Mapa de prácticaEl texto alternativo comunica el propósito de una imagen. La navegación por teclado necesita un foco visible; los campos necesitan etiquetas y la página una estructura semántica. Estas comprobaciones ayudan a detectar barreras y no sustituyen una auditoría completa.
Ver la infografía en tamaño completo ↗El HTML Semántico es la Base de Todo
El HTML semántico usa los elementos correctos para su propósito: un botón es un <button>, un encabezado es un <h1>, una lista es un <ul>. Parece obvio, pero la mayoría de los problemas de accesibilidad se resolverían usando el HTML correcto en lugar de divs genéricos con estilos.
Elementos semánticos esenciales
- <header>, <nav>, <main>, <footer>: las landmarks que los lectores de pantalla usan para navegar la página
- <h1> a <h6>: jerarquía de títulos — SIEMPRE en orden descendente, nunca saltar niveles (h1 → h3 sin h2 es un error)
- <button>: para acciones interactivas — NUNCA uses <div onclick> como botón (no es accesible por teclado)
- <a>: para navegación a otra página o sección — tiene focus, hover y es anunciado por lectores de pantalla automáticamente
- <ul>/<ol>/<li>: para listas — los lectores de pantalla anuncian 'lista con 5 elementos', dando contexto al usuario
Imágenes accesibles
- Toda imagen informativa necesita un alt descriptivo: alt='Gráfico de barras mostrando ventas creciendo 30% en Q2'
- Imágenes decorativas usan alt vacío: alt='' — así el lector de pantalla las ignora en lugar de decir 'imagen'
- Nunca pongas alt='imagen de...' o alt='foto de...' — el lector de pantalla ya dice 'imagen', sería redundante
- Para imágenes complejas (gráficos, infografías), añade una descripción larga debajo o en un enlace 'Descripción detallada'
- Los SVG necesitan role='img' y un aria-label para ser accesibles
Tablas accesibles
- Usa <table> solo para datos tabulares, NUNCA para layout de página (eso es de 1999)
- <thead> con <th> para encabezados de columna — los lectores de pantalla asocian cada celda con su encabezado
- scope='col' en <th> de columnas y scope='row' en <th> de filas — clarifica la relación datos-encabezado
- <caption>: un título descriptivo para la tabla que los lectores de pantalla anuncian al encontrarla
- Para tablas complejas con celdas combinadas, usa headers e id para asociaciones explícitas
Ejemplo práctico
<!-- MAL: div como botón -->
<div class="btn" onclick="handleClick()">Enviar</div>
<!-- BIEN: button semántico -->
<button type="submit" class="btn">Enviar</button>
<!-- MAL: imagen sin alt -->
<img src="chart.png">
<!-- BIEN: imagen con alt descriptivo -->
<img src="chart.png" alt="Ventas mensuales: enero $5K, febrero $8K, marzo $12K">
<!-- MAL: jerarquía de títulos rota -->
<h1>Mi Sitio</h1>
<h3>Sección</h3> <!-- Saltó h2! -->
<!-- BIEN: jerarquía correcta -->
<h1>Mi Sitio</h1>
<h2>Sección</h2>Consejo: Antes de agregar un ARIA attribute, pregúntate: ¿hay un elemento HTML nativo que haga esto? En el 90% de los casos, la respuesta es sí y es mejor usarlo.
Sigue con Accesibilidad Web (WCAG)
Esta lección forma parte de un curso de Cursalo. Revisa su programa y elige entre la compra individual o el acceso a toda la escuela.
Si ya tenías acceso a este curso, entra con tu cuenta: tus derechos y tu progreso se conservan. No necesitas comprarlo de nuevo.