Los mapas interactivos accesibles permiten completar la misma tarea de ubicación mediante teclado, tecnología de asistencia o toque, sin depender de arrastrar, del color ni de un pin que sea necesario ver. La búsqueda, una lista de resultados, los detalles y una respuesta que nombra el lugar realizan la tarea. El mapa sigue siendo la vista visual de ese estado compartido.
Las secciones siguientes separan la tarea del lienzo y después cubren la identidad del lugar, el orden del teclado, el arrastre, el color, los anuncios y las respuestas de IA. Una excepción de redistribución para el mapa no exime al resto de la página. Kaleidr Studio, Viewer y Chat se sitúan junto a los controles del host que hacen operable la tarea.
Aspectos esenciales de los mapas interactivos accesibles
- Nombrar la tarea: buscar, comparar, seleccionar y actuar son el trabajo. El lienzo es una vista de ese trabajo.
- Compartir un único identificador de lugar: la lista, el marcador, los detalles y la respuesta de IA se refieren al mismo registro.
- Ofrecer una ruta sin arrastre: botones para desplazar el mapa, un objetivo que se pueda tocar, entrada de dirección y controles para subir o bajar acompañan al arrastre.
- No codificar significado solo con color: el estado necesita texto, forma o un icono además del tono.
- Anunciar el resultado: un recuento de resultados, una ruta lista o una coincidencia vacía pertenecen a un mensaje de estado. Las cargas de teselas no.
¿Qué son los mapas interactivos accesibles?
Los mapas interactivos accesibles son experiencias de ubicación en las que quienes usan teclado, tecnologías de asistencia y dispositivos apuntadores pueden completar la misma tarea. La tarea puede ser encontrar un museo con acceso sin escalones, comparar tres bibliotecas o elegir una farmacia que siga abierta. El mapa muestra relaciones espaciales. La búsqueda, los filtros, una lista de resultados, los detalles y una respuesta escrita proporcionan los datos que una persona necesita cuando el lienzo es difícil de ver, arrastrar o tocar. Una interfaz que solo funciona con puntero es un mapa visual, no uno accesible.
WCAG 2.2 es una Recomendación del W3C con fecha del 12 de diciembre de 2024. La recomendación es el estándar web vigente que esta guía aplica a tareas con mapas, incluidos el foco, el arrastre, el tamaño de objetivo, el color, el contraste y la redistribución (W3C, 2024). La portada combina una lista de resultados con un mapa y una respuesta que nombra City Museum, una distancia de ejemplo y servicios de ejemplo. Esas distancias y etiquetas de servicios son ilustrativas. Una tarjeta de producción debe exponer campos reales del registro del lugar, y un filtro llamado «Accesible» no demuestra que un recinto haya sido auditado.
¿Por qué empezar por la tarea y no por el lienzo?
Un recorrido que solo usa el mapa pide a la persona explorar el lienzo, encontrar un pin, leer una ventana emergente y después actuar. Ese recorrido exige interpretación visual y precisión del puntero. Un recorrido accesible comienza con una búsqueda o una indicación, continúa con una lista estructurada de resultados, después con los detalles del lugar y finalmente con una acción como obtener indicaciones, guardar o compartir. El mapa se actualiza junto a esos pasos y no es la única forma de recorrerlos. La guía de Kaleidr para insertar mapas ya pide encabezados, resúmenes y una lista de ubicaciones fuera del lienzo para que la página siga siendo útil para usuarios de teclado, tecnologías de asistencia y búsqueda (Kaleidr, 2026).
El recorrido de la izquierda trata el mapa como la interfaz y marca la interpretación visual y la precisión del puntero como requisitos. El de la derecha pasa por búsqueda, lista de resultados, detalles y una acción, con el mapa como vista de apoyo. Los nombres, direcciones y distancias de bibliotecas son ejemplos. La separación es una decisión de arquitectura, no una puntuación de Kaleidr.
Coloque el registro esencial en HTML. Un nombre, una dirección, una categoría, el horario y la siguiente acción deben existir incluso si las teselas del mapa fallan. La ventana emergente puede repetir esos datos. No puede ser la única copia. Los identificadores estables de lugar, tratados a continuación, mantienen la fila de la lista y el marcador unidos al mismo registro.
¿Por qué importa un único identificador de lugar?
La búsqueda, la tarjeta de resultado, el panel de detalles, el marcador del mapa, la respuesta de IA y un evento de analítica deben compartir un único identificador de lugar. Si el identificador cambia de significado entre superficies, una persona que usa teclado puede seleccionar FreshMart en la lista mientras el mapa resalta otra tienda y la respuesta describe una tercera. La figura coloca ese identificador en el centro y lo distribuye a cada superficie. Las direcciones, la valoración por estrellas, el número de reseñas, el teléfono, las coordenadas y la marca de tiempo de la figura son ejemplos, no un registro activo de Kaleidr.
Un identificador de lugar compartido alimenta la tarjeta de resultado, el panel de detalles, el marcador, la respuesta y el evento de analítica. Cada superficie muestra el mismo nombre y dirección. La valoración, el teléfono, las coordenadas y la hora del evento de la figura son ejemplos. La analítica de producción debe conservar el identificador y evitar copiar campos que el evento no necesita.
La selección sigue al identificador, no a una coordenada de pantalla. Activar una fila de la lista establece el lugar seleccionado, mueve el mapa y actualiza los detalles sin obligar a la persona a buscar el pin. Hacer clic en un marcador hace lo contrario y resalta la misma fila. No mueva el foco del teclado al mapa con cada selección, o una persona que usa lector de pantalla perderá su posición en la lista. Foco y selección son estados distintos, y la sección siguiente los mantiene separados.
¿Qué orden de teclado permite completar la tarea?
Diseñe el orden del foco alrededor de la tarea. Una secuencia práctica es búsqueda, filtros, resumen de resultados, lista de resultados, controles del mapa, detalles y acción principal. La persona puede entender el recuento, elegir un lugar de la lista, desplazar o acercar el mapa si quiere, leer los detalles y después obtener indicaciones. Los marcadores del mapa no necesitan cada uno un punto de tabulación si la lista ya expone los mismos lugares. Las flechas pueden moverse dentro de la lista. Tab se desplaza entre las regiones mayores.
El recorrido va de la búsqueda a los filtros, un resumen de resultados, la lista, los controles del mapa, los detalles y la acción principal. Un parque seleccionado permanece vinculado a su fila de lista y a su tarjeta de detalle. El recuento y las distancias de ejemplo son ilustrativos. El orden del foco sigue la tarea y el mapa es una sola parada, no un campo de pines.
El contenido creado por el autor que oculta por completo un control enfocado, como una barra de búsqueda fija o un panel de chat, no cumple el criterio de conformidad 2.4.11 (AA) de WCAG 2.2. La nota 2 de ese criterio permite que el contenido abierto por la persona, como un cajón de detalles, oculte el control si puede mostrarlo sin avanzar el foco del teclado. La ocultación parcial, cuando parte del control sigue visible, es el criterio de conformidad 2.4.12 (AAA). El foco visible y la selección visible necesitan estilos distintos, porque una fila azul y un anillo de foco responden a preguntas diferentes. La guía de teclado de WAI-ARIA indica a los autores que distingan el foco de la selección, especialmente cuando los elementos seleccionados están en un componente que no mantiene el foco (W3C, 2026). Mantenga un anillo de foco en el control que recibirá la siguiente tecla y un tratamiento de selección separado para el lugar.
¿Por qué el arrastre no puede ser la única ruta?
Los mapas invitan a arrastrar, pero arrastrar no puede ser la única forma de desplazar el mapa, establecer una parada o reordenar una ruta. El criterio de conformidad 2.5.7 de WCAG 2.2 indica que la funcionalidad que usa un movimiento de arrastre debe poder realizarse con un único puntero sin arrastrar, salvo que el arrastre sea esencial o que el agente de usuario determine el comportamiento y el autor no lo haya modificado. Una alternativa de teclado, por sí sola, no cumple ese requisito de puntero. Ofrezca botones direccionales para desplazar, un toque que establezca el destino, un campo de dirección y controles para subir o bajar paradas ordenadas. El criterio de conformidad 2.5.8 de la misma recomendación establece un tamaño mínimo del objetivo de 24 por 24 píxeles CSS, con excepciones que incluyen el espaciado y un control equivalente en otra parte de la página.
El panel izquierdo muestra el arrastre como única forma de mover el mapa. El derecho añade botones de desplazamiento, un objetivo táctil, un campo de dirección, botones de reordenación y teclas de teclado para desplazar. La dirección de ejemplo es ilustrativa. Una ruta por teclado sigue siendo necesaria y no sustituye a la alternativa de un solo puntero al arrastre.
Permita salir del mapa sin atrapar el teclado. Si las flechas desplazan el mapa mientras el foco está sobre él, Escape o una tecla documentada debe devolver el foco a la lista o al siguiente control. Zoom, ubicación y cerrar necesitan nombres accesibles, no botones solo con iconos que un lector de pantalla no pueda etiquetar. El tamaño del objetivo importa en esos controles y en las filas de lista, donde un área de pulsación diminuta perjudica a quienes tocan o utilizan un puntero con menor precisión.
¿Por qué el color no basta en un mapa?
El criterio de conformidad 1.4.1 dice que el color no puede ser el único medio visual para transmitir información, indicar una acción, solicitar una respuesta o distinguir un elemento. Un punto verde para abierto y uno rojo para cerrado falla cuando el tono es la única diferencia. Combine el color con una etiqueta, una marca de verificación, una cruz u otra forma. La misma regla se aplica a marcadores de categoría, rutas seleccionadas y «usted está aquí». El criterio de conformidad 1.4.11 de la misma recomendación también pide una relación de contraste de al menos 3:1 para la información visual necesaria para identificar componentes y estados de la interfaz de usuario, salvo componentes inactivos o aquellos cuya apariencia determine el agente de usuario. Un botón de zoom blanco sobre un mapa base claro puede no alcanzar esa relación aunque los colores de marca se vean bien sobre una página blanca.
El ejemplo débil usa un círculo verde para Abierto y uno rojo para Cerrado. El ejemplo más sólido añade una marca de verificación, una cruz, una forma de advertencia y las palabras Abierto, Cerrado y Retrasado. El color sigue ayudando. El texto y la forma transmiten el significado cuando el color no puede percibirse.
Las leyendas deben estar en texto, no solo en una clave coloreada dibujada sobre el mapa. Un filtro de categoría debe indicar su estado seleccionado en el nombre del control o en una etiqueta adyacente. No diga a la persona en el texto de la interfaz que «siga el pin rojo». Nombre el lugar. La sección de IA siguiente aplica esa regla a las respuestas generadas.
¿Qué debe oír la tecnología de asistencia?
Anuncie el resultado de una acción, no el renderizador. Un estado útil dice que cuatro tiendas coinciden con los filtros, que una ruta está lista y cuánto tarda, o que no hay coincidencias de entradas accesibles. «Tesela cargada», «marcador movido» y «centro del mapa cambiado» son ruido. Una región activa alrededor de todo el mapa leerá esos eventos técnicos y enterrará la frase que la persona necesitaba. WAI documenta una técnica, ARIA22, para usar role=status al presentar mensajes de estado. La técnica es un ejemplo de una forma de cumplir WCAG, no un requisito de que todos los mapas usen exactamente ese rol (W3C, 2026).
El canal útil informa del recuento de resultados, una ruta lista y una coincidencia vacía de entradas accesibles. El canal ignorado enumera cargas de teselas, movimientos de marcadores y cambios del centro del mapa. Los nombres de tiendas, las distancias y la ruta de 18 minutos son ejemplos. Anuncie el estado sobre el que la persona puede actuar.
La búsqueda y los filtros necesitan la misma disciplina. Después de una consulta, informe una vez del recuento o del estado vacío, no de un flujo de actualizaciones de marcadores. Mantenga el anuncio lo bastante breve para interrumpir con cortesía. No mueva el foco al mapa cuando cambie el recuento. La lista sigue siendo el lugar donde la persona lee las coincidencias y el mapa refleja el mismo conjunto.
¿Por qué la respuesta de IA debe nombrar el lugar?
Una respuesta de IA sobre el mapa debe sostenerse por sí sola en texto. «Downtown Pharmacy está abierta hasta medianoche y está a 1,2 millas de su origen seleccionado» nombra el lugar, el horario y la distancia. «He resaltado el pin rojo» apunta al lienzo y falla para cualquiera que no pueda ver ese pin. El mapa puede seleccionar el mismo lugar y dibujar una ruta. La frase aun debe contener la decisión. Envíe la respuesta final, o un resumen breve, al canal de estado. No envíe cada token a la tecnología de asistencia ni lleve el foco al chat con cada fragmento.
La respuesta útil nombra Downtown Pharmacy, la hora de cierre y la distancia desde un origen seleccionado. El mapa muestra ese lugar y una ruta. La respuesta rechazada solo dice que se resaltó un pin rojo. El nombre de la farmacia, el horario y la distancia de la figura son ejemplos.
Mantenga al modelo fuera de la decisión de acceso. El host autoriza los registros, y la respuesta solo puede describir lugares que ya estén en el conjunto de resultados. No permita que el texto generado invente una entrada sin escalones, un baño accesible o una certificación que los datos fuente no contengan. Si el registro carece de un campo de accesibilidad, la respuesta debe indicar que ese dato es desconocido. Un resaltado en el mapa es una confirmación opcional, no el contenido de la respuesta.
¿Qué sigue funcionando cuando el mapa no puede redistribuirse?
El criterio de conformidad 1.4.10 de WCAG 2.2 considera que ciertos contenidos requieren una disposición bidimensional para su uso o significado. La Nota 2 enumera imágenes necesarias para la comprensión, como mapas y diagramas, y acepta el desplazamiento bidimensional para esas partes. La excepción cubre el mapa. No cubre el encabezado de la página, la búsqueda, los filtros, el texto de resultados, los botones, la respuesta de IA ni la tarjeta de detalle. Con un ancho reducido o un zoom alto, coloque la lista encima o debajo del mapa, mantenga el mapa en su propia región desplazable y deje el texto fuera de esa región. La persona debe poder completar la tarea aunque el lienzo sea un panel pequeño.
Los fallos necesitan la misma separación. Si las teselas no cargan, la lista de resultados, los detalles y la acción principal permanecen. Diga que el mapa no se cargó y mantenga disponibles los registros. Un lienzo en blanco sin texto es una tarea rota, no un problema de estilo. El movimiento reducido también pertenece aquí. No dependa de una larga animación de vuelo para comunicar qué lugar se seleccionó. Mueva la selección y actualice la lista incluso cuando el movimiento de cámara se acorte o se omita.
¿Dónde deben situarse los mapas interactivos accesibles junto a Kaleidr?
Mantenga búsqueda, filtros, lista de resultados, detalles, acciones principales y mensajes de estado en la página del host. Comparta con el mapa identificadores de lugar, ruta, selección, filtro y conjunto de resultados. Kaleidr Studio es donde los equipos convierten ideas en mapas interactivos con ubicaciones, contenido y comportamiento (Kaleidr, 2026). Viewer inserta un mapa publicado mediante su share id y no requiere una publishable key para esa inserción (Kaleidr, 2026). La documentación de desarrollo describe Chat como Spatial AI en el mapa del host, Viewer como publicación de un mapa, Tile como mapas base diseñados y Editor como dibujo y edición (Kaleidr, 2026). El host sigue siendo responsable de la ruta accesible alrededor de esas superficies.
La página del host es responsable de búsqueda, filtros, lista de resultados, detalles, acciones y mensajes de estado. Los identificadores compartidos conectan esa página con Studio, Viewer, Chat y el mapa. El pie de la figura dice que Kaleidr no garantiza automáticamente la conformidad con WCAG. Probar la experiencia publicada sigue siendo responsabilidad del editor.
Una plantilla o un componente de mapa puede aportar una base. La guía de lanzamiento sin código dice que una plantilla no puede garantizar la conformidad una vez que un editor añade colores, contenido y comportamiento del mapa, porque la conformidad corresponde a lo que realmente se publica (Kaleidr, 2026). Pruebe la tarea completa con teclado, lector de pantalla, zoom y una ventana estrecha. Incluya un caso de fallo en el que el mapa no cargue. Este artículo es una guía de implementación, no una auditoría de conformidad ni asesoramiento jurídico.
Explorar Kaleidr Studio para diseñar y publicar el mapa. Leer la documentación para desarrolladores para las superficies documentadas Chat, Viewer, Tile y Editor. Mantenga la lista de resultados y la respuesta que nombra el lugar en la página del host, vinculadas al mismo identificador de lugar que usa el mapa.
Nota: Kaleidr utiliza herramientas asistidas por IA para la creación de imágenes, el refinamiento de contenido y la investigación en sus flujos de trabajo creativos y de desarrollo.
Preguntas frecuentes
¿Una alternativa de teclado sustituye a una ruta de puntero sin arrastre?
No. WCAG 2.2 pide una forma con un único puntero de completar una acción de arrastre, salvo que arrastrar sea esencial o que el agente de usuario determine el comportamiento. El acceso por teclado es un requisito separado para la misma tarea.
¿La excepción de redistribución del mapa cubre la búsqueda y la lista de resultados?
No. Los mapas y diagramas pueden conservar desplazamiento bidimensional. Los encabezados, la búsqueda, los filtros, los resultados, los botones y la respuesta de IA deben seguir siendo utilizables cuando la página es estrecha o está ampliada.
¿Kaleidr garantiza la conformidad con WCAG de un mapa publicado?
No. Studio, Viewer y Chat son superficies de producto. La conformidad depende de la página publicada, incluidas las etiquetas, el contraste, la lista de resultados, los mensajes de estado y las pruebas.
¿Debe una respuesta de IA sobre un mapa decir «el pin rojo»?
No. Nombre el lugar, el estado relevante y la distancia o la ruta en texto. El mapa puede seleccionar ese mismo lugar. La frase debe sostenerse sin el lienzo.
References
- World Wide Web Consortium. Web Content Accessibility Guidelines (WCAG) 2.2. W3C Recommendation, December 12, 2024. Includes 2.4.11 Focus Not Obscured (Minimum), 2.4.12 Focus Not Obscured (Enhanced), 2.5.7 Dragging Movements, 2.5.8 Target Size (Minimum), 1.4.1 Use of Color, 1.4.11 Non-text Contrast, and the 1.4.10 Reflow note that lists maps and diagrams. Accessed October 7, 2026. https://www.w3.org/TR/WCAG22/
- Kaleidr. Embed Interactive Map on a Website. Asks for headings, summaries, and a location list outside the canvas. https://kaleidr.com/blog/how-to-embed-interactive-map-on-a-website
- W3C Web Accessibility Initiative. Developing a Keyboard Interface. Distinguishes keyboard focus from selection. Accessed October 7, 2026. https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/
- W3C Web Accessibility Initiative. ARIA22: Using role=status to present status messages. An example technique, not a required implementation. Accessed October 7, 2026. https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA22
- Kaleidr. AI Map Maker for Branded Interactive Maps. Studio turns ideas into interactive maps with locations, content, and behavior. Accessed October 7, 2026. https://kaleidr.com/studio
- Kaleidr Developer Docs. Viewer. Embeds a published map by its share id, and that embed does not require a publishable key. Accessed October 7, 2026. https://docs.kaleidr.com/viewer
- Kaleidr Developer Docs. Introduction. Chat is Spatial AI in the host map, Editor is draw and edit, Tile is designed basemaps, and Viewer publishes a map. Accessed October 7, 2026. https://docs.kaleidr.com/
- Kaleidr. Launch a No-Code Map Website. A template does not guarantee conformance of the experience a publisher ships. https://kaleidr.com/blog/launch-a-map-website-no-code
@misc{w3c_wcag22_2024,
title = {Web Content Accessibility Guidelines (WCAG) 2.2},
author = {{World Wide Web Consortium}},
year = {2024},
url = {https://www.w3.org/TR/WCAG22/}
}
@misc{kaleidr_embed_map_2026,
title = {Embed Interactive Map on a Website},
author = {{Kaleidr}},
year = {2026},
url = {https://kaleidr.com/blog/how-to-embed-interactive-map-on-a-website}
}
@misc{w3c_keyboard_interface_2026,
title = {Developing a Keyboard Interface},
author = {{World Wide Web Consortium}},
year = {2026},
url = {https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/}
}
@misc{w3c_aria22_2026,
title = {ARIA22: Using role=status to present status messages},
author = {{World Wide Web Consortium}},
year = {2026},
url = {https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA22}
}
@misc{kaleidr_studio_a11y_2026,
title = {AI Map Maker for Branded Interactive Maps},
author = {{Kaleidr}},
year = {2026},
url = {https://kaleidr.com/studio}
}
@misc{kaleidr_docs_viewer_a11y_2026,
title = {Viewer},
author = {{Kaleidr}},
year = {2026},
url = {https://docs.kaleidr.com/viewer}
}
@misc{kaleidr_docs_home_a11y_2026,
title = {Introduction},
author = {{Kaleidr}},
year = {2026},
url = {https://docs.kaleidr.com/}
}
@misc{kaleidr_launch_map_2026,
title = {Launch a No-Code Map Website},
author = {{Kaleidr}},
year = {2026},
url = {https://kaleidr.com/blog/launch-a-map-website-no-code}
}