アクセシビリティの高いマップ
Webアクセシビリティとは、操作や情報アクセスを妨げる障壁が生じないようにする包括的プラクティスです。
このLeafletアクセシビリティガイドは、幅広い能力を持つ人々が利用できるマップの作成に役立ちます。
便利なデフォルト設定の維持
Leafletには、便利なデフォルト設定が用意されています。
マップコンテナーとマーカーは、デフォルトでキーボード操作可能です。これにより、ポインティングデバイスを使用できないユーザーも利用できるようになります。このようなデフォルト設定を変更する前に、ユーザーに与える影響を検討してください。
マーカーにはラベル付けが必要です
マーカーを使用する場合、それぞれにユニークで記述的な alt または title が付いていることを確認することが不可欠です。
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）から非表示にし、フォーカス可能な子孫を持たないようにする必要があります。これは、スクリーンリーダーを使用するユーザーを混乱させないようにし、キーボードを使用するユーザーに不要なタブを停止させるためです。この方法を簡単に実現するには、HTMLのinert属性ポリフィルを使用します
<!-- 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の最新バージョンを使用する