Qué revisa esta regla
Garantiza que los elementos <img> tienen texto alternativo o un rol de none o presentation.
Por qué es importante
WCAG 1.1.1 exige un texto alternativo para las imágenes con significado. Sin él, una persona que usa un lector de pantalla no puede saber qué producto muestra una foto.
Cómo corregirlo
En cualquier sitio web
- Agrega una descripción breve y específica en el texto alternativo de cada imagen, en tu CMS o en tu plantilla.
- Describe lo que le importa a un comprador: el nombre del producto, el color y el ángulo que se muestra (por ejemplo, 'Bolso de lona verde oliva, vista frontal').
- Las imágenes decorativas deben tener un atributo alt vacío (alt="") para que los lectores de pantalla las omitan.
En Shopify
- En el panel de administración de Shopify, abre Productos > [producto] > Multimedia, haz clic en cada imagen y completa 'Texto alternativo'. Para las imágenes de las secciones, abre Tienda online > Temas > Personalizar y define el texto alternativo de la imagen en la configuración de la sección.
- Describe lo que le importa a un comprador: el nombre del producto, el color y el ángulo que se muestra (por ejemplo, 'Bolso de lona verde oliva, vista frontal').
- Las imágenes decorativas deben tener un atributo alt vacío (alt="") para que los lectores de pantalla las omitan.
En WooCommerce y WordPress
- En WordPress, abre Medios > Biblioteca, selecciona cada imagen y completa 'Texto alternativo'. Las imágenes de la galería de productos usan el mismo campo.
- Describe lo que le importa a un comprador: el nombre del producto, el color y el ángulo que se muestra (por ejemplo, 'Bolso de lona verde oliva, vista frontal').
- Las imágenes decorativas deben tener un atributo alt vacío (alt="") para que los lectores de pantalla las omitan.
Cómo comprobar la corrección
- Vuelve a analizar las páginas afectadas.
- Usa un lector de pantalla (VoiceOver: Cmd+F5 en Mac) para escuchar cómo se anuncian las imágenes de producto.
Cómo lo detecta FixReports
Nuestro análisis ejecuta la regla image-alt de axe-core en un navegador Chrome real en cada página que prueba, y reporta cada elemento que no la cumple con su página, su marcado y, cuando aplica, una captura de pantalla.
Una prueba automatizada confirma que este problema específico está presente. No puede determinar si el resto de la página es accesible: algunas barreras solo aparecen cuando una persona revisa la página.