首页 / OpenLayers / 使用示例
可聚焦的自定义地图元素
自定义元素加 tabindex 与 aria-label,进入页面即可用键盘平移缩放,并在状态区播报视图变化。
源码与运行效果
说明
自定义元素默认不可聚焦,需要显式设置 tabindex="0" 才能进入 Tab 序列。
元素获得焦点后,keydown 里处理方向键与加减号,直接调用
view.animate() 平移或缩放。
页面上的状态区带 role="status" 与 aria-live="polite",
视图变化时写入中心经纬度与缩放级别;:focus-visible 描边让键盘用户
看得出焦点落在元素上。
| 操作 | 结果 |
|---|---|
| 按 Tab 聚焦地图 | 元素出现描边,可继续键盘操作 |
| 按方向键 | 视图平移,状态区播报新中心 |
| 按 + 或 - | 缩放级别变化,读屏软件读出结果 |
焦点描边不要用 outline:none 去掉,否则键盘用户无法判断当前焦点在哪个区域。