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.