Qué comprueba 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, un usuario de lector de pantalla no puede saber qué producto muestra una foto.
Cómo corregirlo
En cualquier web
- Añade una descripción breve y concreta 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 ve (por ejemplo, «Bolso tote de lona en 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 rellena «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 ve (por ejemplo, «Bolso tote de lona en 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 rellena «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 ve (por ejemplo, «Bolso tote de lona en 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 oír cómo se anuncian las imágenes de los productos.
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, e informa de cada elemento que no la cumple con su página, su marcado y, cuando procede, una captura de pantalla.
Una prueba automatizada confirma que este problema concreto está presente. No puede determinar si el resto de la página es accesible: algunas barreras solo se detectan cuando una persona revisa la página.