Icono SVG con significado pero sin nombre

WCAG 1.1.1 (A) · EN 301 549 9.1.1.1

Hay un SVG marcado como imagen (role="img") o con intención de tener nombre, pero sin nombre accesible.

Por qué importa

Un SVG que transmite información y no tiene nombre es invisible para un lector de pantalla. Los iconos puramente decorativos no son el problema; el problema es el icono que sí significa algo, como el candado del pago seguro o la marca de «producto sostenible».

Cómo se arregla

Si el icono aporta información, añade un <title> dentro del SVG o un aria-label. Si es decorativo, márcalo con aria-hidden="true" y asegúrate de que el texto visible ya dice lo necesario.

<svg role="img" viewBox="0 0 24 24"><path d="…"/></svg>

<svg role="img" aria-label="Pago seguro" viewBox="0 0 24 24"><path d="…"/></svg>

<!-- Decorativo, junto a un texto que ya lo explica -->
<svg aria-hidden="true" viewBox="0 0 24 24"><path d="…"/></svg> Envío gratis

Relacionado

• Imágenes sin texto alternativo
• Texto alternativo sin información
• Botón de imagen sin texto alternativo
• Zona de mapa de imagen sin nombre