maps

マップアクセシビリティスキル

正規の参照元：mgifford/ACCESSIBILITY.md の examples/MAPS_ACCESSIBILITY_BEST_PRACTICES.md このスキルはそのファイルに基づいています。判断に迷った場合は、例を優先してください。

静的マップまたはインタラクティブマップを実装・レビューする際は、これらのルールを適用してください。 プロジェクトにマップが含まれる場合にのみ、このスキルを読み込んでください。

---

基本方針

すべてのマップに適した単一のテキスト説明はありません。まずマップの目的と、それが支援するタスクを確認してください。そのうえで、マップが見えない、見分けられない、指し示せない、ドラッグできない、ズームできない、または視覚的なマップを解釈できない人にも、その目的を保てるアクセシブルなコンテンツと操作手段を提供してください。マップとその構造化された代替コンテンツは、同じデータソースから同期させてください。

---

重大度の尺度（このスキル）

レベル	意味
Critical	必須の位置情報にアクセシブルな代替手段がない
Serious	インタラクティブマップをキーボードで操作できない、または role="application" の誤用
Moderate	スキップリンクがない、色だけに依存している、ポップアップのフォーカスが管理されていない
Minor	アニメーションに prefers-reduced-motion の指定がない、凡例が不完全

---

まずマップの目的を分類する

マップの目的	必須のタスク	一般的なアクセシブルな提示方法
シンプルな位置案内	場所とその行き方を確認する	簡潔な代替テキスト、住所、目印、道順、連絡先情報
位置情報のディレクトリ	サービスを検索・比較する	名前、住所、距離、カテゴリーを含む検索可能なリスト／テーブル
ルート案内／経路探索	A地点からB地点まで移動する	距離、曲がる場所、目印、状況を含む順序立てた道順
主題図／定量マップ	地域ごとの値を比較する	地域名、値、単位、期間を含む概要とデータテーブル
境界／ゾーニング	範囲内外や隣接関係を把握する	名前付き境界の説明、影響を受ける場所、ダウンロード可能なデータ
屋内／複数階	建物内を移動する	フロアセレクター、アクセシブルなルート案内、入口／エレベーター／階段
探索型	空間的な関係を調べる	同期するフィルター、構造化された結果、アクセシブルな検索ツール

マップが複数の目的を担うこともあります。短い alt、テーブル、または道順だけであらゆる目的を果たせると考えず、必須の各タスクに必要な代替手段を用意してください。WCAG 1.1.1 の「同等の目的」とは、すべてのピクセルや道路名を再現することではなく、状況に応じて重要な情報とタスクを保つことを意味します。調査（Map Equivalent-Purpose Framework）では、目的に広範な空間把握や探索が含まれる場合、テーブルや順を追った道順だけでは不十分になり得ることがわかりました。これは個別の WCAG 適合基準ではなく指針として扱い、テーブルだけでは足りない場合があることを認識してください。

---

重大：静的マップのテキスト代替

<figure>
  <img src="clinic-location.png"
       alt="The clinic is on the north side of King Street, immediately east of the Central Station entrance."
       width="960" height="540">
  <figcaption>
    Northside Clinic, 200 King Street. The step-free entrance is on King Street.
    <a href="#clinic-directions">Read accessible travel directions</a>.
  </figcaption>
</figure>

alt に順を追った道順やすべての道路名を詰め込まないでください。簡潔にし、詳細は近くに記載してください。複雑なマップでは、短い代替テキストと、表示される構造化された詳細な説明、または明確に関連付けられたリンクの両方を用意してください。

<figure>
  <img src="accessible-transit-routes.png"
       alt="Map of step-free transit routes in the downtown area. Detailed route information follows."
       width="1200" height="800">
  <figcaption>
    Step-free transit routes, updated 15 July 2026.
    <a href="#transit-route-details">View route details and connections</a>.
  </figcaption>
</figure>

複雑な説明には、aria-describedby よりも、表示される構造化コンテンツを優先してください。支援技術（AT）は、参照先の見出し／リスト／テーブルを通常ひとつの文字列にまとめるため、移動可能な構造が失われます。alt="" が適切なのは、純粋に装飾目的の場合、または同じ情報が近くですでに完全に提供されている場合に限られます。アクセシビリティの問題を隠すために、意味のあるマップやインタラクティブマップを装飾として扱わないでください。

---

重大：タスクに対応した構造化された代替手段

場所のリスト／表（ディレクトリ向け）：

<table id="branch-table">
  <caption>Library branches matching the current filters</caption>
  <thead>
    <tr><th scope="col">Branch</th><th scope="col">Address</th><th scope="col">Distance</th><th scope="col">Accessibility information</th></tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row"><a href="/branches/central">Central Library</a></th>
      <td>100 Main Street</td><td>600 metres</td>
      <td>Step-free entrance, lift, accessible washroom, hearing loop</td>
    </tr>
  </tbody>
</table>

距離の算出方法を説明し、単位を記載します。フィルターと並べ替えの 順序を維持し、地図とリスト表示のどちらからでも、同じ詳細を開いて 同じ操作を行えるようにします。

ルート案内：

<section id="clinic-directions" aria-labelledby="directions-heading">
  <h2 id="directions-heading">Step-free route from Central Station</h2>
  <p>Distance: 350 metres. Typical travel time: 6 to 10 minutes.</p>
  <ol>
    <li>Leave Central Station through the King Street step-free exit.</li>
    <li>Turn left and continue east for approximately 250 metres.</li>
  </ol>
  <p>Route data checked 15 July 2026. Call 555-0100 to confirm temporary closures.</p>
</section>

該当する場合は、距離／所要時間、通りの名前／目印／曲がる場所、 縁石の切り下げ／横断箇所／勾配／路面／階段、バリアフリー対応の 出入口／リフト／トイレ、既知の工事／通行止め、交通機関の停留所／ プラットフォームの情報を含めます。最短ルートがバリアフリーでない 場合は、別のルートも提示します。方角だけに頼らず、通りの名前、 距離、目印を組み合わせます。

**主題図／定量地図：**平易な言葉での概要、比較に必要なすべての値を 含むデータ表、地域名／カテゴリー／単位／欠損データの表示、対象期間／ 情報源を提示します。コロプレスマップを色名のリストに置き換えないで ください。

凡例はコンテンツであり、装飾ではありません — 凡例のテキストを HTML に含め、色／記号／パターン／線のスタイル／サイズを説明し、 有効なレイヤーに合わせて変更を同期します。また、凡例だけを構造化 された代替手段にしないでください。

---

深刻：インタラクティブマップのページ構造とスキップリンク

<section aria-labelledby="service-map-heading">
  <h2 id="service-map-heading">Find an accessible service location</h2>
  <p><a href="#location-results-heading">Skip the interactive map and view locations</a></p>
  <div class="map-interface">
    <h3 id="map-view-heading">Interactive map</h3>
    <p id="map-instructions">Use the named map controls to move or zoom.</p>
    <div id="map-viewport" role="region" aria-labelledby="map-view-heading"
         aria-describedby="map-instructions">
      
    </div>
  </div>
  <section aria-labelledby="location-results-heading">
    <h3 id="location-results-heading" tabindex="-1">Location results</h3>
    <p id="location-result-status" role="status" aria-atomic="true"></p>
    <ul id="location-results"></ul>
  </section>
</section>

インタラクティブマップにスキップリンクがないのは深刻です。 結果へ 移動するための視認可能なリンクは、スクリーンリーダー、キーボード、 スイッチ、音声入力、モバイル、低帯域幅、認知障害のあるユーザーに 役立ちます。キーボードでフォーカスしたときだけ表示しないでください。

---

深刻：サードパーティーの地図埋め込み

<iframe src="https://maps.example.org/embed/service-locations"
        title="Interactive map of service locations" loading="lazy"></iframe>
<p><a href="#service-location-list">View service locations as a list</a>
   or <a href="/service-locations.csv">download the location data</a>.</p>

説明的な title のない <iframe> は深刻な問題です。キーボードを 使うユーザーが埋め込みに入って操作し、そこから出られることを確認 します。コントロール、マーカー、ポップアップ、同意通知、全画面 モードをテストします。構造化された代替手段は iframe の外部に 置き、プロバイダーに障害が発生した場合やブロックされた場合も利用 できるようにします。埋め込み内での変更が、サイトの代替手段にも 反映されることを確認します。プロバイダー／プラグイン／設定を更新 した後は、再テストします。現在のレンダリング結果をテストせずに、 プロバイダーのアクセシビリティに関する主張を信頼しないでください。

地図ライブラリ： テストで変更の妥当性が確認されない限り、ライブラリの アクセシビリティに関するデフォルト設定を維持します（例：Leaflet の コンテナー／マーカーはデフォルトでキーボード操作が可能ですが、 プラグインによってその状態が損なわれることがあります）。バージョンを 固定し、リリースノートを確認し、更新後は再テストします。プラグインを あらゆる環境でアクセシブルだと推奨したり、本番環境でバージョンを 固定せずに @latest を使用したりしないでください。

---

重大：キーボード操作と role="application"

基盤となる移動操作が不可欠な場合（WCAG の限定的な例外）を除き、マップのすべての機能にキーボードでアクセスできる必要があります。

<div class="map-controls" role="group" aria-labelledby="map-controls-heading">
  <h3 id="map-controls-heading">Map view controls</h3>
  <button type="button">Zoom in</button>
  <button type="button">Pan north</button>
  <button type="button">Reset map view</button>
</div>

ユーザーがすべてのコントロールに論理的な順序でアクセスできること、標準のボタンが Enter／Space で動作すること、フォーカスが表示され、フローティングコントロールやポップアップに隠されないこと、ユーザーがトラップされることなくマップに出入りできること、マップの再レンダリングによってフォーカスが失われたり <body> に移動したりしないことを確認してください。マップが表示されているというだけで、ページ全体の矢印キー操作を捕捉しないでください。矢印キーによるパン操作はビューポートにフォーカスがある場合に限定し、Tab／Shift+Tab では常にマップから移動できるようにしてください。単一文字のショートカットには、代替手段として名前付きボタンを用意し、WCAG 2.1.4（無効化／再割り当て／スコープ化）を満たす必要があります。

ほとんどのマップで role="application" は不要です。 これはスクリーンリーダーの操作モードを変更し、通常の読み上げコマンドを抑制します。マップの周囲には標準のコントロールを、結果には通常のドキュメントコンテンツを使い、ビューポートには名前付きリージョンを設定してください。また、ビューポートで必要な場合に限って、スコープを限定したキーボード操作を文書化してください。誤用は重大な問題です。アプリケーションのセマンティクスを使うのは、チームが支援技術への影響を理解し、完全なキーボード操作モデルを実装し、操作手順と終了手段を用意し、サポート対象の組み合わせをテストしている場合に限ってください。このロールを追加しても、マップがアクセシブルになるわけではありません。

多数のマーカー： 数百のマーカーによって、Tab キーで順に移動する箇所が数百個も生じないようにしてください。テスト済みの操作モデルを選択してください。たとえば、方向キーによる移動を文書化したマップビューポートの Tab 停止位置を 1 つ設ける、現在のマーカーセット内で tabindex をロービングする、結果を絞り込んだ後にのみマーカーをフォーカス可能にする、または構造化された場所のリストを主要なキーボードインターフェースにする方法があります。WAI-ARIA のマップパターンに普遍的なものはありません。選択した動作を文書化してテストしてください。

---

中程度：マーカー、クラスター、ポップアップのフォーカス管理

<button type="button" class="map-marker" aria-label="City Hall, 123 Main Street"
        aria-expanded="false" aria-controls="city-hall-details">
  <svg aria-hidden="true" focusable="false"></svg>
</button>
<section id="city-hall-details" aria-labelledby="city-hall-heading" hidden>
  <h3 id="city-hall-heading">City Hall</h3>
  <p>123 Main Street. Step-free entrance on Queen Avenue.</p>
  <a href="/locations/city-hall">City Hall details</a>
</section>

hidden と aria-expanded は常に一緒に更新してください。マーカーのポップアップにはモーダルではない通常のコンテンツを使ってください。 操作が実際にモーダルである場合に限り、role="dialog"／aria-modal="true" を追加してください。ポップアップに相当量のコンテンツがあり、フォーカスをその中に移動する場合は、閉じるコントロールを用意し、閉じたときにトリガーとなったマーカーにフォーカスを戻してください。標準のボタンの名前に「Enter キーを押してください」という説明を含めないでください。役割から操作方法はすでに伝わります。

クラスターには、アクセシブルな名前、件数、キーボード操作が必要です。

<button type="button" aria-expanded="false" aria-controls="downtown-location-results">
  Show 7 locations in downtown
</button>

展開時には aria-expanded と両方のビューを一緒に更新してください。クラスターコントロールのフォーカスを維持するか、明示的な操作の後にのみ予測可能な結果の見出しへ移動してください。すべてのマーカーではなく、簡潔な結果の概要をアナウンスしてください。

---

中程度：色に依存しない表現

ルート／ゾーン／状態の区別を色だけに頼ってはいけません。色に加えてルート番号と線のスタイルを、マーカーの色に加えてアイコンとテキストラベルを、領域の塗りつぶしに加えてハッチング／境界線のスタイルを使い、データテーブルには数値を記載してください。色だけによる表現は中程度の問題です（安全上の意味が異なるルート／状態を色で区別する場合は重大です）。強制配色モードでテストしてください。マップタイルの背景が上書きされることがあります。タイルやグラデーションが表示されなくなっても、場所のリスト／道順に必要な情報がすべて残るようにしてください。

コントラスト：通常のテキストは 4.5:1 以上、大きなテキストは 3:1 以上、コントロール／状態／図形オブジェクトの識別に必要な視覚情報は 3:1 以上（WCAG 1.4.11）としてください。フォーカスインジケーターは、接する対象に対して十分なコントラストを確保する必要があります。すべてのピクセル、航空写真、付随的なラベルに一律の比率を求めると主張してはいけません。マップを理解し操作するために実際に必要な、作成者が提供する情報を評価してください。

---

中程度：ターゲットサイズ

WCAG 2.5.8 では、最小 24×24 CSS ピクセル、または列挙された例外が求められています。レベル AA で一律に 44×44 を義務付けているわけではありません。主要な地図コントロールには、AA で求められているからではなく、レベル AAA のターゲットサイズ拡大基準（2.5.5）に沿ったインクルーシブな実践として、44×44 を使用してください。

.map-controls button { min-inline-size: 44px; min-block-size: 44px; }

ヒット領域が曖昧に重ならない限り、マーカーの見た目は小さくして、透明なヒット領域を大きくできます。

---

深刻：ポインター、タッチ、ドラッグの代替手段

地図の操作は、ピンチ／回転／スワイプ／ドラッグに依存しがちですが、これらだけを必須機能の操作方法にしてはいけません。ピンチの代替手段としてズームボタンを、ドラッグの代替手段としてパン操作／検索／選択機能を用意してください。また、マーカーや経路ポイントをドラッグする操作にはボタンまたはメニューによる代替手段を用意し、マーカー／コントロールはシングルポインターで操作できるようにし、操作はポインターダウンではなくポインターアップ時に完了するようにしてください。

埋め込み地図によって、ページのスクロールが妨げられてはいけません。ユーザーが、説明のない複数指ジェスチャーを使わずに、確実に地図を通り過ぎてスクロールできる必要があります。特に小さな画面では、地図がドラッグ／ホイールのジェスチャーを捕捉する前に、明示的な「インタラクティブマップを使用」アクションを要求することを検討してください。

---

レイヤー切り替え、検索、位置情報

<fieldset>
  <legend>Locations to show</legend>
  <label><input type="checkbox" name="category" value="clinic" checked> Clinics</label>
  <label><input type="checkbox" name="step-free" value="yes"> Step-free entrance</label>
</fieldset>

簡潔な結果の概要（「12 か所を表示しています」）を通知してください。追加された各マーカー、読み込まれたタイル、パン操作、ズームの各フレームを通知してはいけません。

検索： ラベル付きの検索フォーム、ステータスメッセージ、通常のリンクを使うほうが、カスタムのオートコンプリートウィジェットより実装しやすく、使いやすいです。候補を表示する必要がある場合は、WAI-ARIA の完全なコンボボックスパターンを実装してテストしてください。不完全なウィジェットに role="listbox"／aria-autocomplete を追加するだけでは不十分です。複数の入力形式を受け付け、クエリを消去せずにエラーを説明し、簡潔な結果件数を通知し、住所が曖昧な場合はそれを明示してユーザーが選択できるようにしてください。地図表示とリスト表示を切り替えても、クエリとフィルターを保持してください。

位置情報： 明確なユーザーアクションの後にのみ許可を求め、その使用目的と方法を説明してください。許可が拒否された場合は、住所／場所の検索手段を用意してください。古い位置情報や不正確な位置情報を適切に処理し、ユーザーのせいにしないでください。手動入力で完了できるタスクで、正確な位置情報の提供を必須にしてはいけません。

---

弱視、ズーム、リフロー、画面の向き

ブラウザーのズームと地図のズームは別のものです。両方に対応し、ページレベルでブラウザーのズームやピンチズームを決して無効にしないでください。ブラウザーを 200%／400% に拡大しても、地図のコントロールと代替手段を利用できるようにしてください。縦向き／横向きを維持し、テキストが大きくなったときに固定高のレイアウトによってコントロールが隠れないようにしてください。WCAG 1.4.10 の二次元レイアウトの例外は、地図の表示領域自体には適用できる場合がありますが、周囲のコントロール、検索、ステータス、詳細、道順、位置情報の結果にはリフロー要件が適用されます。

---

キャンバスと SVG の地図

キャンバスのピクセルには子要素のセマンティクスがありません。<canvas> に描画する場合は、アクセシブルな DOM コントロール、結果、名前、状態、代替手段を、外部またはテスト済みのフォールバック構造内に用意してください。スクリーンリーダーが描画されたマーカーを調べられると思い込んではいけません。SVG の地図では、非インタラクティブな地図に適切なアクセシブルな名前／説明を付け、装飾用のパスをアクセシビリティツリーから除外し、インタラクティブな領域をプログラムでフォーカス可能にして名前を付け、大規模／複雑な SVG 地図には構造化された代替手段を用意してください。skills/svg/SKILL.md を参照してください。

---

屋内地図と経路案内

該当する場合は、建物／入口／階／目的地の名前、バリアフリー対応の入口と営業時間、エレベーター／階段／エスカレーター／スロープ／プラットフォームの位置、廊下の幅／ドアの種類／敷居／勾配／路面／照明、トイレ／避難場所／介助を受けられる場所、目印と分岐点間の距離、エレベーターの一時的な運休／工事／閉鎖、情報源と最終確認日を提供してください。

<label for="floor-select">Building floor</label>
<select id="floor-select">
  <option value="ground">Ground floor: entrance, reception, cafe</option>
  <option value="1">Floor 1: offices and meeting rooms 101 to 120</option>
</select>
<p id="floor-status" role="status" aria-atomic="true"></p>

変更があった場合は、階の見出し、場所、道順、地図をまとめて更新してください。リアルタイムの位置測定は機能を拡張するものであり、唯一のナビゲーション方法にしてはいけません。屋内の位置情報は不正確または利用できない場合があるため、静的な道順と、古くなった経路情報を報告する手段を用意してください。

---

データの品質とアクセシビリティ情報

アクセスしやすい表示にしても、不正確な地理データは修正できません。情報源と最終更新日を明記し、距離が直線距離／徒歩／車／公共交通機関のいずれに基づくかを説明してください。アクセシビリティ情報について、確認済みの情報とユーザー投稿または推定情報を区別してください。誤りや一時的な通行の障害を報告する方法を用意し、不明・未入力の値を「なし」として表示せず、そのまま保持してください。状況が変わる可能性がある場合は、経路について断定的な表現を避けてください。移動前に重要なアクセシビリティ機能の確認が必要な場合は、連絡先を記載してください。

---

テスト

• 同等の目的： マップに明記された目的／必須タスクを列挙してください。各タスクをビジュアルマップで行った後、構造化された代替手段とマップ以外の操作だけを使って行い、得られる情報／結果／結論を比較してください。必要に応じて、視覚障害、ロービジョン、運動障害、認知障害、盲ろうのユーザーによるテストを実施してください。テーブルが存在することを確認するだけで同等性を評価しないでください。
• キーボード： 検索／フィルター／レイヤー／操作部／マーカー／クラスター／詳細／結果／全画面表示にキーボードで移動し、操作できることを確認してください。フォーカス順が論理的で視認できること、マップの更新によってフォーカスが失われないこと、フォーカストラップなしでビューポートや埋め込みコンテンツに入って出られることを確認してください。構造化された代替手段でも同じ操作ができることを確認してください。
• スクリーンリーダー： 操作部／マーカー／クラスター／状態／結果に、適切な名前とロールが付いていることを確認してください。ステータスメッセージが簡潔で、過剰に繰り返されないことを確認してください。マップを使わずに、構造化された説明／テーブル／道順を読み上げられること、詳細の開閉によって予期しないフォーカスの移動が発生しないことを確認してください。
• 視覚／ロービジョン： ブラウザーのズームを200%／400%に設定してテストしてください。狭いビューポートと縦横両方の向き、テキスト間隔、ライトモード／ダークモード／強制カラーモードを確認してください。ラベルが消えたり重なったりしないこと、選択状態／経路／境界を色以外でも見分けられること、マップ画像が非表示でも代替手段を利用できることを確認してください。
• ポインター／タッチ： 1つのポインターを使ってすべてのタスクを完了してください。ピンチやドラッグを使わずにズーム／パンできることを確認してください。マーカー／経由地点のドラッグに代わる操作方法を確認してください。ターゲットサイズ、間隔、ポインターのキャンセル動作を確認し、フォーカストラップなしでページをスクロールしてマップを通過できることを確認してください。
• データ／統合： マーカーの数／内容を構造化された結果と比較してください。すべてのフィルターを適用し、両方の表示が同期した状態を保つことを確認してください。距離／単位／座標／アクセシビリティ属性を検証してください。空の状態／読み込み中／エラー／オフライン／権限拒否の各状態をテストしてください。データ／ベースマップ／ライブラリの更新後に再テストしてください。

自動チェックでは、iframe のタイトルの欠落、名前のないボタン、無効な ARIA、重複した ID、フォーカス順のリグレッション、コントラストの問題、静的画像の代替手段の欠落、マップとリストの件数の不一致を検出できます。ただし、目的の同等性、方向の正確さ、経路のアクセシビリティ、空間の理解、サードパーティのキーボード操作は判定できません。手動テストとユーザーテストが必要です。

---

よくある失敗

失敗	修正方法
汎用的な alt="Map" を使う	地図の目的を説明し、タスクに適した構造化された代替手段を用意します
表や道順が常に完全な代替になると思い込む	記載されている目的に合った代替手段を用意し、必要に応じて空間的な説明を追加します
複雑な表を aria-describedby だけで提供する	可視で操作可能な HTML、または明確に関連付けられたリンクを用意します
地図にデフォルトで role="application" を追加する	名前付き領域、ネイティブコントロール、通常のコンテンツ、範囲を限定したキーボード操作を使用します
ページ上の別の場所にフォーカスがあるときに矢印キーを捕捉する	地図のキー操作はフォーカスされたビューポート内に限定し、名前付きコントロールを用意します
すべてのマーカーを Tab のフォーカス対象にする	テスト済みのナビゲーション方式と、連動する場所のリストを使用します
すべてのポップアップを aria-modal="true" のダイアログにする	本当にモーダルである場合を除き、通常の非モーダルな詳細表示を使用します
WCAG AA では常に 44×44 のターゲットが必要だと主張する	24×24 のレベル AA 基準を適用し、44×44 は包括性を高める AAA の実践として使用します
2.4.11（フォーカスが隠れないこと）と 2.4.13（フォーカスの表示）を混同する	2.4.11 はフォーカスが隠れないことの最小基準（AA）です。フォーカスの表示は 2.4.13（AAA）です
ピンチやドラッグだけを操作方法として求める	シングルポインターで操作できるボタンと選択肢を用意します
地図上のすべてのピクセルに同じコントラスト比を適用する	作成した重要なテキスト、コントロール、状態、図形オブジェクトを正確にテストします
修正を避けるため、インタラクティブな地図を装飾として隠す	インタラクションをなくすか、アクセシブルなコントロール、情報、代替手段を提供します
パン、タイル、マーカーの更新をすべて読み上げる	完了したタスクの結果を簡潔に読み上げ、持続的に表示するコンテンツは見える状態に保ちます
テストせずに地図プロバイダーやプラグインを信頼する	現在設定されているバージョンをテストし、外部の構造化された代替手段を維持します
地図と場所のリストで異なるデータを使う	同じソースと状態から両方を生成します

---

完了チェックリスト

• 地図の目的、対象者、主要なタスクを文書化している
• 静的な地図には簡潔な代替テキストがあり、複雑な地図には可視の構造化された説明がある
• 場所のリスト、表、道順が見える状態で構造化され、見つけやすい
• 地図表示と地図以外の表示で、同じデータ、フィルター、結果の状態を使用している
• すべてのインタラクティブな地図の前にスキップリンクがある
• サードパーティの <iframe> 地図に説明的な title があり、代替手段は iframe の外にある
• すべての地図操作がキーボードで行え、矢印キーによるパン操作はフォーカスされたビューポート内に限定されている
• role="application" は、テスト済みの完全なカスタムキーボード操作方式がある場合にのみ使用し、デフォルトでは使用しない
• マーカーが多数ある場合は、数百もの Tab のフォーカス対象ではなく、テスト済みのナビゲーション方式を使用している
• マーカーのポップアップは、本当にモーダルである場合を除き非モーダルで、閉じるとフォーカスが起動元に戻る
• 色だけを唯一の識別手段として使わず、凡例を用意し、強制カラーモードでテストしている
• ターゲットは最小 24×24px を満たし、主要なコントロールには実用的な範囲で 44×44px を使用している
• ピンチ、ドラッグ、経路のジェスチャーに、シングルポインターで操作できるボタンの代替手段がある
• 地図のコントロールと代替手段は、200%／400% のズームと狭いビューポートで使用できる
• ステータスメッセージは簡潔で、結果はページ内に表示されたままになっている
• データソース、日付、単位、制約事項を文書化している

主要な WCAG 基準

• 1.1.1 非テキストコンテンツ（A）— テキストによる代替がない場合は重大
• 1.3.3 感覚的な特徴（A）
• 1.4.1 色の使用（A）— 色だけで表現する場合は中程度
• 1.4.3 コントラスト（最低限）（AA）
• 1.4.10 リフロー（AA）— 地図の表示領域自体には定義された例外があります
• 1.4.11 非テキストのコントラスト（AA）
• 2.1.1 キーボード（A）— 地図のコントロールをキーボードで操作できない場合は深刻
• 2.1.4 文字キーのショートカット（A）
• 2.4.3 フォーカス順序（A）
• 2.4.11 フォーカスが隠されない（最低限）（AA、WCAG 2.2）— フォーカスの外観ではありません
• 2.5.5 ターゲットサイズ（強化）（AAA）— 44×44 の基準値
• 2.5.7 ドラッグ操作（AA）
• 2.5.8 ターゲットサイズ（最低限）（AA）— 24×24。実際の AA 要件です
• 4.1.2 名前、役割、値（A）
• 4.1.3 ステータスメッセージ（AA）

---

参考資料

• ベストプラクティスガイド全文
• Leaflet：基本的な Leaflet アクセシビリティガイド
• Mapbox GL JS のアクセシビリティ
• W3C WAI：複雑な画像
• W3C WAI-ARIA APG：コンボボックスパターン
• デジタル地図における同等の目的の体系的な評価

標準の展望： これらのルールは WCAG 2.2 AA を対象としています。 動向を確認してください：https://www.w3.org/TR/wcag-3.0/