TL;DR (Too Long; Didn’t Read... o básicamente: mucho texto, dame el resumen rápido)
Si usas un <div>, <span> o <svg> y le inyectas role="img", has asumido la responsabilidad de proveer su significado. Sin un aria-label acompañante, el lector de pantalla dirá "Imagen", y la persona usuaria no tendrá idea de qué información se oculta en ella.
La responsabilidad de sobrescribir el DOM
Las imágenes cargadas mediante CSS (background-image) o los vectores SVG inline carecen del atributo nativo alt. Para hacerlos accesibles, los desarrolladores les asignan role="img". Pero esta es solo la mitad del trabajo. Para cumplir con la WCAG 1.1.1 (Contenido no textual), el rol debe estar aparejado con una etiqueta.
El patrón erróneo: Código Accesible Deficiente
El sistema de asistencia reconoce el rol de imagen, pero se detiene en seco porque no hay un Accessible Name disponible en el árbol.
<!-- MAL: Promesa incumplida de semántica -->
<div class="icon-warning" role="img"></div>
<!-- MAL: SVG marcado como imagen sin texto asociado -->
<svg role="img" viewBox="0 0 100 100">...</svg>La Solución Accesible: Código Recomendado
Si la imagen transmite información, usar aria-label. Si es puramente decorativa, omitir role="img" o usar role="presentation" y aria-hidden="true".
<!-- BIEN: Imagen semántica completa mediante ARIA -->
<div class="icon-warning"
role="img"
aria-label="Advertencia de seguridad crítica">
</div>Metodología de Verificación y Testing
Pruebas Manuales con Lectores de Pantalla
Con NVDA, presionar B para saltar entre botones. Verificar que cada botón anuncie un nombre descriptivo (no solo "Botón"). En TalkBack (Android), navegar mediante swipe y confirmar que el anuncio incluya el propósito del control.
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.
