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

可聚焦的自定义地图元素

自定义元素加 tabindex 与 aria-label,进入页面即可用键盘平移缩放,并在状态区播报视图变化。

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

说明

自定义元素默认不可聚焦,需要显式设置 tabindex="0" 才能进入 Tab 序列。 元素获得焦点后,keydown 里处理方向键与加减号,直接调用 view.animate() 平移或缩放。

页面上的状态区带 role="status" 与 aria-live="polite", 视图变化时写入中心经纬度与缩放级别;:focus-visible 描边让键盘用户 看得出焦点落在元素上。

操作结果
按 Tab 聚焦地图元素出现描边,可继续键盘操作
按方向键视图平移,状态区播报新中心
按 + 或 -缩放级别变化,读屏软件读出结果

焦点描边不要用 outline:none 去掉,否则键盘用户无法判断当前焦点在哪个区域。