TL;DR (Too Long; Didn’t Read... o básicamente: mucho texto, dame el resumen rápido)
Un mapa interactivo (<map>) divide una imagen en zonas clicables mediante polígonos (<area>). Si una persona usuaria ciego tabula sobre estas zonas y no poseen un atributo alt explícito, el lector de pantalla enunciará "Enlace" hacia el vacío, violando la WCAG 2.4.4 (Propósito del Enlace).
Zonas muertas en la navegación espacial
Es muy común en portales gubernamentales ver un mapa interactivo del país donde la persona usuaria hace clic en su departamento para ver estadísticas. Una persona usuaria vidente ve las fronteras, pero la persona usuaria de lector de pantalla solo ve una lista de enlaces anónimos. Si las áreas no se nombran, el mapa es un laberinto sin salida.
El patrón erróneo: Código Accesible Deficiente
La geolocalización visual no está respaldada por metadatos descriptivos.
<!-- MAL: Polígonos de interacción mudos -->
<map name="mapa-colombia">
<area shape="poly" coords="10,20,30,40" href="/antioquia">
<area shape="poly" coords="50,60,70,80" href="/bogota">
</map>La Solución Accesible: Código Recomendado
Tratar cada etiqueta <area> como si fuera una imagen independiente, proporcionando un atributo alt que describa inequívocamente su destino.
<!-- BIEN: Zonas interactivas identificadas -->
<map name="mapa-colombia">
<area shape="poly" coords="10,20,30,40" href="/antioquia" alt="Ver estadísticas de Antioquia">
<area shape="poly" coords="50,60,70,80" href="/bogota" alt="Ver estadísticas de Bogotá D.C.">
</map>Metodología de Verificación y Testing
Pruebas Manuales con Lectores de Pantalla
Con NVDA, presionar G para saltar entre imágenes. Verificar que cada imagen informativa anuncie su texto alternativo descriptivo. Las imágenes decorativas deben ser completamente ignoradas por el lector. En VoiceOver (iOS), confirmar mediante swipe que las imágenes informativas se anuncien correctamente.
Inspección del Árbol de Accesibilidad
En Chrome DevTools, seleccionar el elemento afectado en el panel Elements, luego abrir la pestaña Accessibility. Verificar que las propiedades Role, Name y State reflejen correctamente la intención del componente según el criterio WCAG 2.4.4.
Herramientas Automatizadas
Ejecutar Axe DevTools: la regla link-name detecta enlaces sin nombre accesible. Limitación: No evalúa si el texto es "suficientemente descriptivo" fuera de contexto; esto requiere revisión humana.
