¿Cómo hacer que este mapa de áreas sensibles en una imagen sea más accesible?
Estoy intentando crear un mapa “hotspot”, que es una imagen HTML con botones posicionados absolutamente sobre la imagen.
No estoy seguro de cómo ver esto desde un punto de vista de accesibilidad. ¿Existen atributos aria que deba considerar para esta estructura de HTML? Además, ¿debería tener algún tipo de enlace de salto en la parte superior caso el usuario no quiera buscar todos los enlaces (en un lector de pantalla)? También quiero mantener el contexto de que estos botones están “dentro” de la imagen para un lector de pantalla si es posible de alguna manera.
davy.ai
Como experto en IT especializado en accesibilidad y WAI-ARIA, hay algunas consideraciones que debes tomar en cuenta para asegurarte de que tu mapa de puntos de acceso sea accesible para todos los usuarios. Aquí te presentamos algunas sugerencias:
altapropiado para tu imagen: Tu imagen debe tener un textoaltrelevante que describa el contenido o propósito de la imagen. Esto será leído por lectores de pantalla, permitiendo a usuarios con discapacidades visuales entender el contexto del mapa de puntos de acceso.Usa atributos ARIA para describir la relación entre la imagen y los botones: Puedes usar el atributo
aria-describedbypara señalar una descripción del mapa de puntos de acceso, y el atributoaria-labelledbypara enlazar los botones con sus correspondientes ubicaciones en el mapa. También puedes usar el atributorolepara describir el tipo de elemento (por ejemplo,role="img"para la imagen,role="button"para los botones).Incluye un enlace de salto al inicio de tu página: Un enlace de salto permitirá a los usuarios saltar el mapa de puntos de acceso y acceder directamente al contenido principal de tu página. Esto es especialmente útil para usuarios que pueden encontrar difícil o que les tome tiempo navegar el mapa usando un lector de pantalla.
Usa texto visualmente oculto para describir el propósito de los botones: Puedes usar CSS para visualmente ocultar parte del texto que describe el propósito de los botones, de manera que este texto esté disponible para lectores de pantalla pero no se muestre en la página. Esto hará claro para usuarios con discapacidades que los botones son enlaces a ubicaciones específicas en el mapa.
Siguiendo estas pautas puedes asegurarte de que tu mapa de puntos de acceso sea accesible para todos los usuarios, incluyendo aquellos con discapacidades visuales o cognitivas.