Accesibilidad de imágenes - Cómo escribir texto alt y estándares de contraste

Por qué la accesibilidad de imágenes es importante

Aproximadamente 285 millones de personas con discapacidad visual en todo el mundo dependen de tecnologías de asistencia como lectores de pantalla para navegar por la web. Cuando las imágenes carecen de texto alternativo adecuado, estos usuarios no pueden comprender la información que transmiten las imágenes. Esto no es solo una cuestión moral, sino también un requisito legal en muchos países y regiones.

El alcance de la accesibilidad de imágenes va más allá de los usuarios con discapacidad visual: los usuarios con conexiones lentas que no pueden cargar imágenes dependen del texto alt para entender el contenido; los motores de búsqueda comprenden el contenido de las imágenes a través del texto alt (valor SEO); los usuarios que utilizan navegadores de texto o modo lectura necesitan alternativas textuales.

El criterio de éxito 1.1.1 de WCAG (Web Content Accessibility Guidelines) 2.1 requiere que todo contenido no textual tenga una alternativa textual equivalente. Este es un requisito de nivel A (el nivel más bajo), lo que significa que es el umbral básico para el cumplimiento de accesibilidad.

Problemas comunes de accesibilidad: ausencia total del atributo alt (el lector de pantalla lee el nombre del archivo), todas las imágenes con el mismo texto alt genérico (como "imagen"), texto alt demasiado largo o con información irrelevante, imágenes decorativas no marcadas correctamente como decorativas.

Reglas básicas y patrones de escritura del texto alt

El texto alt debe transmitir la función y el significado de la imagen, no describir su apariencia visual. La pregunta central es: "Si esta imagen no se puede mostrar, ¿qué necesita saber el usuario?"

Reglas básicas:

• Conciso y claro: generalmente dentro de 125 caracteres. Los lectores de pantalla leen todo el texto alt de una vez
• No comenzar con "imagen" o "foto": el lector de pantalla ya informa al usuario que es una imagen
• Transmitir el propósito, no la apariencia: describir el rol de la imagen en el contexto
• Incluir información clave: si el texto en la imagen es contenido importante, incluirlo en el texto alt

Patrones de texto alt según el tipo de imagen:

• Imágenes informativas: describir la información que transmite la imagen. Ejemplo logo de empresa: alt="Logo de PicLab"
• Imágenes funcionales (en enlaces/botones): describir la acción, no la imagen. Ejemplo botón de icono de búsqueda: alt="Buscar"
• Gráficos/visualización de datos: resumir los puntos de datos clave. Ejemplo: alt="Gráfico de tendencia de ventas 2024, Q3 creció 45%"
• Imágenes complejas: usar alt breve + descripción detallada con longdesc o texto adyacente

Optimización del texto alt según el contexto

La misma imagen puede necesitar diferente texto alt en diferentes contextos. La clave es considerar el rol de la imagen en la página actual.

Imagen de producto en página de producto: describir las características visuales clave del producto. alt="Bolso de mano de cuero rojo, herrajes dorados, tamaño 30x25cm". Ayuda a los usuarios que no pueden ver la imagen a entender la apariencia del producto.

Captura de pantalla en tutorial: describir el paso de operación que muestra la captura. alt="Panel de capas de Photoshop, mostrando la capa de fondo seleccionada y el menú desplegable de modo de fusión". Permite al usuario seguir el tutorial.

Imagen decorativa en artículo: si la imagen es solo embellecimiento visual y no transmite información adicional, usar alt vacío: alt="". Los lectores de pantalla omitirán estas imágenes.

Infografías y diagramas de flujo: proporcionar un resumen breve como alt, con el contenido completo presentado como texto en la página o asociado mediante aria-describedby con una descripción detallada.

Prácticas a evitar: no acumular palabras clave SEO en el alt; no describir detalles visuales irrelevantes al contexto; no usar la misma plantilla para todas las imágenes.

Contraste de imagen y estándares WCAG

WCAG tiene requisitos claros de contraste para el texto y los elementos visuales importantes en las imágenes.

Texto en imágenes: si una imagen contiene texto (como banners, infografías), el contraste entre el texto y el fondo debe cumplir el estándar WCAG AA (texto normal 4.5:1, texto grande 3:1). Esto es igual al requisito para texto HTML en la página.

Elementos gráficos significativos: el estándar 1.4.11 de WCAG 2.1 requiere que el contenido no textual (iconos, líneas de gráficos, bordes de controles de formulario, etc.) tenga una relación de contraste de al menos 3:1 con los colores adyacentes. Por ejemplo, las líneas de un gráfico de líneas deben tener suficiente contraste con el fondo.

Iconos y controles: los iconos interactivos (como botones de cerrar, flechas de navegación) necesitan cumplir un contraste de 3:1. Los iconos puramente decorativos no están sujetos a esta restricción.

Herramientas de detección: Colour Contrast Analyser (CCA) puede detectar el contraste entre dos puntos cualesquiera en una imagen; axe DevTools detecta automáticamente problemas de contraste en la página; el plugin Stark de Figma verifica durante la fase de diseño.

Problemas comunes: texto claro superpuesto en fotos (fondo irregular causa contraste insuficiente en algunas áreas) - la solución es añadir una capa de superposición semitransparente; iconos con contraste insuficiente en modo oscuro - se necesitan versiones de diferente color para el modo oscuro.

Tratamiento correcto de imágenes decorativas y de fondo

No todas las imágenes necesitan texto alt. Identificar y tratar correctamente las imágenes decorativas es igualmente importante.

Criterio para determinar imágenes decorativas: si eliminar la imagen no afecta la información y funcionalidad de la página, la imagen es decorativa. Ejemplos: líneas divisorias puramente visuales, texturas de fondo, imágenes de acompañamiento de artículos (cuando el texto del artículo ya transmite la información completa).

Métodos de tratamiento:

• HTML <img>: establecer alt="" (cadena vacía, no omitir el atributo alt). El lector de pantalla la omitirá completamente
• Añadir role="presentation" o aria-hidden="true" como garantía adicional
• Imágenes de fondo CSS: naturalmente invisibles para los lectores de pantalla, no requieren tratamiento adicional. Adecuadas para imágenes puramente decorativas

Errores comunes:

• Omitir el atributo alt (<img src="...">): el lector de pantalla leerá el nombre del archivo, causando interferencia
• Escribir texto alt para imágenes decorativas: añade ruido innecesario, reduciendo la eficiencia de navegación del usuario de lector de pantalla
• Establecer imágenes significativas como decorativas: resulta en pérdida de información

Accesibilidad de imágenes de fondo: si una imagen de fondo CSS transmite información importante (como indicadores de estado), se necesita proporcionar texto equivalente por otros medios (como aria-label o elementos de texto ocultos).

アクセシビリティの実践書は Amazon でも探せます

Pruebas automatizadas y mejora continua

La accesibilidad de imágenes no es un trabajo de una sola vez, se necesita establecer mecanismos continuos de detección y mejora.

Herramientas automatizadas:

• axe-core: se puede integrar en pipelines CI/CD, detecta automáticamente imágenes sin atributo alt, alt vacío usado en imágenes no decorativas, etc.
• Auditoría de accesibilidad Lighthouse: integrada en Chrome DevTools, proporciona puntuación de accesibilidad y sugerencias específicas de mejora
• Pa11y: herramienta de pruebas de accesibilidad por línea de comandos, soporta escaneo de páginas por lotes
• eslint-plugin-jsx-a11y: captura problemas de accesibilidad en componentes React durante la fase de desarrollo

Limitaciones de la automatización: las herramientas solo pueden detectar "si existe texto alt", no pueden juzgar la calidad y precisión del texto alt. La revisión humana sigue siendo insustituible. Se recomienda realizar auditorías manuales de accesibilidad periódicamente, especialmente para contenido nuevo.

Proceso de mejora continua:

1. Integrar pruebas automatizadas de accesibilidad en CI, bloqueando la fusión de código no conforme
2. Establecer guías y plantillas de escritura de texto alt, reduciendo el costo de aprendizaje del equipo
3. Experimentar regularmente el sitio web con lectores de pantalla (VoiceOver, NVDA)
4. Recopilar retroalimentación de usuarios con discapacidad para entender los puntos de dolor en el uso real
5. Seguir las actualizaciones del estándar WCAG y ajustar la estrategia de cumplimiento oportunamente