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.