# Las imágenes deben tener texto alternativo

<https://www.fixreports.com/es/issues/image-alt>

WCAG 1.1.1 Contenido no textual · Nivel A

Hay imágenes sin texto alternativo, así que los usuarios de lectores de pantalla no saben qué muestran.

## 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
1. Añade una descripción breve y concreta en el texto alternativo de cada imagen, en tu CMS o en tu plantilla.
2. 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»).
3. Las imágenes decorativas deben tener un atributo alt vacío (alt="") para que los lectores de pantalla las omitan.

### En Shopify
1. 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.
2. 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»).
3. Las imágenes decorativas deben tener un atributo alt vacío (alt="") para que los lectores de pantalla las omitan.

### En WooCommerce y WordPress
1. 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.
2. 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»).
3. 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.

## Fuentes
- Documentación de la regla de axe-core (Deque): https://dequeuniversity.com/rules/axe/4.13/image-alt
- Comprender WCAG 1.1.1 (W3C): https://www.w3.org/WAI/WCAG22/Understanding/non-text-content