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 pontos ativos 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 tem texto alternativo, o leitor de ecrã não tem uma etiqueta significativa 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 afeta 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 está relacionada com os seguintes critérios de sucesso WCAG:

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

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

Como corrigir

Garanta que cada elemento <area> ativo dentro de um <map> tem um nome acessível usando um destes métodos:

Atributo alt (preferido) — Adicione texto alt descritivo diretamente ao elemento <area>.
Atributo aria-label — Forneça uma etiqueta de texto através de aria-label.
Atributo aria-labelledby — Referencie outro elemento que contenha o texto da etiqueta.

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

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> tem agora 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: usando `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 das coordenadas do clique do rato enviadas para o servidor. Estes não são acessíveis pelo 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 incluem 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: