Resposta rápida
O texto alternativo (alt text) é uma descrição escrita de uma imagem, guardada no atributo HTML alt da imagem. Um leitor de ecrã anuncia-o em vez de mostrar a imagem, e o navegador apresenta-o se a imagem não carregar — é um equivalente textual, não uma legenda nem um rótulo.
O que é o texto alternativo?
O texto alternativo existe porque uma imagem comunica pela visão. Quem não consegue ver a imagem precisa que esse mesmo significado lhe chegue por outra via. O texto alternativo é essa outra via — um equivalente textual, não uma legenda nem um rótulo.
É por isso que o texto alternativo tem de descrever o significado, e não apenas o conteúdo. A fotografia de um gráfico que mostra o crescimento das vendas precisa de um texto alternativo que diga que as vendas cresceram, e não que diga "uma linha a subir". A imagem transmite um facto. O texto alternativo tem de transmitir esse mesmo facto.
O que é o atributo alt (alt="")?
O atributo alt é a propriedade HTML que contém efetivamente o texto alternativo. Escreve-se diretamente na etiqueta da imagem, assim:
<img src="quarterly-report.png" alt="Gráfico de barras que mostra um aumento da receita de 12% em relação ao trimestre anterior">O atributo e o texto que ele contém são duas coisas diferentes. "Texto alternativo" é o conteúdo a que as pessoas normalmente se referem quando usam o termo. O atributo alt é o recipiente que o guarda. Essa distinção importa num caso específico: quando uma imagem é puramente decorativa, a solução não é omitir o atributo — é incluí-lo sem nada dentro, como alt="". Um atributo vazio diz ao leitor de ecrã "esta imagem é decorativa, ignora-a". Um atributo em falta nada lhe diz, pelo que alguns leitores de ecrã recorrem a ler o nome do ficheiro.
Porque é importante o texto alternativo?
O texto alternativo é a única coisa entre um utilizador não visual e o significado de uma imagem. Sem ele, esse significado simplesmente não lhe chega — não de forma degradada, mas de todo.
Essa falha manifesta-se de maneiras concretas. Uma fotografia de produto sem texto alternativo significa que quem usa um leitor de ecrã para comprar online não consegue saber o que está prestes a adquirir. Um gráfico sem texto alternativo significa que um analista cego a ler um relatório não faz ideia do que os dados mostram. Um botão de "submeter" construído a partir de um ícone sem texto alternativo faz com que o leitor de ecrã anuncie "botão" sem qualquer indicação do que faz — transformando uma ação de um clique numa adivinha.
O texto alternativo tem também uma dimensão legal. O requisito das WCAG relativo a alternativas textuais é um dos critérios mais frequentemente invocados em queixas e ações judiciais de acessibilidade, precisamente por a ausência de texto alternativo ser fácil de detetar e difícil de defender. Essa exposição legal é, porém, um efeito secundário — a razão de fundo pela qual o texto alternativo importa é ser o mecanismo que torna o significado de uma imagem acessível a quem não a consegue ver.
Quem beneficia do texto alternativo?
O texto alternativo é escrito para quem usa leitores de ecrã, mas o seu alcance vai além desse grupo, e cada grupo beneficia por uma razão diferente.
Utilizadores cegos e com baixa visão que usam leitores de ecrã
Obtêm o benefício principal: um equivalente falado da imagem, entregue exatamente no ponto da página onde a imagem se encontra.
Utilizadores com as imagens desativadas
Comum em ligações lentas ou tarifadas ao volume — veem o texto alternativo apresentado como texto visível no lugar onde a imagem teria carregado.
Utilizadores com deficiências cognitivas ou de atenção
Recorrem por vezes a ferramentas de texto para voz ainda que vejam o ecrã; o texto alternativo dá a essas ferramentas algo rigoroso para ler em vez de nada.
Motores de busca
Usam o texto alternativo para perceber o que uma imagem mostra, já que um rastreador não interpreta píxeis como uma pessoa — um benefício secundário, não a finalidade do texto alternativo.
Todos os utilizadores, pontualmente
Beneficiam quando uma imagem não carrega — uma ligação quebrada, um servidor lento, um erro no caminho do ficheiro — porque é o texto alternativo que surge no lugar da imagem em vez de uma caixa vazia.
Como utilizam os leitores de ecrã o texto alternativo?
Um leitor de ecrã lê a página através da sua árvore de acessibilidade, e não através do que é desenhado visualmente. Quando quem usa um leitor de ecrã chega a uma imagem — por tabulação, se for uma ligação ou botão, ou navegando pelo conteúdo — o leitor anuncia o valor do atributo alt em vez da própria imagem.
A maioria dos leitores de ecrã anuncia também que o elemento é uma imagem antes de ler o texto alternativo, dizendo algo como "imagem, pôr do sol sobre uma praia" em vez de apenas "pôr do sol sobre uma praia". É por isso que um bom texto alternativo nunca começa por "imagem de" ou "fotografia de" — o leitor de ecrã já disse "imagem", pelo que repeti-lo duplica o anúncio sem benefício algum.
Se o atributo alt estiver vazio (alt=""), a maioria dos leitores de ecrã ignora completamente a imagem e passa ao conteúdo seguinte, tratando-a como decorativa. Se o atributo alt estiver totalmente ausente, o comportamento é menos consistente: alguns leitores anunciam o nome do ficheiro, que é exatamente o resultado confuso e sem sentido que um texto alternativo vazio ou descritivo serve para evitar.
Como se escreve um bom texto alternativo?
Um bom texto alternativo responde a uma pergunta: o que comunica esta imagem que um utilizador não visual perderia de outro modo? Tudo o resto decorre daí.
Comece pela função, não pela aparência
A fotografia de um produto não é apenas "uma chaleira vermelha" — consoante o contexto, o detalhe útil pode ser a etiqueta de preço visível na imagem, o desenho do bico de vazamento que está a ser demonstrado, ou nada mais do que "chaleira elétrica vermelha".
Seja conciso
Não existe um limite oficial de caracteres, mas alguns leitores de ecrã truncaram historicamente anúncios muito longos. Uma ou duas frases costumam bastar; o detalhe mais extenso pertence ao texto próximo, não ao atributo alt.
Ajuste a descrição à finalidade da imagem
A mesma fotografia de uma ponte pode precisar de "vista aérea da ponte Golden Gate ao pôr do sol" num blogue de viagens, mas apenas "ponte Golden Gate" — ou nada — como pequeno cabeçalho decorativo.
Nunca o deixe genérico
"Image123.jpg", "foto" ou "gráfico" diz ao utilizador que ali está algo sem lhe dizer o quê — muitas vezes pior do que não ter texto alternativo, pois gasta atenção em algo sobre o qual nada se pode fazer.
Que tipos de imagens precisam de texto alternativo?
Nem todas as imagens precisam do mesmo tipo de texto alternativo, porque nem todas desempenham a mesma função na página. As WCAG agrupam as imagens em algumas categorias funcionais, e cada uma altera o que significa um "bom" texto alternativo.
Imagens informativas
Transmitem conteúdo específico — uma fotografia, ilustração ou captura de ecrã — que acrescenta significado para lá da decoração. A captura de um menu de definições precisa de um texto alternativo que nomeie o menu e a definição em causa, e não um genérico "captura de ecrã do software".
Imagens funcionais
Funcionam como controlo — um botão, ligação ou ícone que desencadeia uma ação. O texto alternativo deve descrever a ação ou o destino, não a aparência: "Pesquisar", e não "lupa".
Imagens decorativas
Acrescentam estilo visual sem conteúdo informativo. Estas devem levar um alt="" vazio, nem texto descritivo nem atributo em falta — dizendo ao leitor de ecrã para as ignorar em silêncio.
Imagens complexas
Um gráfico ou diagrama transporta normalmente mais informação do que um atributo alt curto consegue conter. Dê um breve resumo no texto alternativo e coloque o detalhe completo numa tabela de dados ou num parágrafo próximo.
Que exemplos existem de bom texto alternativo?
Ver a mesma imagem bem e mal tratada torna a diferença concreta.
Uma fotografia de produto numa página de comércio eletrónico
FRACO — alt="shoe.jpg"
MELHOR — alt="Sapatos oxford de homem em pele castanha, vista lateral"
A versão fraca dá a quem usa um leitor de ecrã apenas um nome de ficheiro. A versão melhor diz-lhe exatamente o que veria.
Um botão "fechar" apenas com ícone numa janela modal
FRACO — alt="ícone X"
MELHOR — alt="Fechar caixa de diálogo"
A versão fraca descreve a forma do ícone. A versão melhor descreve o que premi-lo realmente faz.
Um separador decorativo entre secções de um blogue
FRACO — alt="separador decorativo de linha ondulada verde"
MELHOR — alt=""
A versão fraca obriga a ouvir até ao fim algo sem qualquer informação. A versão melhor permite que o leitor de ecrã a ignore por completo.
Um gráfico de barras com o tráfego do sítio por mês
FRACO — alt="gráfico"
MELHOR — alt="Gráfico de barras: o tráfego subiu de forma constante de janeiro a junho, com pico em junho"
A versão melhor dá a conclusão no texto alternativo e remete para uma tabela de dados adjacente com os números completos.
Quais são os erros mais comuns no texto alternativo?
Omitir por completo o atributo alt
Pior do que deixá-lo vazio, porque um atributo em falta leva alguns leitores de ecrã a anunciar o nome do ficheiro em vez de permanecerem em silêncio.
Escrever "imagem de" ou "fotografia de"
O leitor de ecrã já anuncia que o elemento é uma imagem antes de ler o texto alternativo, pelo que isto repete informação já ouvida.
Encher o texto alternativo de palavras-chave para SEO
Falha perante o utilizador de leitor de ecrã que deveria servir, e os motores de busca passaram a reconhecer melhor este padrão como manipulação e não como descrição.
Dar texto alternativo descritivo a imagens decorativas
Uma textura de fundo ou um grafismo ornamental precisa de alt="" para que o leitor de ecrã a ignore em vez de interromper o fluxo de leitura.
Duplicar no atributo alt uma legenda visível
Se a legenda já diz o que a imagem mostra, um texto alternativo idêntico faz com que o leitor de ecrã anuncie a mesma frase duas vezes seguidas.
Escrever um texto alternativo tão longo que enterra a ideia
Uma imagem precisa normalmente de uma ideia clara transmitida de forma breve, e não de um parágrafo — sobretudo porque alguns leitores de ecrã podem cortar anúncios muito longos.
Texto alternativo, descrição de imagem e legenda
Estes três termos são usados indistintamente, mas cada um serve um leitor diferente, vive num sítio diferente da página e desempenha uma função diferente.
| Texto alternativo, descrição de imagem e legenda | Texto alternativo | Descrição de imagem | Legenda |
|---|---|---|---|
| A quem se destina | A quem usa leitores de ecrã e a quem não consegue carregar as imagens | A quem usa leitores de ecrã, quando a imagem é complexa demais para um atributo alt curto | A todos os leitores, videntes e não videntes |
| Onde se encontra | Dentro do atributo HTML alt, invisível para utilizadores videntes | No texto envolvente, numa página ligada ou numa referência aria-describedby | Visível na página, logo abaixo ou ao lado da imagem |
| O que faz | Substitui a própria imagem | Desenvolve detalhe que o atributo alt é curto demais para conter | Acrescenta contexto, crédito ou comentário que a imagem sozinha não mostra |
| Extensão | Normalmente uma frase ou menos | Tão longa quanto o conteúdo realmente exigir | Variável, mas tipicamente visível e fácil de percorrer |
A sobreposição gera confusão real porque a legenda é visível para todos, incluindo quem usa um leitor de ecrã e a alcança como texto corrente — o que leva por vezes a supor que a legenda dispensa o texto alternativo. Não dispensa. O leitor de ecrã anuncia o atributo alt na própria imagem e a legenda separadamente, como texto próprio; omitir o atributo alt por existir uma legenda significa apenas que a imagem é anunciada sem nada, ou com um nome de ficheiro, até o leitor chegar à legenda momentos depois.
Como definem as WCAG o texto alternativo?
As WCAG tratam diretamente do texto alternativo no Critério de Êxito 1.1.1, Conteúdo não textual, de nível A — o nível base de conformidade e o mais consistentemente referido nas leis e normas de acessibilidade. O critério exige que todo o conteúdo não textual tenha uma alternativa textual que sirva a mesma finalidade, com uma lista curta de exceções: conteúdo puramente decorativo, CAPTCHA (que precisa de um método de teste alternativo e não de texto alternativo) e conteúdo em que o próprio texto alternativo invalidaria o teste.
A redação das WCAG importa aqui porque não exige apenas "uma descrição" — exige uma alternativa textual que sirva uma finalidade equivalente. Essa é uma fasquia mais alta do que uma descrição visual literal. É por isso que "fotografia de uma mulher a sorrir" costuma ser o texto alternativo errado para uma fotografia cuja função real na página é apresentar o testemunho de um cliente — a finalidade equivalente transmite-se nomeando quem fala e o que disse, não descrevendo a fotografia.
As WCAG são uma norma técnica, não uma lei em si. Serem ou não legalmente obrigatórias depende da lei ou regulamento em causa e da jurisdição aplicável — algumas leis remetem diretamente para elas, outras só lhes ficam ligadas através da jurisprudência ou das políticas de contratação. O que é transversal a quase todas é que o requisito de alternativas textuais do 1.1.1 surge como expectativa de base, razão pela qual vale a pena tratá-lo como requisito prático mesmo onde nenhuma lei o enuncie pelo nome.
Perguntas frequentes
Todas as imagens precisam de um atributo alt. O que vai lá dentro depende da imagem: texto descritivo para imagens informativas ou funcionais, e um valor vazio (alt="") para as puramente decorativas. Em nenhum dos casos se deve omitir o atributo.
Longo o suficiente para transmitir o significado da imagem, curto o suficiente para se perceber de imediato — normalmente uma frase ou menos. Se a imagem exigir mais explicação, coloque o detalhe adicional no texto próximo em vez de esticar o atributo alt.
Pode ajudar, já que os motores de busca o usam para perceber o conteúdo da imagem. Mas o texto alternativo escrito sobretudo para palavras-chave em vez de rigor tende a ler-se mal tanto para os utilizadores de leitores de ecrã que deveria servir como para os motores de busca que pretende influenciar.
O comportamento varia consoante o leitor de ecrã, mas um atributo alt em falta significa muitas vezes que o leitor recorre a ler o nome do ficheiro, ou anuncia a imagem sem qualquer descrição — deixando um utilizador não visual sem ideia do que encontrou.
Não. A legenda é texto visível apresentado junto à imagem para todos os leitores. O texto alternativo é invisível para utilizadores videntes e existe especificamente para substituir a imagem para quem não a consegue ver. Uma imagem pode ter ambos, e muitas vezes deve.
Não — devem incluir o atributo com um valor vazio, alt="", em vez de o omitir. É o valor vazio que diz de forma fiável ao leitor de ecrã para ignorar a imagem; um atributo em falta não garante o mesmo resultado.
