TL;DR (Too Long; Didn’t Read... o básicamente: mucho texto, dame el resumen rápido)
Si usas un <svg> inline para renderizar un ícono o gráfico que transmite datos clave, debes inyectarle role="img" y un aria-label (o etiqueta <title> interna). Sin esto, el motor del lector de pantalla lo ignorará o leerá balbuceos matemáticos de los vectores.
La opacidad nativa de los gráficos vectoriales escalables
El Criterio WCAG 1.1.1 (Contenido no textual) es implacable. Cuando usamos <img src="...">, el atributo alt salva el día. Pero cuando inyectamos el código SVG directamente en el DOM para poder cambiar su color con CSS (fill: currentcolor), perdemos esa propiedad nativa y entramos en territorio ARIA.
El patrón erróneo: Código Accesible Deficiente
Un icono de alerta crítica dibujado con SVG, invisible para quien no puede ver la pantalla.
<!-- MAL: Vector mudo e indescifrable -->
<div class="alert-box">
<svg viewBox="0 0 24 24">
<path d="M12 2L2 22h20L12 2z..."/>
</svg>
<span>El servidor se reiniciará en 5 minutos.</span>
</div>La Solución Accesible: Código Recomendado
Convertir el grupo de vectores matemáticos en una imagen semántica declarada programáticamente.
<!-- BIEN: Patrón robusto de SVG informativo -->
<svg role="img" aria-label="Advertencia Crítica" viewBox="0 0 24 24">
<path d="M12 2L2 22h20L12 2z..."/>
</svg>
<!-- BIEN: Si el SVG es solo decorativo, esconderlo explícitamente -->
<svg aria-hidden="true" viewBox="0 0 24 24">...</svg>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.
