# Imagens devem ter texto alternativo

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

WCAG 1.1.1 Conteúdo Não Textual · Nível A

Há imagens sem alternativa em texto, então quem usa leitor de tela não sabe o que elas mostram.

## O que esta regra verifica
Certifique-se de que elementos <img> tenham texto alternativo ou um 'role' igual a 'none' ou 'presentation'.

## Por que isso importa
O critério 1.1.1 da WCAG exige uma alternativa em texto para imagens com significado. Sem ela, quem usa leitor de tela não consegue saber qual produto uma foto mostra.

## Como corrigir
### Em qualquer site
1. Adicione uma descrição curta e específica ao texto alternativo de cada imagem no seu CMS ou template.
2. Descreva o que importa para quem compra: nome do produto, cor e o ângulo mostrado (por exemplo “Bolsa de lona verde-oliva, vista frontal”).
3. Imagens decorativas devem ter um atributo alt vazio (alt="") para que os leitores de tela as ignorem.

### Na Shopify
1. No admin da Shopify, abra Produtos > [produto] > Mídia, clique em cada imagem e preencha “Texto alternativo”. Para imagens de seções, abra Loja virtual > Temas > Personalizar e defina o texto alternativo da imagem nas configurações da seção.
2. Descreva o que importa para quem compra: nome do produto, cor e o ângulo mostrado (por exemplo “Bolsa de lona verde-oliva, vista frontal”).
3. Imagens decorativas devem ter um atributo alt vazio (alt="") para que os leitores de tela as ignorem.

### No WooCommerce e no WordPress
1. No WordPress, abra Mídia > Biblioteca, selecione cada imagem e preencha “Texto alternativo”. As imagens da galeria de produtos usam o mesmo campo.
2. Descreva o que importa para quem compra: nome do produto, cor e o ângulo mostrado (por exemplo “Bolsa de lona verde-oliva, vista frontal”).
3. Imagens decorativas devem ter um atributo alt vazio (alt="") para que os leitores de tela as ignorem.

## Como conferir a correção
- Analise de novo as páginas afetadas.
- Use um leitor de tela (VoiceOver: Cmd+F5 no Mac) para ouvir como as imagens de produto são anunciadas.

## Fontes
- Documentação da regra do axe-core (Deque): https://dequeuniversity.com/rules/axe/4.13/image-alt
- Entendendo a WCAG 1.1.1 (W3C): https://www.w3.org/WAI/WCAG22/Understanding/non-text-content