经纬志
首页 / OpenLayers / 使用示例

无障碍地图

地图容器可以获得键盘焦点,方向键平移、加减号缩放,视图变化通过 aria-live 区域播报,读屏软件能够读出当前中心与缩放级别。

OpenLayers 10.3.1 · 对应官方 accessible.html · 更新 2026-10-27
源码与运行效果
运行效果

说明

地图容器加上 tabindex="0" 后可以接收键盘焦点,keydown 里把方向键 换算成 view.getCenter() ± resolution × 60 的平移动画,加减号直接调用 view.animate({zoom})。所有视图变化都汇总到 view.on(['change:center','change:resolution']),再写入 role="status" aria-live="polite" 的区域。

读屏软件不会朗读 canvas 里的图形,状态文本要写成「中心 116.3970, 39.9090 · 缩放 11.0」 这类可理解的句子,而不是直接输出墨卡托坐标。

操作结果
点击地图任意位置焦点落到地图容器,可继续用键盘操作
按 ← → ↑ ↓视图平移,状态文本同步更新
按 + 或 -缩放级别各增减一级

焦点框需要可见:给地图容器加 :focus-visible 描边,键盘用户才知道焦点是否落在地图上。