Regra de acessibilidade: Elementos `<area>` ativos devem ter texto alternativo

Sobre esta regra de acessibilidade

Um mapa de imagem é um elemento <img> ligado a um elemento <map> através do atributo usemap. Dentro do <map>, elementos <area> individuais definem hotspots clicáveis que funcionam como ligações. Cada um destes elementos <area> é essencialmente uma ligação e, como todas as ligações, deve ter um nome acessível que descreva o seu propósito.

Porque isto é um problema de acessibilidade

Os leitores de ecrã não conseguem interpretar conteúdo gráfico. Quando um utilizador navega para um <area> clicável que não possui texto alternativo, o leitor de ecrã não tem um rótulo significativo para anunciar. Em muitos casos, irá recorrer à leitura do URL da ligação ou do nome do ficheiro da imagem — nenhum dos quais transmite o propósito da ligação. Isto impacta criticamente:

Utilizadores cegos e utilizadores surdocegos que dependem inteiramente de leitores de ecrã para navegar e interagir com o conteúdo.
Utilizadores com deficiências motoras que usam tecnologias assistivas como dispositivos de comutação ou controlo por voz, que dependem de nomes acessíveis para identificar elementos interativos.

Esta regra relaciona-se com os seguintes critérios de sucesso WCAG:

WCAG 2.4.4 – Link Purpose (In Context) (Level A): O propósito de cada ligação deve ser determinável a partir do texto da ligação apenas, ou a partir do texto da ligação combinado com o seu contexto programaticamente determinado. Um <area> sem texto alternativo não tem propósito discernível.
WCAG 4.1.2 – Name, Role, Value (Level A): Todos os componentes da interface de utilizador devem ter um nome programaticamente determinado. Um elemento <area> é um componente interativo, por isso requer um nome acessível.

Esta regra também se aplica sob os requisitos da Section 508, EN 301 549, e Trusted Tester.

Como corrigir

Certifique-se de que cada elemento <area> ativo dentro de um <map> tem um nome acessível usando um dos seguintes métodos:

Atributo alt (preferível) — Adicione texto alt descritivo diretamente ao elemento <area>.
Atributo aria-label — Forneça um rótulo de texto através de aria-label.
Atributo aria-labelledby — Referencie outro elemento que contenha o texto do rótulo.

O texto alt deve descrever claramente o propósito ou destino da ligação, não a aparência visual da região do hotspot.

Além disso, certifique-se de que o elemento <img> principal tem o seu próprio atributo alt descrevendo a imagem como um todo.

Exemplos

Incorreto: Elementos `<area>` sem texto alternativo

Neste exemplo, os elementos <area> não têm texto alt. Os leitores de ecrã não conseguem comunicar o que cada região clicável faz.

<img src="solar_system.jpg" alt="Solar System" width="472" height="800" usemap="#solar-map">
<map name="solar-map">
  <area shape="rect" coords="115,158,276,192" href="https://example.com/mercury">
  <area shape="rect" coords="115,193,276,234" href="https://example.com/venus">
  <area shape="rect" coords="115,235,276,280" href="https://example.com/earth">
</map>

Correto: Elementos `<area>` com texto `alt`

Cada <area> agora tem um atributo alt descritivo que comunica o propósito da ligação.

<img src="solar_system.jpg" alt="Solar System" width="472" height="800" usemap="#solar-map">
<map name="solar-map">
  <area shape="rect" coords="115,158,276,192" href="https://example.com/mercury" alt="Mercury">
  <area shape="rect" coords="115,193,276,234" href="https://example.com/venus" alt="Venus">
  <area shape="rect" coords="115,235,276,280" href="https://example.com/earth" alt="Earth">
</map>

Correto: Usar `aria-label` em vez de `alt`

<img src="floor_plan.png" alt="Office floor plan" width="600" height="400" usemap="#office-map">
<map name="office-map">
  <area shape="rect" coords="0,0,200,200" href="/rooms/conference-a" aria-label="Conference Room A">
  <area shape="rect" coords="200,0,400,200" href="/rooms/kitchen" aria-label="Kitchen">
</map>

Incorreto: Mapa de imagem do lado do servidor

Os mapas de imagem do lado do servidor usam o atributo ismap e dependem de coordenadas de clique do rato enviadas para o servidor. Estes não são acessíveis por teclado e não fornecem alternativas de texto para regiões individuais. Evite completamente este padrão.

<a href="/maps/nav.map">
  <img src="navbar.gif" alt="Navigation" ismap>
</a>

Em vez disso, substitua os mapas de imagem do lado do servidor por mapas de imagem do lado do cliente (usemap e <map>) que incluam texto alt adequado em cada <area>, ou use um padrão de navegação diferente como uma lista padrão de ligações.

Learn more: