Lupa digital

7.1 Utilizando texto alternativo curto com o atributo alt

Nas imagens, utilize o atributo alt do elemento img para dar uma descrição textual curta com até 100 caracteres à imagem.

Exemplo

Exemplo do código

<img alt="Logotipo de acessibilidade - um globo azul com um buraco de fechadura ao centro" src="images/stories/logoacess.gif"> 

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 - um globo azul com um buraco de fechadura ao centro".

O texto alternativo desta imagem somente estará acessível ao leitor de tela 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 leitor de tela irá ler o conteúdo do atributo alt, mas lembre-se: o mouse é um dispositivo apontador, quase nunca utilizado por pessoas com deficiência.

7.2 Utilizando texto alternativo longo com o atributo longdesc

O atributo longdescapesar de ser recomendado pelo WCAG não funciona muito bem no NVDA, a princípio apenas o Jaws para Windows faz o reconhecimento correto.

Exemplo

Exemplo do código

<img alt="Logotipo de acessibilidade - um globo azul com um buraco de fechadura ao centro" longdesc="http://lupadigital.net.br/logotipo-de-acessibilidade" src="images/stories/logoacess.gif">

Comentário do código

Quando a imagem receber o foco, além da leitura normal do texto alternativo será informado ao leitor de tela a exisitência de um texto mais detalhado descrevendo a imagem.

Neste caso, a página chamada poderia descrever:
"Um globo azul com bordas verdes e sombra ao fundo. O globo possui listas pretas em formato de grelha e ao centro um buraco de fechadura com a cor laranja em seu interior."

7.3 Utilizando texto alternativo longo através de um link oculto

O atributo longdescapesar de ser recomendado pelo WCAG não funciona muito bem no NVDA, a princípio apenas o Jaws para Windows faz o reconhecimento correto.

Exemplo

Exemplo do código

<img alt="Logotipo de acessibilidade - um globo azul com um buraco de fechadura ao centro" src="images/stories/logoacess.gif"> 
<a href="http://lupadigital.net.br/logotipo-de-acessibilidade"><img alt="Descrição textual da imagem Logotipo de acessibilidade." src="/sites/default/files/imagens/d_link.gif" /></a>

Comentário do código

Após navegar pela imagem do logotipo de acessibilidae, a mini imagem posicionada logo após receberá o foco e será lido como hiperlink e o texto informado a existência da descrição textual da imagem do logotipo de acessibilidade.

Em versões anteriores do WCAG isto era conhecido como d-link, onde era sugerido colocar a palavra d-link ao lado da imagem com o hiperlink para descrição textual.
Esta mini imagem deve ter pelo menos 5px altura por 5px de largura.

Se a imagem a ser descrita possuir hiperlink, ao receber o foco e pressionarmos a tecla NVDA + D, o NVDA irá informar sobre a existência do longdesc.

7.4 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 titlee alt.

Exemplo

Exemplo do código

<map id="mapabrasil" name="mapa-brasil">
<area alt="RR" class="rr" coords="103,25,140,16,146,47,137,59,124,55,114,37" href="#" shape="poly" title="RR" /> 
<area alt="AM" class="am" coords="64,54,55,79,45,112,26,122,57,138,152,130,157,82,122,81,103,58,86,60" href="#" shape="poly" title="AM" /> 
<area alt="AC" class="ac" coords="11,140,21,158,38,156,49,166,68,161,44,147" href="#" shape="poly" title="AC" /> 
<area alt="RO" class="ro" coords="111,143,97,156,94,168,105,180,134,191,136,179,123,154" href="#" shape="poly" title="RO" /> 
<area alt="MT" class="mt" coords="150,154,226,163,225,198,203,218,173,223,155,211,152,189" href="#" shape="poly" title="MT" /> 
<area alt="MS" class="ms" coords="172,243,193,238,206,245,217,255,215,268,204,282,191,288,168,266" href="#" shape="poly" title="MS" /> 
<area alt="PR" class="pr" coords="212,289,203,302,213,316,231,317,241,316,237,297,225,289" href="#" shape="poly" title="PR" /> 
<area alt="RS" class="rs" coords="205,336,192,344,183,353,199,363,212,373,225,364,233,348,219,336,210,337" href="#" shape="poly" title="RS" /> 
<area alt="SC" class="sc" coords="210,324,225,323,237,323,248,322,250,334,241,343" href="#" shape="poly" title="SC" /> 
<area alt="SP" class="sp" coords="237,265,257,267,265,280,268,293,253,297,241,285,225,278" href="#" shape="poly" title="SP" /> 
<area alt="RJ" class="rj" coords="294,283,307,282,315,275,320,282,313,289,298,290" href="#" shape="poly" title="RJ" /> 
<area alt="ES" class="es" coords="323,273,320,266,328,244,340,246" href="#" shape="poly" title="ES" /> 
<area alt="MG" class="mg" coords="302,273,325,230,297,211,275,231,253,253,279,274" href="#" shape="poly" title="MG" /> 
<area alt="DF" class="df" coords="257,206,271,209,272,221,262,224,255,214" href="#" shape="poly" title="DF" /> 
<area alt="GO" class="go" coords="259,235,232,244,217,227,237,195,250,195" href="#" shape="poly" title="GO" /> 
<area alt="BA" class="ba" coords="338,214,282,194,288,174,321,162,343,161,351,178" href="#" shape="poly" title="BA" /> 
<area alt="TO" class="to" coords="263,124,249,148,240,169,251,183,272,177,273,149" href="#" shape="poly" title="TO" /> 
<area alt="PA" class="pa" coords="232,151,256,88,183,53,183,91,171,126,191,148" href="#" shape="poly" title="PA" /> 
<area alt="AP" class="ap" coords="207,39,225,25,241,46,222,59" href="#" shape="poly" title="AP" /> 
<area alt="MA" class="ma" coords="287,78,269,108,277,127,292,128,307,117,308,100" href="#" shape="poly" title="MA" /> 
<area alt="PI" class="pi" coords="289,139,307,131,321,111,325,117,327,136,316,148,294,155" href="#" shape="poly" title="PI" /> 
<area alt="CE" class="ce" coords="333,93,337,130,349,126,361,111,350,98" href="#" shape="poly" title="CE" /> 
<area alt="RN" class="rn" coords="368,113,364,122,373,125,386,126,382,115" href="#" shape="poly" title="RN" /> 
<area alt="PB" class="pb" coords="389,137,389,129,373,131,360,132,375,142" href="#" shape="poly" title="PB" /> 
<area alt="PE" class="pe" coords="341,138,368,140,389,149,368,153,349,150,330,148" href="#" shape="poly" title="PE" /> 
<area alt="AL" class="al" coords="361,153,373,156,386,151,376,168" href="#" shape="poly" title="AL" /> 
<area alt="SE" class="se" coords="363,177,376,170,362,160" href="#" shape="poly" title="SE" />
</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 atributotitle;

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