Felipe de Albuquerque

Utilize texto alternativo

Nas imagens, utilize o atributo alt=”….” do elemento <img /> para dar uma descrição textual à imagem.

<img src="images/fuscaPreto.jpg" alt="Foto de um fusca preto"  title="Foto de um fusca preto" />

Enquanto a imagem está sendo carregada ou quando por algum motivo a imagem não é exibida, o texto alternativo alt=”Foto de um fusca preto” é exibido.

O texto alternativo da imagem somente estará acessível a softwares de leitura de tela “Virtual Vision por exemplo” durante a leitura da página, 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=”Foto de um fusca preto”, mas lembre-se: o mouse é um dispositivo apontador, quase nunca utilizado.

Descrição textual da imagem “d-link”

Para imagens mais complexas é aconselhável utilizar uma técnica chamada d-link, que consiste em criar uma pagina HTML para descrever a imagem em questão.

A técnica é colocar um link com a letra “D” ao lado da imagem, para quando a navegação por TAB encontrar o link e usuário poder chegar até a página com a descrição detalhada da imagem.

Para não mudar seu projeto visual, é possível esconder visualmente o link com a letra “D” e o desenvolvedor poderá utilizar várias maneiras para esconder visualmente este link, com CSS é uma boa uma alternativa.

<!-- É uma opação colocar a link direto na imagem -->
<a href="descricaoimagemcriancanap.html"  title="ir a página da descrição textual da imagem, crianças brincando na praia">
     <img src="images/criancasNaP.jpg" alt="Crianças brincando na praia" />
</a>

<!--  A técnica D-link, este link é para ficar ao lado da imagem -->
<a href="descricaoimagemcriancanap.html" title="ir a página da descrição textual da imagem, crianças brincando na praia">
     [d]
</a> 

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”.

Este post foi inspirado na cartilha de acessibilidade e pode ser encontrado no site Lupa Digital, e a citação acima são palavras do autor e pode ser lido em: Lupa digital no item 7.2.