Accesibilidad: alt, jerarquía de títulos y ARIA

Domina el texto alternativo, una jerarquía de títulos que los lectores de pantalla puedan recorrer de verdad, y un uso de ARIA limitado a los casos en que el HTML nativo se queda corto.

9 min · 3 preguntas

La accesibilidad no es una capa cosmética que se añade al final de un proyecto: es una propiedad estructural de tu HTML. Empecemos por el atributo alt. Un buen texto alternativo describe la función de la imagen en su contexto, no su aspecto píxel a píxel. Un gráfico de ventas no se describe como "gráfico de barras azul", sino por la información que transmite. Y una imagen puramente decorativa debe llevar un alt="" vacío: es la señal explícita que indica al lector de pantalla que la omita. Omitir el atributo es la peor opción de todas, porque entonces el lector de pantalla anuncia el nombre del archivo.

<img src="sales-chart.png"
     alt="2025 sales: +18% in the last quarter">

<img src="divider-ornament.png" alt="">

Segunda tarea: la jerarquía de títulos. Los usuarios de lectores de pantalla saltan mayoritariamente de título en título para construir un mapa mental de la página. Por eso tu esquema h1 → h2 → h3 debe reflejar la estructura lógica del contenido, nunca el tamaño visual que te apetezca. Dos reglas innegociables: un único h1 por página y ningún nivel saltado (nada de h4 directamente bajo un h2). Si un título parece "demasiado grande", corrígelo en CSS, no rebajando su nivel semántico.

<h1>Dashboard</h1>
<section>
  <h2>Statistics</h2>
  <h3>Monthly visits</h3>
  <h3>Conversion rate</h3>
</section>
<section>
  <h2>Exportable reports</h2>
</section>

ARIA se vuelve legítimo cuando el HTML nativo no puede expresar un estado dinámico: un menú abierto o cerrado, una región que se actualiza en directo, una pestaña activa. Los atributos clave son aria-expanded (estado abierto/cerrado), aria-controls (enlace al elemento controlado) y aria-live (anuncio de actualizaciones). Recuerda el principio: el HTML nativo aporta los roles, y ARIA completa los estados y las propiedades que tu JavaScript cambia con el tiempo.

<button aria-expanded="false" aria-controls="menu">
  Menu
</button>
<ul id="menu" hidden>
  <li><a href="/profile">Profile</a></li>
  <li><a href="/settings">Settings</a></li>
</ul>

Prueba de conocimientos

Comprueba que has retenido los puntos clave de esta lección.

1. ¿Cómo debes tratar una imagen puramente decorativa?
   • Darle un alt descriptivo como alt="adorno"
   • Darle un atributo alt vacío: alt=""
   • Quitar por completo el atributo alt
   • Usar title en lugar de alt
2. Bajo un h2 quieres un subtítulo visualmente discreto. ¿Qué haces?
   • Un h5, porque es más pequeño por defecto
   • Un h3 cuyo tamaño reduces en CSS
   • Un div con una clase de título
3. ¿Cuándo es apropiado añadir atributos ARIA?
   • En cada elemento interactivo, por si acaso
   • Cuando ningún elemento HTML nativo expresa el rol o el estado requerido
   • Para mejorar el posicionamiento de la página en los buscadores