Porque é que o Texto Alternativo Desaparece
A ausência de texto alternativo raramente é deliberada. As causas mais comuns:
- Uploads no CMS sem campo obrigatório. A maioria dos editores de conteúdo permite publicar uma imagem sem nunca pedir texto alternativo, pelo que este fica silenciosamente vazio.
- Marcação copiada e colada. Uma tag
<img>copiada de outra parte do site (ou de um exemplo de uma biblioteca de componentes) traz consigo o texto alternativo - ou a falta dele - do original. - Componentes de ícones tratados como decoração por predefinição. As bibliotecas de ícones SVG e as icon fonts frequentemente não incluem um nome acessível a menos que o adicione explicitamente, e é fácil presumir que o componente envolvente trata disso quando não trata.
- Imagens com significado marcadas erradamente como decorativas, ou vice-versa. Inverter esta distinção é quase tão comum como esquecê-la por completo.
Como Identificar Cada Ocorrência em Falta
Esta é uma das poucas verificações que o Scanverra pontua diretamente em vez de apenas apresentar. Durante uma verificação Browser Test, o Scanverra executa Array.from(document.querySelectorAll("img")).filter((img) => !img.alt) contra a sua página renderizada e reporta cada resultado como um problema distinto de "Atributo alt em falta", listando até aos primeiros 10 por verificação juntamente com a origem da imagem para que a encontre rapidamente. Uma auditoria real do Lighthouse image-alt, separada, também contribui para a sua pontuação de acessibilidade - pelo que um problema de alt em falta aparece em dois locais, não numa única suposição.
Como Corrigir
1. Escreva uma descrição real para imagens com significado
Descreva o que a imagem transmite no contexto, não o que ela literalmente é - dispense "imagem de" ou "fotografia de", pois os leitores de ecrã já a anunciam como uma imagem:
1<img
2 src="/keyboard-side-profile.webp"
3 alt="Mechanical keyboard with low-profile keys and RGB backlighting"
4 width={480}
5 height={320}
6/>2. Marque imagens puramente decorativas como vazias, não em falta
1<img src="/divider-flourish.svg" alt="" role="presentation" />3. Dê aos ícones funcionais um nome acessível para a ação que executam
1<button aria-label="Search">
2 <SearchIcon aria-hidden="true" />
3</button>4. Não sobrecarregue o texto alternativo com palavras-chave
Um texto alternativo que soa a uma sequência de palavras-chave de SEO em vez de uma descrição real falha tanto o propósito de acessibilidade (não é útil para quem usa um leitor de ecrã) como, na prática, não faz nada pelo posicionamento - escreva-o para a pessoa que não consegue ver a imagem.
Como o Scanverra Deteta Problemas de Texto Alternativo
O Browser Test do Scanverra inspeciona genuinamente cada elemento <img> renderizado na página e pontua as ocorrências de alt em falta como problemas de acessibilidade reais, limitado aos primeiros 10 por verificação - não é um campo meramente informativo, conta para a sua pontuação.