所有文章 开发者

无障碍交互式地图：WCAG 2.2

作者 The Kaleidr Team · 发布于 2026年10月7日 · 14 分钟读完

一张无障碍交互式地图，包含可通过键盘聚焦的结果列表、同步标记、路线、缩放控件，以及会明确说出所选地点名称的 AI 回答。

无障碍交互式地图让用户可以通过键盘、辅助技术或触控完成同一项位置任务，而不依赖拖动、颜色或必须看见的图钉。搜索、结果列表、详情以及明确说出地点名称的回答负责承载任务。地图则继续作为这一共享状态的可视化视图。

下面的章节先把任务与地图画布分开，再讨论地点标识、键盘顺序、拖动、颜色、提示播报以及 AI 回答。地图可以有重排例外，但这并不意味着页面其他部分也可以忽略重排。Kaleidr Studio、Viewer 和 Chat 与宿主页面上的控件配合，使任务真正可操作。

无障碍交互式地图要点

  • 先明确任务： 搜索、比较、选择和执行才是任务。画布只是这个任务的一种视图。
  • 共享一个地点标识符： 列表、标记、详情和 AI 回答都指向同一条记录。
  • 提供无需拖动的路径： 平移按钮、可点击目标、地址输入以及上移/下移控件，应与拖动操作并存。
  • 不要只用颜色编码含义： 状态除了色彩，还需要文字、形状或图标。
  • 播报结果： 结果数量、路线已准备好或无匹配结果，都应进入状态消息。地图瓦片加载则不需要。

什么是无障碍交互式地图？

无障碍交互式地图是一种位置体验，让键盘用户、辅助技术用户和指针设备用户都能完成相同的任务。任务可以是寻找有无台阶入口的博物馆、比较三家图书馆，或选择一家仍在营业的药店。地图用于展示空间关系。当画布难以看清、拖动或点击时，搜索、筛选器、结果列表、详情以及书面回答仍然提供用户完成任务所需的事实。一个只能通过指针设备操作的界面只是可视化地图，而不是无障碍地图。

WCAG 2.2 是一项日期为 2024 年 12 月 12 日的 W3C Recommendation。本指南把这一现行 Web 标准应用到地图任务中，包括焦点、拖动、目标大小、颜色、对比度和重排 (W3C, 2024)。封面把结果列表、地图和一条会说出 City Museum、示例距离及示例设施的回答放在一起。这些距离和设施标签仅作示意。生产环境中的卡片应显示地点记录中的真实字段，而一个名为“Accessible”的筛选器并不能证明某个场所已经接受无障碍审核。

为什么要从任务开始，而不是从画布开始？

只依赖地图的路径要求用户探索画布、找到图钉、阅读弹窗，然后再执行操作。这个路径依赖视觉理解和精确的指针操作。无障碍路径则从搜索或提示开始，然后进入结构化结果列表，再进入地点详情，最后执行路线、保存或分享等操作。地图会在这些步骤旁同步更新，但它不是唯一的操作路径。Kaleidr 的嵌入指南已经要求在画布外提供标题、摘要和地点列表，使页面对键盘用户、辅助技术和搜索仍然有用 (Kaleidr, 2026)。

仅通过地图进行探索、寻找图钉和阅读弹窗的路径，与通过搜索、结构化结果、地点详情、操作和同步地图完成任务的路径进行对比。

左侧路径把地图本身当作界面，并把视觉理解和指针精度作为要求。右侧路径通过搜索、结果列表、详情和操作推进，地图只是辅助视图。示例中的图书馆名称、地址和距离仅作说明。这种划分是一项架构选择，不是 Kaleidr 的评分。

把关键记录放在 HTML 中。即使地图瓦片加载失败，名称、地址、类别、营业时间和下一步操作仍应存在。弹窗可以重复这些事实，但不能成为唯一副本。下一节讨论的稳定地点标识符，可以让列表行和地图标记始终绑定到同一条记录。

为什么一个统一的地点标识符很重要？

搜索、结果卡片、详情面板、地图标记、AI 回答和分析事件都应共享同一个地点标识符。如果这个标识符在不同界面中的含义发生变化，键盘用户可能在列表中选择 FreshMart，而地图高亮的是另一家店，回答又描述第三家店。图中把这个标识符放在中心并分发到各个界面。图里的示例街道地址、星级、评论数量、电话号码、坐标和时间戳仅作说明，并不是实时的 Kaleidr 记录。

一个地点标识符连接结果卡片、详情面板、地图标记、AI 回答和分析事件。

共享地点标识符为结果卡片、详情面板、标记、回答和分析事件提供同一个依据。每个界面都显示同一个名称和地址。图中的评分、电话号码、坐标和事件时间都是示例。生产分析应保留标识符，并避免复制事件并不需要的字段。

选择状态应跟随标识符，而不是屏幕坐标。激活列表中的某一行后，系统设置所选地点、移动地图并更新详情，不需要让用户再去寻找图钉。点击地图标记则反向操作，并高亮同一行。不要在每次选择后都把键盘焦点移到地图，否则屏幕阅读器用户会失去自己在列表中的位置。焦点和选择是两种不同状态，下一节会继续区分它们。

什么样的键盘顺序能够完成任务？

围绕任务设计焦点顺序。一个可行的顺序是：搜索、筛选器、结果摘要、结果列表、地图控件、详情、主要操作。用户可以理解结果数量，从列表中选择地点，需要时再平移或缩放地图，阅读详情，然后获取路线。只要列表已经提供相同地点，就不需要给每个地图标记都设置一个 Tab 停靠点。方向键可以在列表内部移动，Tab 则在较大的区域之间移动。

一个带编号的键盘路径，从搜索和筛选器开始，经过结果列表、地图控件和详情，最后到达主要操作。

路径从搜索进入筛选器、结果摘要、列表、地图控件、详情和主要操作。所选公园始终与其列表行和详情卡片保持关联。结果数量和示例距离仅作说明。焦点顺序跟随任务，地图是一个停靠点，而不是由许多图钉组成的 Tab 区域。

固定搜索栏或聊天面板这类作者创建的内容如果把获得焦点的控件完全挡住，就不满足 WCAG 2.2 的成功标准 2.4.11（AA）。该标准的注 2 允许用户打开的内容（例如详情抽屉）遮挡焦点，前提是用户无需移动键盘焦点就能重新显示该控件。只遮住控件的一部分，则属于成功标准 2.4.12（AAA）。可见焦点和可见选择需要不同的样式，因为蓝色列表行和焦点环表示的是不同状态。WAI-ARIA 的键盘指南也要求作者区分焦点和选择，尤其是在选中项位于一个本身不持有焦点的组件中时 (W3C, 2026)。将焦点环保留在下一次键盘输入会作用的控件上，并为地点选择使用独立的选中样式。

为什么拖动不能成为唯一的操作路径？

地图天然鼓励拖动，但拖动不能成为平移地图、设置停靠点或重新排序路线的唯一方法。WCAG 2.2 的成功标准 2.5.7 规定，使用拖动动作的功能应能够通过单一指针在不拖动的情况下完成，除非拖动本身是必要的，或者该行为由用户代理决定且作者没有修改它。单有键盘替代方案并不能满足这一指针要求。应提供方向平移按钮、点击设置目的地、地址输入字段，以及用于将有序停靠点上移或下移的控件。同一建议中的成功标准 2.5.8 还规定了 24×24 CSS 像素的最小目标大小，并为间距、页面其他位置的等效控件等情况设置例外。

把只能拖动的地图操作标为唯一路径，并与平移按钮、点击设置目的地、地址输入、列表重新排序按钮和键盘平移按键进行对比。

左侧面板把拖动作为移动地图的唯一方式。右侧面板增加平移按钮、可点击目标、地址字段、重新排序按钮和键盘平移按键。示例地址仅作说明。键盘路径仍然需要，但它不能替代针对拖动操作提供的单指针方案。

让用户能够离开地图，而不会被键盘困在其中。如果焦点位于地图时方向键会平移地图，那么 Escape 或文档中明确说明的按键应能把焦点送回列表或下一个控件。缩放、定位和关闭按钮都需要无障碍名称，而不能只是屏幕阅读器无法识别标签的纯图标按钮。目标大小对这些控件和列表行都很重要；过小的点击区域会给触控用户或使用精度较低指针设备的人带来困难。

为什么地图不能只靠颜色传达信息？

成功标准 1.4.1 规定，颜色不能成为传递信息、指示操作、提示响应或区分元素的唯一视觉方式。如果“营业中”只用绿色圆点、“已关闭”只用红色圆点，而唯一差异就是颜色，那么这种设计就不够。应把颜色与文字标签、勾选、叉号或其他形状组合起来。同样的规则也适用于类别标记、选中路线和“您在这里”。同一建议中的成功标准 1.4.11 还要求，用于识别用户界面组件和状态的必要视觉信息至少达到 3:1 的对比度，但非活动组件或外观由用户代理决定的组件除外。浅色底图上的白色缩放按钮可能达不到这个比例，即使品牌颜色在白色页面上看起来很好。

仅用彩色圆点显示营业中和已关闭，与通过图标、形状和文字标签显示营业中、已关闭和延迟进行对比。

较弱的示例使用绿色圆表示“营业中”，红色圆表示“已关闭”。更强的示例增加勾选、叉号、警告形状以及“营业中”“已关闭”“延迟”等文字。颜色仍然有帮助，但当颜色无法被识别时，文字和形状负责传达含义。

图例应以文字形式存在，而不能只是在地图上画一个彩色图例。类别筛选器应在控件名称或相邻标签中说明其选中状态。界面文案不要告诉用户“跟着红色图钉走”，而要直接说出地点名称。下面的 AI 部分也把这条规则应用到生成式回答。

辅助技术应该听到什么？

播报操作结果，而不是渲染器事件。有效的状态消息可以说：有四家店符合筛选条件、路线已准备好以及需要多长时间，或者没有符合条件的无障碍入口。“瓦片已加载”“标记已移动”“地图中心已变化”都是噪音。如果给整张地图包一个 live region，它会读出这些技术事件，并掩盖用户真正需要的句子。WAI 记录了一项 ARIA22 技术，用 role=status 来呈现状态消息。这只是一种满足 WCAG 的示例方法，并不要求每张地图都必须使用这一 role (W3C, 2026)。

用于播报结果数量、路线已准备好、没有无障碍入口匹配结果的状态消息，与瓦片加载、标记移动等应忽略的渲染器事件进行对比。

有用的通道报告结果数量、路线已准备好以及没有无障碍入口匹配结果。被忽略的通道列出瓦片加载、标记移动和地图中心变化。示例店名、距离和 18 分钟路线仅作说明。应播报用户能够采取行动的状态。

搜索和筛选器也需要同样的克制。一次查询后，只播报一次结果数量或空状态，不要持续播报标记更新。让提示足够简短，以便礼貌地插入。结果数量变化时不要把焦点移动到地图。列表仍然是用户阅读匹配结果的地方，地图则反映同一组结果。

为什么 AI 回答必须说出地点名称？

AI 地图回答必须在脱离地图后仍能以文字独立成立。“Downtown Pharmacy 营业到午夜，距离您选择的起点 1.2 英里”明确说出了地点、营业时间和距离。“我已经高亮红色图钉”只是在指向画布，对看不到该图钉的人无效。地图可以选择同一地点并绘制路线，但句子本身仍必须传达判断。把完整回答或简短摘要发送到状态通道。不要把每个 token 都发送给辅助技术，也不要在每个片段到达时把焦点拉进聊天区域。

一条文字回答明确说出 Downtown Pharmacy、营业时间和距离，旁边有地图；另一条被否定的回答只说已经高亮红色图钉。

有效的回答说出 Downtown Pharmacy、关门时间和距离所选起点的距离。地图显示该地点和路线。被否定的回答只说高亮了一个红色图钉。图中的药店名称、营业时间和距离仅作说明。

不要让模型参与访问权限判断。由宿主系统授权记录，回答只能描述已经存在于结果集中的地点。不要让生成文本凭空添加无台阶入口、无障碍卫生间或源数据中不存在的认证。如果记录没有无障碍字段，回答应说明该信息未知。地图上的高亮只是可选确认，不是回答内容本身。

当地图无法重排时，哪些部分仍然必须可用？

WCAG 2.2 的成功标准 1.4.10 认为某些内容在使用或理解其含义时需要二维布局。Note 2 列出了理解所必需的图片，例如地图和图表，并允许这些部分进行二维滚动。这个例外只适用于地图，不适用于页面标题、搜索、筛选器、结果文字、按钮、AI 回答或详情卡片。在较窄的宽度或高倍缩放下，应把列表堆叠在地图上方或下方，把地图保留在自己的可滚动区域中，并让文字位于该区域之外。即使画布只剩一个小面板，用户仍应能够完成任务。

失败情况也需要同样的分离。如果地图瓦片没有加载，结果列表、详情和主要操作仍然要保留。明确说明地图未能加载，并让记录继续可用。没有文字的空白画布是任务失败，而不是样式问题。减少动态效果也属于这里。不要依赖冗长的 fly-to 动画来表达选中了哪个地点。即使相机移动被缩短或跳过，也应更新选择状态和列表。

无障碍交互式地图应该如何与 Kaleidr 配合？

把搜索、筛选器、结果列表、详情、主要操作和状态消息保留在宿主页面上。与地图共享地点、路线、选择、筛选器和结果集标识符。Kaleidr Studio 用于把团队的想法转化为包含位置、内容和行为的交互式地图 (Kaleidr, 2026)。Viewer 通过 share id 嵌入已发布地图，该嵌入不需要 publishable key (Kaleidr, 2026)。开发者文档把 Chat 描述为宿主地图中的 Spatial AI，把 Viewer 描述为地图发布，把 Tile 描述为设计好的底图，把 Editor 描述为绘制与编辑 (Kaleidr, 2026)。围绕这些产品表面的无障碍操作路径仍由宿主系统负责。

宿主页面包含搜索、筛选器、结果、详情、操作和状态；中间是共享标识符；右侧是 Studio、Viewer、Chat 和地图体验。

宿主页面负责搜索、筛选器、结果列表、详情、操作和状态消息。共享标识符把该页面连接到 Studio、Viewer、Chat 和地图。图中页脚说明 Kaleidr 不会自动保证 WCAG 符合性。测试实际发布体验仍然是发布者的责任。

模板或地图组件可以提供基础。无代码发布指南指出，一旦发布者添加颜色、内容和地图行为，模板就无法保证符合性，因为符合性取决于实际发布的体验 (Kaleidr, 2026)。使用键盘、屏幕阅读器、缩放和窄视口测试完整任务。还应加入地图无法加载的失败场景。本文是一份实施指南，不是符合性审计，也不是法律建议。

探索 Kaleidr Studio 以设计和发布地图。阅读开发者文档 以查看已记录的 Chat、Viewer、Tile 和 Editor 产品表面。把结果列表和明确说出地点名称的回答保留在宿主页面，并与地图使用的同一个地点标识符绑定。

说明：Kaleidr 在创意和开发工作流程中使用 AI 辅助工具进行图像创作、内容优化和研究。

常见问题

键盘替代方案可以取代无需拖动的指针路径吗？

不可以。WCAG 2.2 要求使用单一指针即可完成原本需要拖动的操作，除非拖动本身是必要的，或者行为由用户代理决定。键盘访问是同一任务的另一项独立要求。

地图的重排例外是否也覆盖搜索和结果列表？

不覆盖。地图和图表可以保留二维滚动，但标题、搜索、筛选器、结果、按钮和 AI 回答在页面变窄或放大时仍必须可用。

Kaleidr 是否保证已发布地图符合 WCAG？

不保证。Studio、Viewer 和 Chat 是产品表面。符合性取决于实际发布的页面，包括标签、对比度、结果列表、状态消息和测试。

AI 地图回答应该说“红色图钉”吗？

不应该。应在文字中直接说出地点、相关状态以及距离或路线。地图可以选择同一地点，但句子在没有画布时也必须独立成立。

References

  1. 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/
  2. 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
  3. 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/
  4. 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
  5. 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
  6. 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
  7. 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/
  8. 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}
}

相关内容

将您的地图变成增长引擎