Imágenes Accesibles: Alt Text, ARIA, Mejores Prácticas WCAG

¿Qué son imágenes accesibles?

Las imágenes accesibles son imágenes en un sitio web que transmiten su significado a todos los usuarios, incluidos quienes no pueden verlas (usuarios screen reader, ciegos, usuarios con imágenes deshabilitadas, search engines). La herramienta primaria: el atributo alt.

La accesibilidad de imágenes es requerida por WCAG.

La regla básica: cada imagen necesita alt

<img src="chart-q4.png" alt="Q4 revenue grew 23%">
<img src="divider.png" alt="">  <!-- decorativa -->

Tres categorías de imágenes

Cómo escribir buen alt text

• Describir propósito, no apariencia.
• Ser conciso.
• No decir "imagen de".
• Matchear contexto.
• Saltarse filename-as-alt.
• Testear con screen reader.

Imágenes decorativas: usar alt vacío

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

Imágenes complejas: charts, infografías

1. Descripción larga en texto body

<img src="sales.png" alt="Quarterly sales, see below">
<p>Q1: $1M; Q2: $1.2M; Q3: $1.5M; Q4: $4.2M</p>

2. Descripción oculta con aria-describedby

<img alt="Sales chart" aria-describedby="chart-desc">
<p id="chart-desc" class="visually-hidden">...</p>

3. Link a descripción detallada

<a href="/diagram-details">Detailed text description</a>

Accesibilidad SVG

<svg role="img" aria-labelledby="svg-title">
  <title id="svg-title">Chart showing growth</title>
</svg>

Mejores prácticas accesibilidad imagen

• Cada <img> tiene alt.
• Propósito, no píxeles.
• No usar imágenes de texto.
• Captions para media compleja.
• Testear con screen readers.
• Color no es la única señal.
• Evitar imágenes CAPTCHA.
• Contraste suficiente para overlays imagen.

Pitfalls accesibilidad imagen comunes

• Alt completamente faltante.
• Filename como alt.
• Alt redundante.
• Prefijo "imagen de...".
• Alt en imágenes decorativas.
• Alt largo para complejas.
• Botones solo imagen sin alt.
• Background images con contenido.

Tools para testear

FAQ: imágenes accesibles

¿Necesito alt en imágenes decorativas?

Sí, alt vacío.

¿Debería alt incluir "imagen de"?

No.

¿Cuán largo debería ser el alt text?

Conciso, típicamente < 125 caracteres.

¿Qué sobre background images en CSS?

Si decorativo: fine. Si transmite contenido: usar <img> con alt.

¿Necesito alt en imágenes logo?

Sí, típicamente el nombre compañía.

¿Cuál es el requirement WCAG?

WCAG 2.1 Success Criterion 1.1.1.

¿Cómo ayuda alt text generado por AI?

Útil como punto partida, pero verificar.

Testea performance + accesibilidad imagen con LoadFocus

LoadFocus corre auditorías Lighthouse desde 25+ regiones, flagging alt faltante + imágenes oversized. Regístrate en loadfocus.com/signup.