7.1 Utilizando texto alternativo

Nas imagens, utilize o atributo ALT="...." do elemento <IMG> para dar uma descrição textual à imagem.

Exemplo do código

<img class="imagemsemborda" src="//lupadigital/images/stories/logoacess.gif"  
alt="Logotipo de acessibilidade - site acessível à deficiente visual" />

Comentário do código

Durante a carga da página, até que a imagem esteja completamente carregada ou caso o navegador esteja com opção de exibir imagem desativa, será exibido o texto alternativo "Logotipo de acessibilidade".

O texto alternativo desta imagem somente estará acessível ao Virtual Vision quando da leitura da página completa, pois uma imagem sem hiperlink não receberá foco através da navegação com a tecla TAB.

Ao mover o mouse por cima da imagem, o Virtual Vision irá ler o conteúdo do atributo ALT="....", mas lembre-se: o mouse é um dispositivo apontador, quase nunca utilizado.

7.2 Descrição textual da imagem

Como a curiosidade é da natureza do homem e já que o deficiente visual não pode apreciar o conteúdo da imagem visualmente, seria interessante prover as imagens de um texto descritivo.

Um recurso utilizado é colocar, após a imagem, um link com a letra "d", conhecido como "d-link", o qual fará referência a uma página html com a descrição textual da imagem. Como outros links, este receberá o foco após o usuário pressionar a tecla TAB na imagem.

Para quem não deseja prejudicar o design da página, com uma letra "d" após as imagens, utilize o recurso de d-link invisível, ou seja, coloque uma pequena imagem transparente no lugar da letra "d".

7.2.1 Utilizando d-link com a letra "d"

Exemplo do código

<a href="/descricaodologotipo.htm"> 
   <img class="imagemsemborda" src="//lupadigital/images/stories/logoacess.gif" 
   alt="Logotipo de acessibilidade" name="logoacessibilidade" />
</a>
<a href="/descricaodologotipo.htm" title="Descrição textual do logotipo de acessibilidade">
   [d]
</a> 

Comentário do código

Através da navegação com a tecla TAB, a letra "d" receberá o foco e será pronunciado o conteúdo do atributo TITLE="...".

7.2.2 Utilizando d-link como imagem transparente

Exemplo do código

<a href="/descricaodologotipo.htm">
   <img class="imagemsemborda" src="//lupadigital/images/stories/logoacess.gif" 
   alt="Logotipo de acessibilidade" name="logoacessibilidade">
</a>
<a href="/descricaodologotipo.htm">
   <img src="/d_link.gif" 
   alt="Descrição textual do logotipo de acessibilidade">
</a>

Comentário do código

Através da navegação com a tecla TAB, a imagem d-link receberá o foco e será pronunciado o conteúdo do atributo ALT="...";

O menor tamanho de imagem que não prejudica o layout e pode ser lida pelo Virtual Vision é WIDTH=5 e HIGH = 5.

A borda da figura "d_link.gif" foi deixada apenas para fins de exemplo.

7.2.3 Mapas de Imagens

Mapas de imagens são imagens que possuem regiões ativas. Quando o usuário seleciona uma das regiões, alguma ação acontece - Um link pode ser seguido; informações podem ser enviadas a um servidor, etc.

Para fazer um mapa de imagens acessível, temos que ter certeza de que cada ação associada com uma região visual pode ser ativada sem um dispositivo apontador, como o mouse.

Mapas de imagens são criados com o elemento <MAP>. Para todas as áreas mapeadas, deve-se utilizar um texto equivalente, utilizando os atributo TITLE="..." e ALT="...".

Exemplo do código

<img usemap="#Mapadeimagem" src="//lupadigital/images/stories/imagemapexemplo.jpg"  
  alt="exemplo de IMAGMAP" />
 <map id="Mapadeimagem" name="Mapadeimagem">
 <area shape="rect" coords="4,8,144,36" href="#Acessibilidade" alt="Acessibilidade" 
    title="Acessibilidade"> 
 <area shape="rect" coords="152,8,242,37" href="#Jornais" alt="Jornais" 
    title="Jornais"> 
 <area shape="rect" coords="252,7,345,37" href="#Revistas" alt="Revistas" 
    title="Revistas"> 
 <area shape="rect" coords="356,7,449,36" href="#Pesquisa" alt="Pesquisa" 
    title="Pesquisa"> 
</map>

Comentário do código

Ao navegar com a tecla TAB, cada área receberá o foco na seqüência da navegação e irá ler o conteúdo do atributo TITLE;

A seqüência de navegação se dará na ordem de posicionamento de cada AREA SHAPE.