Leaflet

一个开源的 JavaScript 库
用于移动友好的交互式地图

← 教程

无障碍地图

Web 无障碍 是一种包容性实践,确保不存在阻止交互或信息访问的障碍。

本 Leaflet 无障碍指南可以帮助您创建各种能力的人都能使用的地图。

保留有用的默认值

Leaflet 附带了一组有用的默认值。

默认情况下,地图容器和标记可通过键盘操作,这使无法使用指向设备的用户能够使用地图。在更改这些默认值之前,请考虑对用户的影响。

标记必须有标签

使用标记时,务必确保每个标记都有唯一的描述性 alttitle

var marker = L.marker([50.4501, 30.5234],
  {alt: 'Kyiv'}).addTo(map) // "Kyiv" is the accessible name of this marker
  .bindPopup('Kyiv, Ukraine is the birthplace of Leaflet!');

使标记对 屏幕阅读器 用户可辨别

请参阅此独立示例。

对于 divIcon自定义 HTML 可以提供视觉或非视觉标签。

测试您的地图

发现无障碍问题的最佳方法是仅使用键盘以及使用屏幕阅读器测试您的地图。您可能已经在系统中预装了屏幕阅读器,例如

纯粹的装饰性地图

某些地图是 纯粹的装饰性 的,并不打算让用户与之交互(类似于背景图像和视频)。

此类地图应隐藏在辅助技术 (AT) 中,并且没有可聚焦的后代。这样做是为了避免可能混淆屏幕阅读器用户,并为键盘用户移除任何不必要的 Tab 键停止点。实现此目标的一种简单方法是使用 HTML inert 属性 polyfill

<!-- This map is for aesthetic purposes only, and can not be interacted with! -->
<div id='decorative-map' inert></div>
<script src='https://unpkg.com/wicg-inert@latest/dist/inert.min.js'></script>

利用插件

插件 可以增强用户体验,但在某些情况下也会降低体验。因此,重要的是,您在添加新插件后 测试您的地图

如果您在插件中发现无障碍问题,请将其报告给插件作者。

可以增强用户体验的插件示例是 Leaflet.fullscreen 插件。通过允许用户进入全屏模式,他们可以独立探索地图,专注注意力,这对键盘和屏幕阅读器用户(因为他们不太可能意外导航到地图之外)以及普通移动用户尤其有用。

使用最新版本的 Leaflet

Leaflet 不断改进无障碍功能。使用最新的稳定 版本 以获得最佳功能!