TL;DR (Too Long; Didn’t Read... o básicamente: mucho texto, dame el resumen rápido)
Omitir por completo el atributo alt en una etiqueta <img> provoca que los lectores de pantalla lean el nombre del archivo (ej: "imagen_123.jpg"). Proveer un alt explícito es el requerimiento más básico y crítico de la accesibilidad (WCAG 1.1.1).
La ausencia del Texto Alternativo (Alt Text)
Una persona usuaria ciego depende absolutamente de la descripción programática. Si un infográfico, un esquema de precios o un botón de acción no posee el atributo alt, o se deja vacío cuando contiene información crítica, el contenido queda excluido del Árbol de Accesibilidad (AOM).
El patrón erróneo: Código Accesible Deficiente
Una imagen ilustrativa que omite el atributo alt delega su interpretación al azar del motor del lector de pantalla.
<!-- MAL: Sin atributo alt. El SR leerá la ruta del SRC -->
<img src="/assets/grafico-ventas-2023.jpg" class="img-fluid">
<!-- MAL: alt vacío en imagen que transmite información vital -->
<img src="/assets/mapa-evacuacion.png" alt="">La Solución Accesible: Código Recomendado
Toda imagen debe poseer un atributo alt descriptivo y conciso (no mayor a 100 caracteres). Si la imagen es puramente decorativa, se debe incluir el alt="" vacío explícitamente para silenciarla.
<!-- BIEN: Descripción concisa y relevante -->
<img src="/assets/grafico-ventas-2023.jpg" alt="Gráfico de barras mostrando un aumento del 20% en ventas durante 2023">
<!-- BIEN: Imagen decorativa explícitamente silenciada -->
<img src="/assets/adorno-esquina.png" alt="" role="presentation">Metodología de Verificación y Testing
Pruebas Manuales con Lectores de Pantalla
Con NVDA, presionar G para saltar entre imágenes. Si falta el alt, NVDA leerá la ruta del archivo (ej: "grafico-ventas-2023.jpg"). Si el alt existe, anunciará su contenido. Si es decorativa (alt=""), la imagen será completamente ignorada. Confirmar el comportamiento en VoiceOver (iOS) mediante swipe.
Inspección del Árbol de Accesibilidad
En Chrome DevTools, seleccionar la imagen y verificar en el panel Accessibility que el Name no sea la URL del archivo. Si la imagen es informativa, el nombre debe ser descriptivo. Si es decorativa, verificar que no exista en el árbol de accesibilidad (rol presentation).
Herramientas Automatizadas
Axe DevTools: la regla image-alt es una de las más confiables y detecta toda imagen sin atributo alt. WAVE marca imágenes sin alt con un ícono rojo de error. Limitación: Ninguna herramienta puede evaluar la calidad del texto alternativo (si es descriptivo o solo dice "imagen").
