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 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.

Por que 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 de 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 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 – 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 de interface do utilizador devem ter um nome determinado programaticamente. Um elemento <area> é um componente interativo, portanto requer um nome acessível.

Esta regra também se aplica sob os requisitos da Secção 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 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 de acesso.

Além disso, certifique-se de que o elemento <img> pai 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: 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 das 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 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: