Leaflet

一個開源 JavaScript 函式庫
適用於行動裝置友善的互動式地圖

← 教學

無障礙地圖

網頁無障礙是一種包容性的實踐,確保不存在任何會阻礙互動或資訊存取的障礙。

這份 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 不斷改進無障礙功能。使用最新的穩定版本以獲得最佳功能!