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">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.
