Guia para tornar páginas web acessíveis
Imagens mapeadas
Recomendação
- Fornecer equivalente textual para regiões de mapa de imagem e fora da imagem (link/texto redundante).
Html/Xhtml
- Tipo client-side (usa tags "map" e "area"): Na tag "area" incluir o atributo "alt" com breve descrição do link. Para garantir o acesso, fornecer também o texto redundante.
- Tipo server-side (usa atributo "ismap"): Por não ser acessível a navegação via teclado, fornecer equivalente textual fora da imagem (link/texto redundante).
Exemplo
- Exemplo de mapa de imagem tipo client-side com atributo "alt" e link/texto redundante.
[ Visual | Auditiva | Física | Cognitiva ]
<img id="imgmap" src="map.gif" alt="Seções" title="Seções" usemap="#map" /> <map id="map"> <area shape="rect" coords="0,0,32,40" href="#" alt="Visual" /> <area shape="rect" coords="34,0,78,40" href="#" alt="Auditiva" /> <area shape="rect" coords="80,0,119,40" href="#" alt="Física" /> <area shape="rect" coords="122,0,163,40" href="#" alt="Cognitiva" /> </map> <!-- texto redundante --> [ <a href="#">Visual</a> | <a href="#">Auditiva</a> | <a href="#">Física</a> | <a href="#">Cognitiva</a> ]
Referência WCAG 1.0
- Guideline 1: Provide equivalent alternatives to auditory and visual content
- Recomendação 1: Fornecer alternativas ao conteúdo sonoro e visual
- Guideline 9. Design for device-independence
- Recomendação 9 - Projetar páginas considerando a independência de dispositivos
