Não há consenso sobre o número de caracteres para fazer um texto alternativo de imagens, mas existem boas práticas para deixá-lo mais funcional.
Atualização março/2024: Fui informado que estão usando este post para afirmar que o limite para texto alternativo é de 100 caracteres. Reforço nesta atualização que esse número não representa uma regra, e sim um conforto para usuários em um cenário muito específico (usuários de NVDA no computador). Não há limites de caracteres para o atributo alt, mas as boas práticas internacionais recomendam um texto sucinto, e que se há necessidade de descrição longa devemos usar outras técnicas.
Em uma rápida busca na Web encontramos uma série de orientações quanto ao limite de caracteres no atributo de texto alternativo. Esses valores variam de 100 a 250 caracteres, mas por que essas variações e qual o número recomendado?
Essa dúvida surgiu em uma das conversas com os alunos do curso de extensão de design de interfaces acessíveis. Eu gosto de coletar as dúvidas dos alunos para tentar responder na próxima aula.
Apenas para lembrar, o texto alternativo é utilizado em elementos de imagem por meio do atributo “alt“, que serve para descrever a imagem para tecnologia assistiva.
A documentação do W3C não limita a quantidade de caracteres, ela apenas recomenda que seja usada uma pequena sentença para descrever a imagem, e caso não seja possível, utilizar outras técnicas para fazer uma descrição longa.
Esse número de caracteres está relacionado ao suporte de outras tecnologias, como leitores de tela e até ferramentas de busca. Apesar de encontrar diversos artigos apontando que o Google exibe por volta de 125 caracteres, não encontrei nenhuma documentação oficial do Google referente a isso. Porém o Google é enfático sobre a importância de texto alternativo para imagens.
Com relação a leitores de tela, decidi fazer alguns testes no meu computador. Notei que ao utilizar textos alternativos longos o leitor de tela faz uma pausa como se estivesse pulando uma linha quando ele atinge um limite de caracteres e continua a leitura. No NVDA 2020.2 esse limite foi de 100 caracteres antes da pausa e no JAWS 2020 o limite foi de 155. Nos leitores de tela para dispositivos móveis não houve pausa em textos alternativos longos. Não consegui fazer em plataformas da Apple, então se alguém tiver números diferentes, me avisem que atualizo o post.
Esse tipo de situação não é uma barreira, mas deixa a navegação um pouco menos confortável. Sendo assim, prefira fazer uso de textos alternativos curtos, de até 100 caracteres no máximo.
Para descrições mais longas utilize o atributo “aria-describedby“. Seu uso requer o texto em um outro elemento, assim o leitor de tela lê o texto alternativo da imagem e na sequência a descrição longa. Não use “aria-label” em imagens pois alguns leitores de tela podem ignorar o texto do atributo “alt” e podem ler somente o texto de “aria-label“. O atributo “aria-describedby” pode ser usado como no exemplo a seguir:
<img src="foto.jpg" alt="Mona Lisa" aria-describedby="desc"> <p id="desc">Quadro da Mona Lisa durante uma exibição no Louvre para a comemoração de um novo centenário da obra de Leonardo da Vinci</p>
Para conseguir transmitir uma mensagem em 100 caracteres, considere as seguintes dicas:
- Seja sucinto. Foco na objetividade
- Não utilize “Foto de…”, “Imagem de…” antes da descrição. Essa informação já é lida pelo leitor de tela
- Faça uso de “aria-describedby” em outro elemento para fornecer uma descrição mais detalhada
Crédito da ilustração: Website vector created by stories – www.freepik.com
