Regla de accesibilidad: Los elementos `<area>` activos deben tener texto alternativo

Acerca de esta regla de accesibilidad

Un mapa de imagen es un elemento <img> vinculado a un elemento <map> a través del atributo usemap. Dentro del <map>, los elementos <area> individuales definen puntos clicables que funcionan como enlaces. Cada uno de estos elementos <area> es esencialmente un enlace, y como todos los enlaces, debe tener un nombre accesible que describa su propósito.

Por qué esto es un problema de accesibilidad

Los lectores de pantalla no pueden interpretar contenido gráfico. Cuando un usuario navega a un <area> clicable que carece de texto alternativo, el lector de pantalla no tiene una etiqueta significativa que anunciar. En muchos casos, recurrirá a leer la URL del enlace o el nombre del archivo de imagen, ninguno de los cuales transmite el propósito del enlace. Esto impacta críticamente a:

Usuarios ciegos y usuarios sordociegos que dependen completamente de los lectores de pantalla para navegar e interactuar con el contenido.
Usuarios con discapacidades motoras que utilizan tecnologías de asistencia como dispositivos de conmutador o control por voz, que dependen de nombres accesibles para identificar elementos interactivos.

Esta regla se relaciona con los siguientes criterios de éxito de WCAG:

WCAG 2.4.4 – Propósito del enlace (en contexto) (Nivel A): El propósito de cada enlace debe poder determinarse únicamente a partir del texto del enlace, o a partir del texto del enlace combinado con su contexto determinado programáticamente. Un <area> sin texto alternativo no tiene un propósito discernible.
WCAG 4.1.2 – Nombre, función, valor (Nivel A): Todos los componentes de la interfaz de usuario deben tener un nombre determinado programáticamente. Un elemento <area> es un componente interactivo, por lo que requiere un nombre accesible.

Esta regla también se aplica bajo los requisitos de Section 508, EN 301 549 y Trusted Tester.

Cómo solucionarlo

Asegúrate de que cada elemento <area> activo dentro de un <map> tenga un nombre accesible usando uno de estos métodos:

Atributo alt (preferido) — Añade texto alt descriptivo directamente al elemento <area>.
Atributo aria-label — Proporciona una etiqueta de texto a través de aria-label.
Atributo aria-labelledby — Referencia otro elemento que contenga el texto de la etiqueta.

El texto alt debe describir claramente el propósito o destino del enlace, no la apariencia visual de la región del punto clicable.

Además, asegúrate de que el elemento <img> padre tenga su propio atributo alt describiendo la imagen en su conjunto.

Ejemplos

Incorrecto: elementos `<area>` sin texto alternativo

En este ejemplo, los elementos <area> no tienen texto alt. Los lectores de pantalla no pueden comunicar qué hace cada región clicable.

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

Correcto: elementos `<area>` con texto `alt`

Cada <area> ahora tiene un atributo alt descriptivo que comunica el propósito del enlace.

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

Correcto: usar `aria-label` en lugar 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>

Incorrecto: mapa de imagen del lado del servidor

Los mapas de imagen del lado del servidor usan el atributo ismap y dependen de las coordenadas del clic del ratón enviadas al servidor. Estos no son accesibles por teclado y no proporcionan alternativas de texto para regiones individuales. Evita este patrón por completo.

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

En su lugar, reemplaza los mapas de imagen del lado del servidor con mapas de imagen del lado del cliente (usemap y <map>) que incluyan texto alt apropiado en cada <area>, o usa un patrón de navegación diferente por completo, como una lista estándar de enlaces.

Learn more: