OKパターン: アクセシブルな地図実装のデモ
このページは、アクセシブルな地図実装のベストプラクティスを示すデモです。 以下の地図は、スクリーンリーダー、キーボード、タッチデバイスなど、様々な方法でアクセスできます。
矢印キーで地図をパン操作できます。Tabキーでマーカーを順番に選択、Enterキーで詳細を表示します。
WCAG 2.1.1地図の下に、すべての場所の名前、住所、座標をテーブル形式で提供しています。
WCAG 1.1.1マーカーは色だけでなく、異なる形状（塔、寺院、交差点など）で区別でき、グレースケール表示でも認識できます。
WCAG 1.4.1上部の「コントラスト」ボタンでハイコントラストモードを切り替えられます。地図タイルも高コントラスト版が用意されています。
WCAG 1.4.3マーカーをクリックまたは選択すると、場所の詳細がスクリーンリーダーで読み上げられます。
WCAG 4.1.3カスタムズームボタンは44×44px以上で、適切なaria-labelを持ち、フォーカス可能です。
WCAG 4.1.2ページ上部の「地図をスキップ」リンクにより、キーボードユーザーは地図をスキップできます。
WCAG 2.4.1マーカーのタップターゲットは44×44px以上で、タッチデバイスで操作しやすい設計です。
WCAG 2.5.5以下の表は、地図上のすべてのスポットをテーブル形式で表示しています。 スクリーンリーダーユーザーやJavaScript非対応環境でも、 すべての情報にアクセスできます。
| スポット名 | カテゴリ | 住所 | 座標 |
|---|---|---|---|
| 東京タワー | タワー | 東京都港区芝公園4丁目2-8 | 35.6586, 139.7454 |
| 浅草寺 | 寺院 | 東京都台東区浅草2丁目3-1 | 35.7148, 139.7967 |
| 明治神宮 | 神社 | 東京都渋谷区代々木1丁目1-1 | 35.6762, 139.7003 |
| 渋谷スクランブル交差点 | 交差点 | 東京都渋谷区道玄坂2丁目 | 35.6595, 139.7004 |
| 皇居 | 宮殿 | 東京都千代田区千代田1-1 | 35.6753, 139.7453 |
| 秋葉原 | 地区 | 東京都千代田区外神田 | 35.6987, 139.7738 |