Texto alternativo para mapas de imagens
O que a norma pede
Em mapas de imagem (imagens com áreas clicáveis), cada área tem seu próprio texto alternativo.
- 1.1.1 (A)
Parecido na NBR 17060
A NBR 17060 trata de aplicativos. Se o seu serviço também tem app, veja o que a Bússola da NBR 17060 diz sobre o mesmo assunto:
Visões por perfil
Escolha um perfil para ver o que o requisito pede de quem ocupa esse papel:
Nomeie cada área clicável do mapa na especificação e ofereça também uma lista de links com as mesmas opções. As áreas precisam ser grandes o bastante para o toque.
Mapa das regionais
A pessoa escolhe sua regional clicando no mapa da cidade.
Errado: Só o mapa
No protótipo
Mapa com 6 regiões clicáveis, sem nomes nem lista.
Quem não vê não sabe que regiões existem.
Certo: Mapa e lista
No protótipo
Cada região com nome; abaixo, lista “Escolha sua regional”.
Há mais de um jeito de escolher.
Dê alt a cada elemento area. Em mapas feitos com SVG, transforme cada região clicável num link com nome acessível que receba foco e funcione pelo teclado.
Mapa de imagem das regionais
O mapa usa map e area.
Errado: Áreas sem alt
<map name="regionais"> <area shape="poly" coords="…" href="/regional/norte"> </map>O leitor anuncia só “link”.
Certo: Áreas com alt
<map name="regionais"> <area shape="poly" coords="…" href="/regional/norte" alt="Regional Norte"> </map>Cada área é anunciada pelo nome.
Exija uma alternativa em lista para todo mapa clicável, porque ela resolve o acesso a um custo baixo. Avalie também se o mapa é mesmo necessário para a tarefa.
Escolha do posto de saúde
O site mostra os postos num mapa clicável.
Errado: Mapa como único caminho
Situação
Não há outra forma de achar o posto.
Pessoas cegas não encontram onde se vacinar.
Certo: Mapa e busca por bairro
Situação
Mapa com áreas nomeadas e busca “Digite seu bairro”.
Todos encontram o posto.
Percorra as áreas do mapa com Tab e leitor de tela e ouça o nome de cada uma. Registre áreas que não recebem foco ou não têm nome, e confira se existe a alternativa em lista.
Mapa das regionais
Navegação com Tab e leitor de tela.
Errado: Áreas sem nome
“Link”
“Link”
“Link”
Impossível saber qual regional é qual.
Certo: Áreas nomeadas
“Regional Norte, link”
“Regional Sul, link”
“Regional Centro, link”
A escolha é possível.
Use como nome de cada área o nome oficial do destino, igual ao que aparece no resto do site e na lista alternativa. Deixe detalhes como horários para a página de destino.
Nomes das áreas
Texto alternativo das regiões do mapa.
Errado: Nome genérico
Textos alternativos
“Área 1”, “Área 2”, “Área 3”
Os nomes não significam nada para a pessoa.
Certo: Nome do destino
Textos alternativos
“Regional Norte”, “Regional Sul”, “Regional Centro”
Cada área diz para onde leva.