TL;DR (Too Long; Didn’t Read... o básicamente: mucho texto, dame el resumen rápido)
Publicar imágenes que transmiten información sin un atributo alt explicativo no solo es un fallo técnico crítico (WCAG 1.1.1), sino que obliga al lector de pantalla a leer nombres de archivo ininteligibles (ej. "IMG_001.jpg"), generando una experiencia de persona usuaria frustrante y excluyente.
La desconexión entre lo visual y lo programático
Un error sistémico en los gestores de contenido (CMS) es permitir la subida de imágenes sin forzar la inyección de una descripción. Cuando una persona usuaria de lector de pantalla se topa con un infográfico o un mapa sin texto alternativo, literalmente se encuentra ante un muro opaco: sabe que hay información allí, pero le es inaccesible.
El patrón erróneo: Código Accesible Deficiente
Dejar que el navegador intente adivinar la intención de la imagen leyendo el atributo src directamente a la persona usuaria final.
<!-- MAL: Imagen carente de descripción semántica -->
<img src="/uploads/2026/06/banner-descuentos-finales.jpg">
<!-- MAL: Uso de alt genérico e inútil -->
<img src="/uploads/grafico.png" alt="grafico">La Solución Accesible: Código Recomendado
Redactar atributos alt que transmitan la función y el significado de la imagen, no solo una descripción literal visual.
<!-- BIEN: Descripción de valor y contexto -->
<img
src="/uploads/2026/06/banner-descuentos-finales.jpg"
alt="Aprovecha 50% de descuento en todos los trámites en línea hasta el viernes"
>Metodología de Verificación y Testing
Pruebas Manuales con Lectores de Pantalla
Con NVDA, presionar G para saltar entre imágenes. Verificar que cada imagen informativa anuncie su texto alternativo descriptivo. Las imágenes decorativas deben ser completamente ignoradas por el lector. En VoiceOver (iOS), confirmar mediante swipe que las imágenes informativas se anuncien correctamente.
Inspección del Árbol de Accesibilidad
En Chrome DevTools, seleccionar el elemento afectado en el panel Elements, luego abrir la pestaña Accessibility. Verificar que las propiedades Role, Name y State reflejen correctamente la intención del componente según el criterio WCAG 1.1.1.
Herramientas Automatizadas
Ejecutar Axe DevTools: la regla image-alt y sus variantes detectan eficazmente imágenes, SVGs y objetos sin texto alternativo. WAVE también marca estos errores con alta fiabilidad. Limitación: Las herramientas no evalúan la calidad del texto alternativo.
