Mapas interativos acessíveis permitem que alguém conclua a mesma tarefa de localização usando teclado, tecnologia assistiva ou toque, sem depender de arrastar, de cor ou de um pin que precise enxergar. Busca, lista de resultados, detalhes e uma resposta que nomeia o local realizam a tarefa. O mapa continua sendo a visualização desse estado compartilhado.
As seções abaixo separam a tarefa do canvas e depois tratam de identidade do local, ordem de teclado, arraste, cor, anúncios e respostas de IA. Uma exceção de reflow para o mapa não isenta o restante da página. Kaleidr Studio, Viewer e Chat ficam ao lado dos controles do host que tornam a tarefa operável.
Fundamentos de mapas interativos acessíveis
- Nomeie a tarefa: buscar, comparar, selecionar e agir são o trabalho. O canvas é uma visualização desse trabalho.
- Compartilhe um único identificador de local: a lista, o marcador, os detalhes e a resposta de IA se referem ao mesmo registro.
- Ofereça um caminho sem arraste: botões de pan, um alvo tocável, entrada de endereço e controles para mover para cima ou para baixo acompanham o arraste.
- Não codifique significado apenas pela cor: o status precisa de texto, forma ou ícone além da tonalidade.
- Anuncie o resultado: uma contagem de resultados, uma rota pronta ou nenhum resultado pertencem a uma mensagem de status. Carregamentos de tiles não.
O que são mapas interativos acessíveis?
Mapas interativos acessíveis são experiências de localização nas quais usuários de teclado, tecnologias assistivas e dispositivos apontadores conseguem concluir a mesma tarefa. A tarefa pode ser encontrar um museu com entrada sem degraus, comparar três bibliotecas ou escolher uma farmácia que continue aberta. O mapa mostra relações espaciais. Busca, filtros, lista de resultados, detalhes e uma resposta escrita fornecem os fatos de que a pessoa precisa quando o canvas é difícil de ver, arrastar ou tocar. Uma interface que funciona apenas com ponteiro é um mapa visual, não um mapa acessível.
WCAG 2.2 é uma Recomendação do W3C datada de 12 de dezembro de 2024. A recomendação é o padrão web atual que este guia aplica a tarefas com mapas, incluindo foco, arraste, tamanho do alvo, cor, contraste e reflow (W3C, 2024). A capa combina uma lista de resultados com um mapa e uma resposta que nomeia City Museum, uma distância de exemplo e comodidades de exemplo. Essas distâncias e rótulos de comodidades são ilustrativos. Um card de produção deve expor campos reais do registro do local, e um filtro chamado “Acessível” não comprova que o local foi auditado.
Por que começar pela tarefa em vez do canvas?
Um caminho que usa apenas o mapa pede que a pessoa explore o canvas, encontre um pin, leia um popup e depois aja. Esse caminho exige interpretação visual e precisão do ponteiro. Um caminho acessível começa com busca ou prompt, segue para uma lista estruturada de resultados, depois para detalhes do local e então para uma ação como obter direções, salvar ou compartilhar. O mapa é atualizado ao lado dessas etapas e não é a única forma de percorrê-las. O guia de incorporação da Kaleidr já pede títulos, resumos e uma lista de locais fora do canvas para que a página continue útil para usuários de teclado, tecnologias assistivas e busca (Kaleidr, 2026).
O caminho da esquerda trata o mapa como a interface e marca interpretação visual e precisão do ponteiro como requisitos. O caminho da direita passa por busca, lista de resultados, detalhes e uma ação, com o mapa como visualização de apoio. Nomes de bibliotecas, endereços e distâncias de exemplo são ilustrativos. A divisão é uma escolha de arquitetura, não uma pontuação da Kaleidr.
Coloque o registro essencial em HTML. Nome, endereço, categoria, horários e a próxima ação devem existir mesmo quando os tiles do mapa falham. O popup pode repetir esses fatos. Ele não pode ser a única cópia. Identificadores estáveis de local, abordados a seguir, mantêm a linha da lista e o marcador vinculados ao mesmo registro.
Por que um único identificador de local importa?
Busca, card de resultado, painel de detalhes, marcador do mapa, resposta de IA e um evento de analytics devem compartilhar um único identificador de local. Quando o identificador muda de significado entre superfícies, um usuário de teclado pode selecionar FreshMart na lista enquanto o mapa destaca outra loja e a resposta descreve uma terceira. A figura centraliza esse identificador e o distribui para cada superfície. Endereços de exemplo, avaliação por estrelas, quantidade de avaliações, telefone, coordenadas e timestamp mostrados na figura são ilustrativos, não um registro ao vivo da Kaleidr.
Um identificador de local compartilhado alimenta o card de resultado, o painel de detalhes, o marcador, a resposta e o evento de analytics. Cada superfície mostra o mesmo nome e endereço. Avaliação, telefone, coordenadas e horário do evento na figura são exemplos. Analytics de produção devem manter o identificador e evitar copiar campos que o evento não precisa.
A seleção segue o identificador, não uma coordenada de tela. Ativar uma linha da lista define o local selecionado, move o mapa e atualiza os detalhes sem obrigar a pessoa a procurar o pin. Clicar em um marcador faz o caminho inverso e destaca a mesma linha. Não mova o foco do teclado para o mapa a cada seleção, ou um usuário de leitor de tela perde sua posição na lista. Foco e seleção são estados diferentes, e a próxima seção os mantém separados.
Qual ordem de teclado conclui a tarefa?
Projete a ordem de foco em torno da tarefa. Uma sequência viável é busca, filtros, resumo dos resultados, lista de resultados, controles do mapa, detalhes e ação principal. A pessoa consegue entender a contagem, escolher um local na lista, fazer pan ou zoom se quiser usar o mapa, ler os detalhes e depois obter direções. Os marcadores do mapa não precisam ter cada um um ponto de tabulação quando a lista já expõe os mesmos locais. As setas podem mover dentro da lista. Tab move entre as regiões maiores.
O caminho vai da busca para filtros, resumo dos resultados, lista, controles do mapa, detalhes e ação principal. Um parque selecionado permanece vinculado à sua linha na lista e ao card de detalhes. A contagem e as distâncias de exemplo são ilustrativas. A ordem de foco segue a tarefa, e o mapa é uma única parada em vez de um campo de pins.
Conteúdo criado pelo autor que oculta totalmente um controle em foco, como uma barra de busca fixa ou um painel de chat, não atende ao critério de sucesso 2.4.11 (AA) do WCAG 2.2. A nota 2 desse critério permite que conteúdo aberto pela pessoa, como uma gaveta de detalhes, oculte o controle se ela puder revelá-lo sem avançar o foco do teclado. A ocultação parcial, quando parte do controle continua visível, é o critério de sucesso 2.4.12 (AAA). Foco visível e seleção visível precisam de estilos diferentes, porque uma linha azul da lista e um anel de foco respondem a perguntas diferentes. A orientação de teclado do WAI-ARIA diz aos autores para distinguirem foco de seleção, especialmente quando itens selecionados ficam em um componente que não mantém o foco (W3C, 2026). Mantenha um anel de foco no controle que receberá a próxima tecla e um tratamento de seleção separado no local.
Por que arrastar não pode ser o único caminho?
Mapas convidam ao arraste, mas arrastar não pode ser a única forma de deslocar o mapa, definir uma parada ou reordenar uma rota. O critério de sucesso 2.5.7 do WCAG 2.2 diz que uma funcionalidade que usa movimento de arraste deve poder ser realizada com um único ponteiro sem arrastar, a menos que o arraste seja essencial ou que o agente de usuário determine o comportamento e o autor não o tenha modificado. Uma alternativa de teclado, sozinha, não atende a esse requisito de ponteiro. Ofereça botões direcionais de pan, um toque que defina o destino, um campo de endereço e controles para mover paradas ordenadas para cima ou para baixo. O critério de sucesso 2.5.8 da mesma recomendação define tamanho mínimo de alvo de 24 por 24 pixels CSS, com exceções que incluem espaçamento e um controle equivalente em outro lugar da página.
O painel esquerdo mostra o arraste como única forma de mover o mapa. O painel direito acrescenta botões de pan, um alvo tocável, campo de endereço, botões de reordenação e teclas de teclado para pan. O endereço de exemplo é ilustrativo. Um caminho por teclado continua necessário e não substitui a alternativa de ponteiro único ao arraste.
Permita sair do mapa sem prender o teclado. Se as setas fizerem pan enquanto o foco está no mapa, Escape ou uma tecla documentada deve devolver o foco à lista ou ao próximo controle. Zoom, localizar e fechar precisam de nomes acessíveis, não apenas botões de ícone que um leitor de tela não consiga nomear. O tamanho do alvo importa nesses controles e também nas linhas da lista, onde uma área de toque minúscula prejudica quem toca ou usa um ponteiro com menos precisão.
Por que a cor não basta em um mapa?
O critério de sucesso 1.4.1 diz que a cor não pode ser o único meio visual de transmitir informação, indicar uma ação, solicitar uma resposta ou distinguir um elemento. Um ponto verde para aberto e um ponto vermelho para fechado falham quando a tonalidade é a única diferença. Combine a cor com um rótulo, uma marca de verificação, uma cruz ou outra forma. A mesma regra vale para marcadores de categoria, rotas selecionadas e “você está aqui”. O critério de sucesso 1.4.11 da mesma recomendação também pede uma taxa de contraste de pelo menos 3:1 para as informações visuais necessárias para identificar componentes e estados da interface do usuário, exceto componentes inativos ou aqueles cuja aparência é determinada pelo agente de usuário. Um botão de zoom branco sobre um mapa-base claro pode não atingir essa taxa mesmo quando as cores da marca parecem boas em uma página branca.
O exemplo fraco usa um círculo verde para Aberto e um círculo vermelho para Fechado. O exemplo mais forte adiciona uma marca de verificação, uma cruz, uma forma de alerta e as palavras Aberto, Fechado e Atrasado. A cor ainda ajuda. Texto e forma carregam o significado quando a cor não pode ser vista.
Legendas devem existir em texto, não apenas em uma chave colorida pintada no mapa. Um filtro de categoria deve informar seu estado selecionado no nome do controle ou em um rótulo adjacente. Não diga a uma pessoa para “seguir o pin vermelho” no texto da interface. Nomeie o local. A seção de IA abaixo aplica essa regra às respostas geradas.
O que a tecnologia assistiva deve ouvir?
Anuncie o resultado de uma ação, não o renderizador. Um status útil diz que quatro lojas correspondem aos filtros, que uma rota está pronta e quanto tempo leva, ou que nenhuma entrada acessível corresponde. “Tile carregado”, “marcador movido” e “centro do mapa alterado” são ruído. Uma live region envolvendo todo o mapa leria esses eventos técnicos e esconderia a frase de que a pessoa precisava. O WAI documenta uma técnica, ARIA22, para usar role=status na apresentação de mensagens de status. A técnica é um exemplo de como atender ao WCAG, não um requisito de que todo mapa use exatamente esse papel (W3C, 2026).
O canal útil informa a contagem de resultados, uma rota pronta e nenhum resultado para entrada acessível. O canal ignorado lista carregamentos de tiles, movimentos de marcadores e mudanças no centro do mapa. Nomes de lojas, distâncias e a rota de 18 minutos são exemplos. Anuncie o estado sobre o qual a pessoa pode agir.
Busca e filtros precisam da mesma disciplina. Depois de uma consulta, informe a contagem ou o estado vazio uma vez, não um fluxo de atualizações de marcadores. Mantenha o anúncio curto o suficiente para interromper com educação. Não mova o foco para o mapa quando a contagem mudar. A lista continua sendo o lugar onde a pessoa lê as correspondências, e o mapa reflete o mesmo conjunto.
Por que a resposta de IA precisa nomear o local?
Uma resposta de IA sobre o mapa precisa se sustentar sozinha em texto. “Downtown Pharmacy fica aberta até meia-noite e está a 1,2 milha da origem selecionada” nomeia o local, o horário e a distância. “Destaquei o pin vermelho” aponta para o canvas e falha para qualquer pessoa que não consiga ver esse pin. O mapa pode selecionar o mesmo local e traçar uma rota. A frase ainda precisa carregar a decisão. Envie a resposta concluída, ou um breve resumo, para o canal de status. Não envie cada token para a tecnologia assistiva nem puxe o foco para o chat a cada fragmento.
A resposta útil nomeia Downtown Pharmacy, o horário de fechamento e a distância a partir de uma origem selecionada. O mapa mostra esse local e uma rota. A resposta rejeitada apenas diz que um pin vermelho foi destacado. O nome da farmácia, os horários e a distância na figura são ilustrativos.
Mantenha o modelo fora da decisão de acesso. O host autoriza os registros, e a resposta só pode descrever locais que já estejam no conjunto de resultados. Não permita que o texto gerado invente uma entrada sem degraus, um banheiro acessível ou uma certificação que os dados de origem não contenham. Se o registro não tiver um campo de acessibilidade, a resposta deve dizer que a informação é desconhecida. Um destaque no mapa é uma confirmação opcional, não o conteúdo da resposta.
O que continua funcionando quando o mapa não pode fazer reflow?
O critério de sucesso 1.4.10 do WCAG 2.2 trata alguns conteúdos como dependentes de layout bidimensional para uso ou significado. A Nota 2 lista imagens necessárias para a compreensão, como mapas e diagramas, e aceita rolagem bidimensional para essas partes. A exceção cobre o mapa. Ela não cobre o título da página, busca, filtros, texto de resultados, botões, resposta de IA ou card de detalhes. Em uma largura estreita ou com zoom alto, empilhe a lista acima ou abaixo do mapa, mantenha o mapa em sua própria região rolável e deixe o texto fora dessa região. A pessoa ainda deve conseguir concluir a tarefa quando o canvas for apenas um painel pequeno.
Falhas precisam da mesma separação. Se os tiles não carregarem, a lista de resultados, os detalhes e a ação principal permanecem. Diga que o mapa não carregou e mantenha os registros disponíveis. Um canvas vazio sem texto é uma tarefa quebrada, não um problema de estilo. Movimento reduzido também entra aqui. Não dependa de uma longa animação de fly-to para comunicar qual local foi selecionado. Mova a seleção e atualize a lista mesmo quando o movimento da câmera for reduzido ou ignorado.
Onde mapas interativos acessíveis devem ficar ao lado da Kaleidr?
Mantenha busca, filtros, lista de resultados, detalhes, ações principais e mensagens de status na página do host. Compartilhe com o mapa identificadores de local, rota, seleção, filtro e conjunto de resultados. Kaleidr Studio é onde as equipes transformam ideias em mapas interativos com locais, conteúdo e comportamento (Kaleidr, 2026). Viewer incorpora um mapa publicado por seu share id e não exige uma publishable key para essa incorporação (Kaleidr, 2026). A documentação para desenvolvedores descreve Chat como Spatial AI no mapa do host, Viewer como publicação de um mapa, Tile como mapas-base projetados e Editor como desenho e edição (Kaleidr, 2026). O host continua responsável pelo caminho acessível em torno dessas superfícies.
A página do host é responsável por busca, filtros, lista de resultados, detalhes, ações e mensagens de status. Identificadores compartilhados conectam essa página a Studio, Viewer, Chat e ao mapa. O rodapé da figura diz que a Kaleidr não garante automaticamente conformidade com WCAG. Testar a experiência publicada continua sendo responsabilidade do editor.
Um template ou componente de mapa pode fornecer uma base. O guia de lançamento sem código diz que um template não pode garantir conformidade depois que um editor adiciona cores, conteúdo e comportamento do mapa, porque a conformidade pertence ao que foi realmente publicado (Kaleidr, 2026). Teste a tarefa completa com teclado, leitor de tela, zoom e viewport estreito. Inclua um caso de falha em que o mapa não carrega. Este artigo é um guia de implementação, não uma auditoria de conformidade nem aconselhamento jurídico.
Explorar o Kaleidr Studio para projetar e publicar o mapa. Ler a documentação para desenvolvedores para as superfícies documentadas Chat, Viewer, Tile e Editor. Mantenha a lista de resultados e a resposta que nomeia o local na página do host, vinculadas ao mesmo identificador de local usado pelo mapa.
Observação: a Kaleidr usa ferramentas assistidas por IA para criação de imagens, refinamento de conteúdo e pesquisa em seus fluxos de trabalho criativos e de desenvolvimento.
Perguntas frequentes
Uma alternativa de teclado substitui um caminho de ponteiro sem arraste?
Não. WCAG 2.2 pede uma forma de ponteiro único para concluir uma ação de arraste, a menos que o arraste seja essencial ou que o agente de usuário determine o comportamento. O acesso por teclado é um requisito separado para a mesma tarefa.
A exceção de reflow do mapa cobre busca e lista de resultados?
Não. Mapas e diagramas podem manter rolagem bidimensional. Títulos, busca, filtros, resultados, botões e a resposta de IA ainda precisam continuar utilizáveis quando a página estiver estreita ou ampliada.
A Kaleidr garante conformidade com WCAG para um mapa publicado?
Não. Studio, Viewer e Chat são superfícies de produto. A conformidade depende da página publicada, incluindo rótulos, contraste, lista de resultados, mensagens de status e testes.
Uma resposta de IA sobre o mapa deve dizer “o pin vermelho”?
Não. Nomeie o local, o status relevante e a distância ou rota em texto. O mapa pode selecionar esse mesmo local. A frase precisa se sustentar sem o canvas.
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}
}