O uso correto do texto alternativo

Traduo livre do texto Appropriate Use of Alternative Text [http://webaim.org/techniques/alttext/]

O texto alternativo , como o nome diz, uma alternativa aos elementos no-textuais de
uma pgina web. Adicionar o texto alternativo em imagens o primeiro princpio na
acessibilidade.

No entanto, uma simples verificao por algumas pginas mostra que, quando o atributo
no sumariamente ignorado, apresenta implementaes incorretas, equivocadas, e falhas,
no cumprindo sua funo.

Como diversas outras recomendaes em acessibilidade, a utilizao correta do texto

alternativo depende menos do conhecimento de cdigo e da utilizao de ferramentas e
mais do conhecimento humano, da sensibilidade e interpretao pessoal daquele
profissional que inseriu a imagem na pgina.

As orientaes que se seguem visam ao esclarecimento e melhoria da qualidade dos

textos alternativos. Os exemplos a seguir so direcionados ao seu uso em imagens, porm
os princpios podem ser aplicados a qualquer outra mdia de contedo no-textual na
internet.

1. A funo do texto alternativo

O principio do texto alternativo que os sistemas atuais no tm capacidade de analisar e

determinar o que uma imagem representa no contexto de uma pgina. Resta a equipe que
alimenta a pgina, o fator humano, determinar o contedo e a funo de uma dada imagem
na pgina.

As funes bsicas de um texto alternativo so:

Permitir a traduo do contedo/funo da imagem pelos leitores de tela utilizados

por pessoas portadoras de deficincia visual;

Ser mostrado no lugar da imagem em navegadores-texto ou em navegadores que,

por sua preferncia, o usurio desabilitou o uso de imagem;

Prover um sentido e descrio a imagens para que os motores de busca possam

identificar e classificar.

1
O texto alternativo pode ser apresentado de duas maneiras:

Dentro do elemento IMG atravs do atributo ALT;

No contexto de seu entorno na pgina.

Isso significa que o atributo ALT no o nico mecanismo que prov contedo e funo a
uma imagem. A informao pertinente a imagem pode ser fornecida por um texto
adjacente. Em alguns casos, quando o contedo ou funo da imagem no pode ser
representado de forma sucinta pode ser fornecido um link ou o atributo LONGDESC, com
referncia a uma descrio mais detalhada.

Mas toda a imagem deve ter o atributo ALT mesmo que vazio ou nulo isto um
requisito dos padres web. Imagens sem o atributo ALT so inacessveis. Quando os leitores
de tela encontram uma imagem sem o atributo ALT eles extraem a informao de outro
lugar como o nome do arquivo da imagem, suas dimenses ou sua localizao - dados
que no representam a funo e contedo da imagem.

O atributo ALT deve possuir as seguintes caractersticas:

Ser acurado e equivalente, representar o mesmo contedo e funo da imagem;

Ser sucinto, a funo e/ou contedo devem ser descritas de forma sinttica, poucas
palavras ou uma frase curta.

No ser redundante ou prover a mesma informao j apresentada no contexto da

imagem.

No iniciar o texto alternativo com imagem de..., grfico de... ou foto de...
para descrever a imagem. desnecessria e redundante a informao de que
aquele contedo apresentado uma imagem.

2. Utilizao do atributo ALT - Contexto

O contexto em que a imagem se apresenta determinante para o texto alternativo. As

opes so vastas em qualquer imagem e a escolha mais adequada depende do contexto
em que essa imagem se encontra. A seguir alguns exemplos mais comuns do uso do
atributo ALT.

2
Exemplo 1

Herdeiro de uma famlia de cafeicultores prsperos na cidade de Ribeiro Preto; pde

se dedicar aos estudos da cincia e da mecnica vivendo em Paris. Ao contrrio de
outros aeronautas da poca, Santos Dumont, deixava suas pesquisas como domnio
pblico e sem registrar patentes.

Trecho de texto sobre Santos Dumont na Wikipedia - http://pt.wikipedia.org/wiki/Santos_Dumont

Qual seria o texto alternativo mais adequado para essa imagem?

1. "Foto de Santos Dumont"

2. Santos Dumont, pai da aviao.
3. Um atributo ALT vazio (alt="")
4. "Santos Dumont"

O primeiro passo para determinar o texto alternativo para uma imagem ver se a imagem
apresenta contedo e funo. Na maioria dos casos a imagem s apresenta uma funo se
contiver um link. A imagem acima no tem funo por no apresentar link. Determinar se a
imagem apresenta contedo bem mais difcil. No caso, o contedo da imagem informa
que aquele Santos Dumont.

O segundo passo avaliar qual das alternativas se ajusta melhor as caractersticas que um
texto alternativo no atributo ALT deve possuir. Nesse caso, a opo 4 (Santos Dumont) a
melhor alternativa.

A opo 1 descreve, desnecessariamente, a imagem como uma imagem. A opo 2 prov

informaes extras que no esto contidas da imagem e, por fim, a opo 3 no
apropriada pois no h no contedo uma informao prxima de que se trata a imagem.

3
Exemplo 2

Santos Dumont

Herdeiro de uma famlia de cafeicultores prsperos na cidade de Ribeiro Preto; pde

se dedicar aos estudos da cincia e da mecnica vivendo em Paris. Ao contrrio de
outros aeronautas da poca, Santos Dumont, deixava suas pesquisas como domnio
pblico e sem registrar patentes.

Trecho de texto sobre Santos Dumont na Wikipedia - http://pt.wikipedia.org/wiki/Santos_Dumont

Qual seria o texto alternativo mais adequado para o exemplo 2?

1. "Santos Dumont"
2. Um atributo ALT vazio (alt="")
3. "Imagem"
4. A imagem no necessita um atributo ALT

Se o contedo da imagem est tambm representado no texto entorno, a adio de um

atributo ALT vazio suficiente. Nesse caso, o contedo da imagem encontra-se tambm no
texto prximo, sendo assim a opo 2, um atributo ALT vazio, a melhor opo. A opo 1
ser redundante, a opo 3 prov uma informao desnecessria, e a opo 4 torna a
imagem inacessvel, no devendo ser utilizada em hiptese alguma.

4
Exemplo 3

Nesse quadro se demonstra que a cor um dos elementos mais valorizados por Tarsila
do Amaral. A artista sempre procurou a cor verdadeiramente brasileira ou caipira o rosa
e azul claros, ou o verde e amarelo do nosso colorido tropical.

Qual seria o texto alternativo mais adequado para essa imagem?

1. "Tarsila do Amaral"

2. "Pintura de Tarsila do Amaral

3. "Quadro - Estrada de Ferro Central do Brasil"

4. Pintura do Movimento Pau-Brasil, apresentando a composio geometrizada e o uso

intenso da cor.

5. Estrada de Ferro Central do Brasil - Nessa pintura, Tarsila do Amaral mostra o

contraste das paisagens rurais e estradas de ferro da So Paulo industrial. A artista
mistura, na mesma tela, a herana dos cenrios abertos do campo e o as cidades
modernas.

Essa imagem demanda um cuidado maior do texto alternativo. A imagem no um link e o

texto de entorno no corresponde ao contedo da imagem. A melhor escolha pode no ser
perfeitamente adequada pelo dado contexto limitado.

Opo 1 (Tarsila do Amaral) possivelmente no a melhor opo, no clarificando o

contedo da imagem. Opo 2 ("Pintura de Tarsila do Amaral) seria mais adequado, nesse
caso interessante descrever que a imagem uma pintura, e no uma foto por exemplo.

5
Mas, de fato, no adiciona muito ao contedo. A opo 3 prov mais informao,
identificando o quadro, na maioria dos casos apresenta-se como a mais apropriada.

A opo 4 apropriada se o objetivo da imagem e do texto de exemplificar alguma

tcnica artstica e o contedo da imagem em si no importante.

Por fim, a opo 5 uma alternativa apropriada se uma descrio profunda da pintura est
sendo realizada. No entanto, muito longa e o texto alternativo poderia facilmente ser
transferido para o texto de entorno.

3. Utilizao do atributo ALT - imagens com funo

As imagens, alm de contedo, podem apresentar funes, como links.

Exemplo 4

Santos Dumont

Nesse caso a imagem um link. Qual seria o texto alternativo mais adequado para essa
imagem?

1. Um atributo ALT vazio (alt="")

2. "Artigo sobre Santos Dumont na Wikipedia
3. "Leia mais"
4. "Santos Dumont"

Como a imagem um link, ela possui uma funo que deve estar caracterizada no texto
alternativo. No h texto adjacente que descreva a funo, que assim deve ser descrito
pelo atributo ALT. Assim, a opo 2 a melhor escolha, apesar das palavras Santos

6
Dumont serem redundantes com o texto que segue. Nesse caso uma pequena redundncia
necessria para descrever de melhor forma a funo da imagem.

A opo 1 no adequada, uma imagem com um link nunca deve ter um atributo ALT vazio
ou nulo, a menos que a funo seja caracterizada por um texto escrito no mesmo link. O
leitor de tela tenta codificar pelo menos uma informao para identificar o link. A opo 3
no prov informao suficiente sobre a funo e, na opo 4, o texto alternativo
redundante com o texto prximo da imagem.

Quando possvel, evite utilizar expresses como link para, Clique nessa imagem ou
similares. Links so identificados como tais pelos leitores de tela e devem ser aparentes
para os usurios.

Nota: s vezes imagens muito grandes so cortadas em mltiplas imagens menores.

Usualmente, atribui-se o texto alternativo no atributo ALT da fatia maior, deixando os
atributos das demais fatias vazios (alt=" "). No aconselhado repetir o texto alternativo
fatia a fatia, tampouco quebr-lo de acordo com o numero de fatias existentes.

Se alguma fatia possuir um link, deve-se colocar o texto alternativo de acordo com a funo
do link.

Exemplo 5

A imagem biblioteca parte de uma barra de navegao. Qual seria o texto alternativo
mais apropriado?

1. Biblioteca

2. Link para biblioteca

3. A imagem no contm contedo, ento um atributo ALT vazio (alt=" ") suficiente.

Nesse caso, a opo 1 a mais adequada, provendo o contedo e a funo da imagem. A

imagem mostra a palavra biblioteca e tambm um link para essa rea do stio. Sempre
que a imagem conter apenas texto, este deve ser utilizado como texto alternativo.

7
Na opo 2, a imagem identificada como um link pelos leitores de tela, assim a expresso
link para desnecessria. A opo 3 tambm no apropriada, pois no h outra
informao disponvel sobre o link.

Nota: A mesma regra deve ser utilizada quando substitui os botes padro de formulrios
por imagens. O texto alternativo deve seguir a funo do boto: buscar, submeta,
registre, etc.
Ex: <input type="image" alt="buscar">.

Exemplo 6

Continue para na prxima pgina ler sobre os dirigveis de Santos Dumont.

Qual seria a melhor opo?

1. "Prxima
2. "Prxima pgina
3. "Os dirigveis de Santos Dumont
4. "Continue para ler sobre os dirigveis de Santos Dumont"
5. Seta

As opes 1 e 2 seriam suficientes na maior parte dos casos quando claro para o usurio
que trata-se de um documento de mltiplas pginas. A opo 3 apresenta a funo do link,
mas no indica que o link leva a prxima pgina de uma srie. A opo 4 pode ser a melhor
soluo pois apresenta a funo do link e o contedo.

A nica opo totalmente imprpria a opo 5, a descrio da imagem irrelevante, pois

o mais importante descrever sua funo e contedo, no sua forma.

Exemplo 7

Baixe o formulrio de emprego

8
A imagem acima um link para um formulrio. Qual seria a melhor opo?

1. Formulrio de emprego
2. Arquivo PDF
3. cone PDF
4. Um atributo Alt vazio (alt=" ")

Nesse caso a imagem complementa a informao dada no texto, que o formato do arquivo
a ser baixado, sendo assim a opo 2 (Arquivo PDF) a melhor escolha.

A opo 1 redundante, pois a informao j se apresenta no texto do link. A opo 3

descreve a imagem por ela mesma, mas no o que ela representa, o que seria mais
apropriado. A opo 4 no fornece nenhuma informao, deixando de lado a importncia
da informao complementar dada pela imagem.

Exemplo 8

No caso, o logo do stio uma imagem com link para pgina inicial. Qual seria a melhor
opo?

1. Logotipo do governo eletrnico

2. Logo
3. Governo eletrnico
4. Logotipo do Governo Eletrnico com link para pgina inicial
5. Um atributo Alt vazio (alt=" ")

9
 uma prtica comum na web que o logo do stio tambm apresente um link para a pgina
inicial. Caso a imagem cumpra esse papel de forma consistente no incio da pgina, a opo
3, apenas o nome do rgo (Governo eletrnico) suficiente. Identificar que o logotipo
um logotipo, como as opes 1, 2 e 4 no necessrio pois o contedo e a funo da
imagem no o logotipo, mas sim o que ele representa. A opo 4 longa demais, sendo
que os leitores de tela j identificam a imagem como link e a palavra logotipo,
desnecessria. J a opo 5 jamais deve ser utilizada se a imagem possui um contedo ou
funo.

4. Utilizao do atributo ALT - imagens decorativas

Imagens decorativas como quinas de tabelas, rguas decoradas, etc, so utilizadas para
objetivos no-informativos no representando relevncia no contedo. Na grande maioria
dos casos essas imagens devem apresentar um atributo ALT vazio (alt=" ").

Exemplo 9

Santos Dumont

Herdeiro de uma famlia de cafeicultores prsperos na cidade de Ribeiro Preto; pde

se dedicar aos estudos da cincia e da mecnica vivendo em Paris. Ao contrrio de
outros aeronautas da poca, Santos Dumont, deixava suas pesquisas como domnio
pblico e sem registrar patentes.

Governo eletrnico - O uso correto do texto alternativo

No caso, temos uma rgua decorativa separando o texto do rodap. Que texto seria mais
adequado no atributo ALT dessa imagem?

1. "Linha decorativa

2. "Inicio do rodap"

3. "Separador"

4. O atributo Alt vazio (alt=" ") suficiente.

1
Como a imagem apenas decorativa, separando o rodap do contedo, a opo 5 a
opo apropriada.

Nota: Quando a imagem utilizada apenas para fins decorativos, como rguas, fundos,
bordas, a melhor prtica remover a imagem do contedo da pgina e inseri-la utilizando
CSS. Essa prtica est de acordo com os padres Web separar a forma do contedo,
elimina a necessidade do atributo ALT em imagens decorativas removendo a imagem do
fluxo estrutura e semntico da pgina.

Exemplo 10

Deficincia visual

Refere-se a uma situao irreversvel de diminuio da

resposta visual, em virtude de causas congnitas ou

hereditrias, mesmo aps tratamento clnico e/ou cirrgico

e uso de culos convencionais.

A diminuio da resposta visual pode ser leve, moderada,

severa ou profunda, o que caracteriza o grupo de pessoas

com viso subnormal ou baixa viso. Essa deficincia pode

Que texto seria mais adequado no atributo ALT dessa imagem?

1. "Ilustrao"

2. "Pessoa portadora de cegueira utilizando computador.

3. O atributo Alt vazio (alt=" ") suficiente.

4. "Pessoas portadoras de cegueira podem utilizar a navegao por voz.

A ilustrao no caso complementar ao texto, fornecendo um apoio visual. Nesse caso

deve-se preservar a fluidez do texto. um erro pensar que toda a ilustrao deve ser
descrita, o usurio no portador l a imagem ao mesmo tempo do texto, no de forma
serial. Dessa forma, se a imagem no apresenta nenhuma instruo relevante, que exija
uma decodificao separada do texto, a opo 3 (alt=" ") a mais apropriada.

1
A opo 1 apresenta uma informao irrelevante ao contexto. A opo 3 descreve a
imagem, mas sua informao j est contida no texto ao lado. A opo 4 fornece mais
informaes que a prpria imagem evoca sem, no entanto, se aprofundar no assunto. O
texto do atributo fica incompleto, quebrando a fluidez do contedo.

5. Resumo

Adicionar o texto alternativo o principio de acessibilidade mais conhecido e tambm o

mais difcil de ser implementando de forma correta.

O texto alternativo pode estar presente no contexto de entorno ou ser provido pelo atributo
ALT da imagem.

TODA imagem deve ter um atributo ALT, mesmo que vazio.

O texto alternativo DEPENDE do contexto da imagem.
O texto alternativo DEVE:
o Apresentar o contedo e a funo da imagem.
o Ser sucinto.
O texto alternativo NO DEVE:
o Ser redundante.
o Usar expresses como "Foto de", "imagem de", Link para... ou Clique
aqui....
O texto do atributo ALT em imagens com link deve descrever a funo do link em
detrimento ao contedo da imagem.
Mesmo imagens decorativas devem possuir o atributo ALT vazio (alt=" ").

Imagens decorativas como bordas, marcadores, rguas e fundos devem ser, de preferncia,
chamadas via CSS.