Esquerda - Conteúdo.

Equivalentes Textuais para Acessibilidade de Imagens na Web.

Marco Antonio de Queiroz - MAQ.

Equivalente Textual, o que é isso? *

Todas as informações de uma página acessível devem ser apresentadas em texto. Isso significa que, se for usada alguma outra mídia, como imagens e sons, as informações que elas contêm devem ser repetidas numa descrição textual. Essa descrição deve ser "equivalente", isto é, deve transmitir as mesmas informações que os elementos disponibilizados.

Não devemos confundir a equivalência textual com a confecção de uma página somente texto, o que deixaria um site visualmente pobre, páginas esteticamente ruins não têm a ver com acessibilidade. A intenção, quando se diz que as informações devem estar disponíveis em texto, é a de uma informação redundante em texto quando da existência de outros elementos, como imagens e sons. Esse modo de informação se deve à necessidade que um leitor de tela (software de leitura para pessoas com deficiência visual e surdocegueira) tem para transmitir as informações, uma vez que não consegue ler nada além de textos.

Criar duas versões do site, uma gráfica e outra somente texto para pessoas com deficiência visual, além de ir contra a prática de uma única versão acessível a todos no chamado desenho universal, pode ocasionar erros como, na pressa, atualizar-se a página na versão gráfica e deixar a versão texto desatualizada por esquecimento. Além disso, as pessoas com deficiência que necessitam de uma navegação via teclado de bom nível, mas que enxergam, poderiam ter de se utilizar de páginas que não foram pensadas para elas.

Podemos dizer que os exemplos mais comuns de elementos não textuais são imagens de figuras, fotografias, botões, animações, linhas horizontais separadoras, mapas, filmes e sons.

Esses elementos não textuais podem ser tranquilamente utilizados numa página acessível, apenas devemos usar equivalentes textuais, a maioria deles com conteúdo, para dar oportunidade de todos os usuários percebê-los, caso isso seja adequado.

Sons incluem fala, sinais de áudio, sons de alerta, narrativas e trilhas de áudio em vídeo. Nem todos os usuários podem acessar ou utilizar esses elementos diretamente, especialmente surdos e deficientes auditivos, e, assim, necessitam também que a informação ou funcionalidade seja fornecida de outra forma, ou seja, no formato texto ou visual.

De qualquer maneira, o equivalente textual tem a função de traduzir em texto, em linguagem clara e simples, a imagem ou som, especialmente se ele for necessário para o entendimento do conteúdo.

Assim, os equivalentes textuais também são fundamentais para pessoas surdas, só que, ao invés de descreverem imagens, deverão descrever sons. Se existirem sonorizações na página, como mensagens sonoras ou vídeos com informações orais, estas devem estar redundantes em texto, para que a pessoa surda ou com uma deficiência auditiva severa possa absorver o conteúdo transmitido pela sonorização. Nesse caso, a língua gestual também pode ser importante*.

Fornecer um texto equivalente para cada elemento não textual.

"ALT", "LONGDESC" e "D.LINK" são técnicas para a criação de textos equivalentes. Objetos programáveis, tais como os scripts e applets, são outro tipo de elemento não textual. São partes de uma funcionalidade escrita em linguagens outras que não HTML, para criar um comportamento dinâmico ou iterativo que vai dos simples efeitos visuais a miniaplicações. São exemplos os menus pop-up codificados em DHTML, letreiros e aplicações interativas, tais como calculadoras de tributos ou jogos escritos Java ou Macromedia Flash. Teoricamente, qualquer efeito ou funcionalidade pode ser criado utilizando um script ou applet.

Nem todos os usuários podem acessar ou utilizar esses elementos diretamente e, assim, necessitam que a informação ou funcionalidade seja fornecida no formato texto.

Instruções e Técnicas **.

Use o atributo ALT para objetos não textuais simples, tais como figuras e títulos gráficos ou botões, deve-se especificar a descrição textual utilizando o atributo HTML "Alt" (alternativo).

O texto do atributo ALT deve ser escrito cuidadosamente para que possa fornecer informações equivalentes. Se o texto do ALT não transmitir com eficácia as informações que a imagem mostra, ele será inútil. Ao se usar um texto no atributo ALT para fornecer textos equivalentes para imagens utilizadas como links, o texto deve ter sentido como um título do link quando for lido fora do contexto. Para imagens meramente decorativas que não contêm informações, tais como espaçadores, linhas e enchimentos, usa-se o texto Alt vazio (descrito abaixo). No caso de imagens decorativas do tipo utilizadas em menus e itens de lista, barras separadoras ou mesmo as do tipo que se encontra no topo esquerdo desta página, "coloca-se a imagem em background, através de CSS" ***.

Consulte as técnicas recomendadas pela WAI:
Uso do texto no atributo Alt para fornecer conteúdo textual equivalente para imagens. Site Externo. (Using Alt text for providing equivalent text content for images) e Fornecimento de textos equivalentes para applets e objetos programáveis. Site Externo. (Providing text equivalents for applets and programmatic objects).

Uso do atributo Alt com texto vazio para objetos que não contêm informações.

Para imagens que são meramente decorativas e não contêm informações, tais como espaçadores, marcadores, linhas e enchimentos, usa-se o valor vazio para o atributo ALT (alt=" "). Ele será ignorado pela maioria das tecnologias de auxílio, tais como leitores de tela, e evitará bombardear o usuário com centenas de descrições inúteis, tais como "um espaçador, uma linha azul, marcador, marcador...". Deve-se notar que o texto vazio no atributo Alt tem espaço entre as aspas. Ele não é o mesmo que alt="", que não contém um espaço e, portanto, não é um atributo Alt com texto vazio. Tecnologias de auxílio podem não ignorar objetos com atributo Alt que não contenham espaço.

ALT=" " - ALT Vazio - correto;
ALT="" - ALT Nulo.

Fornecimento de uma longa descrição quando o texto Alt não for adequado.

Realmente, o atributo ALT não é útil para explicações complexas demais para serem descritas em poucas palavras. Por exemplo, se for exibir um gráfico que mostre o crescimento populacional de três países (Brasil, Argentina e Uruguai) de 1995 a 2001, pode-se utilizar o atributo ALT para dar uma descrição básica do gráfico, tal como:

"Gráfico que mostra o crescimento populacional de Brasil, Argentina e Uruguai, de 1995 a 2001".

Entretanto, as informações contidas no gráfico podem ser muito complexas e exigirem uma descrição muito maior e pormenorizada da informação. O gráfico pode mostrar linhas coloridas com os parâmetros de cada país, permitindo ao usuário identificar rapidamente tendências globais e fazer comparações.

Isto está além da capacidade do atributo ALT e, nesse caso, deve-se utilizar o atributo HTML "LONGDESC" ou um "D" link. Essas duas técnicas permitem aos usuários acessarem um texto separado que descreve o contexto. Longdesc, embora seja parte da especificação do HTML, não é suportado por grande parte dos navegadores. A técnica alternativa "D" link envolve a inserção, além da imagem, de um link apresentado como a letra maiúscula "D". O alvo desse link deve ser uma página web separada com uma longa descrição detalhada para pessoas com deficiência visual. Quando o usuário tiver lido esse texto, ele pode retornar à página com a imagem. "Longdesc" significa "longa descrição".

Consulte as técnicas recomendadas pela WAI em Fornecimento de descrições longas com Longdesc e "D" link Site Externo. (Providing long descriptions with Longdesc and the "D" link).

Fornecimento de um texto equivalente para cada link ativo que contém uma imagem de mapa.

Consulte a técnica recomendada pela WAI em Fornecimento de texto equivalente de links contidos em imagens de mapas. Site Externo. (Providing text equivalents of links contained in image maps). Notar que o link deve ser um link do lado do cliente para trabalhar com essa técnica.

Como identificar essas situações?

  • Cancele o downloading de imagens do navegador. Isso mostrará a página sem as imagens. Deve ser possível ver o texto do atributo alt onde as imagens não mais aparecem. Verifique se o texto do atributo Alt está ou não adequado.
  • Cancele os scripts e Java do navegador. Isso permitirá ver a aparência da página e seu funcionamento sem scripts e applets. Com isso, será possível verificar se é ou não possível utilizar a página sem scripts e applets.
  • Teste a página com alguma ferramenta de avaliação de acessibilidade. Todas elas acusam a ausência do atributo alt nas imagens.
  • Utilize códigos HTML STRICT. Esses códigos não são validados pelo avaliador do W3C caso não haja o atributo ALT nas imagens.

Imagens em Background acessíveis ***.

Os leitores de tela não possuem somente a função de ler os textos de conteúdos web, mas também de descrever a estrutura das páginas e executar as tarefas propostas por seus aplicativos. Quanto à descrição da estrutura, o leitor ao encontrar elementos (X)HTML os sonoriza e é por isso que se torna importante o desenvolvimento das páginas dentro dos padrões web. Quando um leitor de tela passa por um elemento <a> ele sonoriza "link", quando encontra um elemento <TABLE> ele, da mesma forma, sonoriza "tabela" complementando ainda quantas linhas e colunas essa possui e revelando ao usuário cego a estrutura de células que vem a seguir, quando passa por um elemento <UL> ele "diz" "LISTA DE ITENS" etc. Da mesma forma, ao encontrar um <IMG> ele sonoriza "gráfico" revelando a existência de uma imagem. São essas descrições que facilitam as pessoas cegas entrarem nos links, navegarem nas tabelas de dados de forma mais adequada etc. No caso das imagens, se esta é apenas decorativa e sem outra função que altere o conhecimento dos usuários de leitores de tela, cegos em geral, pode-se colocar essas imagens não como um elemento de marcação (HTML/XHTML), mas apenas no plano de fundo, em CSS, através da propriedade background. Isso faz com que o leitor de tela passe e ignore completamente a existência da imagem.

A grande vantagem disso é não saturar os ouvidos da pessoa com deficiência visual, que passa o tempo todo ouvindo tudo sobre a página, além das informações a que estão interessados. É importantíssimo escutar a existência de um link, de um formulário e de todos ou quase todos os elementos de uma página, mas algumas informações são exageradas e sem utilidade. A página pode ficar "verborrágica" demais. Dessa forma, o uso do atributo ALT vazio e da imagem em background são extremamente utilizados em acessibilidade na web

Entretanto, é bom observar que muitas imagens colocadas em plano de fundo, como aquelas que indicam o destino de um link para um site externo, fartamente utilizadas, deveriam, ao contrário, estarem em (X)HTML, pois possuem informação relevante. Ou seja, se o usuário clicar naquele link sairá do site e pode não ser esse o seu desejo. As pessoas que enxergam estarão avisadas do destino do link, mas as pessoas cegas e de baixa visão, pelo fato do leitor de tela ignorar imagens desse tipo, poderão entrar nele desavisadamente. Deixe essas imagens disponíveis no próprio texto do link e com o seu atributo ALT, por exemplo:

Bengala Legal Site Externo.

<a href="http://www.bengalalegal.com">Bengala Legal
<img src="img/ext.gif" width="17" height="11" alt="Site Externo." title="Site Externo." /></a>

Como Fazer? Exemplos ***.

Exemplo mais simples de equivalência textual: ATRIBUTO ALT.


Imagem sem o atributo ALT.
<img src="img/imagem123.gif" width="43" height="43">

Símbolo de Acessibilidade.
Imagem com o atributo ALT.
<img src="img/imagem123.gif" width="43" height="43"
alt="Símbolo de Acessibilidade">

Exemplo de quando a imagem está associada a um link.


Link com imagem sem o atributo ALT.
<a href="http://www.bengalalegal.com">
<img src="imagem125.gif" width="100" height="99"></a>

Conheça a Bengala Legal.
Link com imagem com o atributo ALT.
<a href="http://www.bengalalegal.com">
<img src="imagem125.gif" width="100" height="99"
alt="Conheça a Bengala Legal"></a>

Exemplo com Atributos ALT, LONGDESC e D.LINK.

O exemplo abaixo irá demonstrar a equivalência textual da imagem do selo da campanha "Acesso de Humor".

Selo da Campanha Acesso de Humor.
D

Código

<img src="selo-humor.jpg" width="100" height="120"
alt="Selo da Campanha Acesso de Humor." title="Selo da Campanha Acesso de Humor."
longdesc="desc-acessodehumor.php"><br>
<a href="13-desc-acessodehumor.php" title="Descrição textual da imagem do selo">D.</a>

Obs.: o atributo TITLE está sendo usado nesse exemplo para que as pessoas que utilizam navegadores que não seja o Internet Explorer e Webvox (somente texto) possam visualizar o equivalente textual apontando o mouse para a imagem.

Quando a imagem parece ser um texto.

Letras e textos artisticamente planejados, desenhados na imagem, usados para títulos, cabeçalhos ou logos de empresas não são texto. Texto significa somente o que é chamado de "texto real", digitado no teclado.

Na imagem abaixo temos um exemplo de texto "desenhado", que está na própria imagem e de "texto real", que se apresenta no atributo ALT. A imagem é de um "Quem Somos" e o texto, colocado no ALT, deve ser o mesmo:

Quem somos
Imagem de um texto.
<img src="img/imagem127q.gif"
alt="Quem somos" width="106" height="20" />

* Retirado do texto "Acessibilidade web: tudo tem sua primeira vez. Marco Antonio de Queiroz.
** Retirado do texto: Diretrizes Irlandesas de Acessibilidade web
*** Retirado do texto: "Curso de Acessibilidade Web", de Marco Antonio de Queiroz.

Disponibilizado em: 04/04/2008.