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