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
- Adicione uma descrição curta e específica ao texto alternativo de cada imagem no seu CMS ou template.
- Descreva o que importa para quem compra: nome do produto, cor e o ângulo mostrado (por exemplo “Bolsa de lona verde-oliva, vista frontal”).
- Imagens decorativas devem ter um atributo alt vazio (alt="") para que os leitores de tela as ignorem.
Na Shopify
- 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.
- Descreva o que importa para quem compra: nome do produto, cor e o ângulo mostrado (por exemplo “Bolsa de lona verde-oliva, vista frontal”).
- Imagens decorativas devem ter um atributo alt vazio (alt="") para que os leitores de tela as ignorem.
No WooCommerce e no WordPress
- No WordPress, abra Mídia > Biblioteca, selecione cada imagem e preencha “Texto alternativo”. As imagens da galeria de produtos usam o mesmo campo.
- Descreva o que importa para quem compra: nome do produto, cor e o ângulo mostrado (por exemplo “Bolsa de lona verde-oliva, vista frontal”).
- 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.
Como o FixReports detecta o problema
Nossa análise executa a regra image-alt do axe-core em um navegador Chrome real em cada página testada e informa cada elemento reprovado com a página, o código e, quando for o caso, uma captura de tela.
Um teste automatizado confirma que esse problema específico existe. Ele não consegue dizer se o restante da página é acessível: algumas barreiras só aparecem quando uma pessoa verifica a página.