アクセシブルなインタラクティブマップ：WCAG 2.2

アクセシブルなインタラクティブマップでは、ドラッグや色、目で見なければならないピンに依存せず、キーボード、支援技術、タッチのいずれでも同じ位置情報タスクを完了できます。検索、結果一覧、詳細、そして場所を名前で示す回答がタスクを担います。地図は、その共有状態を視覚的に表すビューとして残ります。

以下では、まずタスクと地図キャンバスを分け、そのうえで場所の識別、キーボード順序、ドラッグ、色、アナウンス、AI回答を扱います。地図にリフローの例外があっても、ページの残りまで免除されるわけではありません。Kaleidr Studio、Viewer、Chatは、タスクを操作可能にするホスト側のコントロールと並んで機能します。

アクセシブルなインタラクティブマップの要点

タスクを明確にする： 検索、比較、選択、実行が仕事です。キャンバスはその仕事を表す一つのビューです。

一つの場所IDを共有する： 一覧、マーカー、詳細、AI回答は同じレコードを参照します。

ドラッグしない経路を用意する： パンボタン、タップできるターゲット、住所入力、上下移動コントロールをドラッグ操作と併設します。

意味を色だけで表さない： 状態は色に加えて、テキスト、形状、またはアイコンでも示します。

結果をアナウンスする： 結果件数、ルートの準備完了、該当なしはステータスメッセージにします。タイル読み込みは通知しません。

アクセシブルなインタラクティブマップとは？

アクセシブルなインタラクティブマップとは、キーボード、支援技術、ポインタを使う人が同じタスクを完了できる位置情報体験です。たとえば、段差のない入口がある博物館を探す、3つの図書館を比較する、営業中の薬局を選ぶ、といったタスクがあります。地図は空間関係を示します。キャンバスが見づらい、ドラッグしづらい、タップしづらい場合でも、検索、フィルター、結果一覧、詳細、文章による回答が必要な事実を伝えます。ポインタでしか使えないインターフェースは視覚的な地図ではあっても、アクセシブルな地図ではありません。

WCAG 2.2は、2024年12月12日付のW3C勧告です。本ガイドでは、この現在のWeb標準を地図タスクに適用し、フォーカス、ドラッグ、ターゲットサイズ、色、コントラスト、リフローを含めて扱います（W3C, 2024）。カバー画像では、結果一覧と地図に加えて、City Museumという場所名、例示用の距離、例示用の設備を示す回答を配置しています。これらの距離や設備ラベルは説明用です。本番のカードでは場所レコードの実際のフィールドを表示すべきであり、「Accessible」というフィルター名だけでは、その施設が監査済みであることを意味しません。

なぜキャンバスではなくタスクから始めるのか？

地図だけの経路では、利用者にキャンバスを探索させ、ピンを探し、ポップアップを読み、それから操作させます。この経路は視覚的な解釈と正確なポインタ操作を必要とします。アクセシブルな経路は、検索またはプロンプトから始まり、構造化された結果一覧、場所の詳細、そして経路案内、保存、共有などのアクションへ進みます。地図はその横で更新されますが、唯一の操作経路ではありません。Kaleidrの埋め込みガイドでも、キーボード利用者、支援技術、検索に対してページを有用に保つため、キャンバス外に見出し、要約、場所一覧を置くことを求めています（Kaleidr, 2026）。

探索、ピンの発見、ポップアップの確認だけで進む地図中心の経路と、検索、構造化された結果、場所の詳細、アクション、同期された地図で進むタスク中心の経路の比較。

左側は地図をインターフェースそのものとして扱い、視覚的な解釈とポインタ精度を要件にしています。右側は検索、結果一覧、詳細、アクションで進み、地図は補助的なビューです。図書館名、住所、距離は例示です。この分離はアーキテクチャ上の選択であり、Kaleidrのスコアではありません。

重要なレコードはHTMLに置きます。地図タイルが失敗しても、名前、住所、カテゴリ、営業時間、次のアクションが存在する必要があります。ポップアップはそれらの事実を繰り返して構いませんが、唯一のコピーであってはいけません。次に扱う安定した場所IDによって、一覧行とマーカーを同じレコードに結び付けます。

なぜ一つの場所IDが重要なのか？

検索、結果カード、詳細パネル、地図マーカー、AI回答、分析イベントは、一つの場所IDを共有する必要があります。サーフェス間でIDの意味が変わると、キーボード利用者が一覧でFreshMartを選んだのに、地図は別の店舗を強調し、回答はさらに別の店舗を説明することがあります。図はそのIDを中央に置き、各サーフェスへ展開しています。図中の住所、星評価、レビュー件数、電話番号、座標、タイムスタンプは例示であり、Kaleidrの実データではありません。

一つの場所IDが、結果カード、詳細パネル、地図マーカー、AI回答、分析イベントをつないでいる図。

共有された場所IDは、結果カード、詳細パネル、マーカー、回答、分析イベントに供給されます。各サーフェスは同じ名前と住所を表示します。図中の評価、電話番号、座標、イベント時刻はサンプルです。本番分析ではIDを保持し、イベントに不要なフィールドをコピーしないようにします。

選択は画面座標ではなくIDに従います。一覧行を有効にすると選択場所が設定され、地図が移動し、詳細が更新されるため、利用者にピンを探させる必要がありません。マーカーをクリックすれば逆方向に同じ行を強調します。選択のたびにキーボードフォーカスを地図へ移さないでください。スクリーンリーダー利用者が一覧内の位置を失います。フォーカスと選択は別の状態であり、次の節では両者を分けて扱います。

タスクを完了するキーボード順序とは？

フォーカス順序はタスクに沿って設計します。実用的な順序は、検索、フィルター、結果要約、結果一覧、地図コントロール、詳細、主要アクションです。利用者は件数を理解し、一覧から場所を選び、必要なら地図をパンまたはズームし、詳細を読み、経路案内へ進めます。一覧が同じ場所をすでに提供しているなら、地図マーカー一つひとつにTab停止点を設ける必要はありません。矢印キーは一覧内を移動し、Tabは大きな領域間を移動します。

検索とフィルターから、結果一覧、地図コントロール、詳細を経て主要アクションへ進む番号付きキーボード経路。

経路は検索、フィルター、結果要約、一覧、地図コントロール、詳細、主要アクションの順に進みます。選択された公園は一覧行と詳細カードに結び付いたままです。結果件数と例示距離は説明用です。フォーカス順序はタスクに従い、地図は多数のピンの集合ではなく一つの停止点として扱われます。

作者が作成したコンテンツが、固定検索バーやチャットパネルのようにフォーカス中のコントロールを完全に隠すと、WCAG 2.2の達成基準2.4.11（AA）を満たしません。この基準の注記2は、詳細ドロワーのように利用者が開いたコンテンツについて、キーボードフォーカスを進めずにコントロールを再表示できる場合は覆ってもよいとしています。コントロールの一部だけが隠れる場合は、達成基準2.4.12（AAA）です。見えているフォーカスと見えている選択には別のスタイルが必要です。青い一覧行とフォーカスリングは別の問いに答えるからです。WAI-ARIAのキーボードガイダンスでも、特にフォーカスを保持していないコンポーネント内に選択項目がある場合、フォーカスと選択を区別するよう求めています（W3C, 2026）。次のキー入力を受けるコントロールにはフォーカスリングを残し、場所の選択には別の選択表示を使います。

なぜドラッグだけを唯一の経路にできないのか？

地図はドラッグを促しやすいものですが、パン、停止地点の設定、ルートの並べ替えをドラッグだけに依存してはいけません。WCAG 2.2の達成基準2.5.7では、ドラッグ動作を使う機能は、ドラッグが本質的である場合、またはユーザーエージェントがその動作を決定し作者が変更していない場合を除き、ドラッグせずに単一ポインタで実行できることを求めています。キーボード代替だけでは、このポインタ要件を満たしません。方向パンボタン、タップで目的地を設定する操作、住所入力、順序付き停止地点を上下に移動するコントロールを提供します。同じ勧告の達成基準2.5.8では、間隔やページ内の同等コントロールなどの例外を除き、最小ターゲットサイズを24×24 CSSピクセルとしています。

ドラッグのみを唯一の経路とした地図操作と、パンボタン、タップで目的地を設定する操作、住所入力、一覧の並べ替えボタン、キーボードのパンキーを並べた比較。

左側は地図を動かす方法がドラッグだけです。右側はパンボタン、タップターゲット、住所フィールド、並べ替えボタン、キーボードのパンキーを追加しています。住所は例示です。キーボード経路は引き続き必要ですが、ドラッグに対する単一ポインタ代替の代わりにはなりません。

キーボードを閉じ込めずに地図から抜けられるようにします。地図にフォーカスがある間、矢印キーでパンする場合は、Escapeまたは文書化されたキーで一覧または次のコントロールへフォーカスを戻せるようにします。ズーム、現在地、閉じるにはアクセシブルな名前が必要で、スクリーンリーダーがラベルを付けられないアイコンだけのボタンにしてはいけません。ターゲットサイズはこれらのコントロールだけでなく一覧行にも重要です。タップ領域が小さすぎると、タッチする人や精度の低いポインタを使う人に不利になります。

なぜ地図では色だけでは不十分なのか？

達成基準1.4.1では、情報を伝える、アクションを示す、反応を促す、要素を区別するための唯一の視覚手段として色を使ってはいけません。「営業中」を緑点、「閉店」を赤点だけで示し、違いが色相だけなら不十分です。色に加えて、ラベル、チェック、×、別の形状を組み合わせます。同じルールはカテゴリマーカー、選択ルート、「現在地」にも適用されます。同じ勧告の達成基準1.4.11では、非アクティブなコンポーネントやユーザーエージェントが外観を決めるコンポーネントを除き、ユーザーインターフェースのコンポーネントや状態を識別するために必要な視覚情報に少なくとも3:1のコントラスト比を求めています。淡いベースマップ上の白いズームボタンは、白いページ上でブランドカラーが良く見えても、この比率を満たさない場合があります。

営業中と閉店を色だけの点で示す例と、営業中、閉店、遅延をアイコン、形状、テキストラベルで示す例。

弱い例では「営業中」に緑の円、「閉店」に赤の円だけを使います。より強い例ではチェック、×、警告形状と、「営業中」「閉店」「遅延」という文字を加えています。色も役立ちますが、色を見分けられない場合はテキストと形状が意味を担います。

凡例は地図上の色付きキーだけでなく、テキストでも提供します。カテゴリフィルターは、コントロール名または隣接ラベルで選択状態を示す必要があります。UI文言で「赤いピンをたどってください」と言わず、場所を名前で示します。以下のAI節でも、生成回答に同じルールを適用します。

支援技術には何を聞かせるべきか？

レンダラーのイベントではなく、アクションの結果をアナウンスします。役に立つステータスは、「4店舗がフィルターに一致した」「ルートの準備ができ、所要時間は何分」「アクセシブルな入口に一致する場所がない」などです。「タイルを読み込んだ」「マーカーが移動した」「地図中心が変わった」はノイズです。地図全体をlive regionで囲むと、これらの技術イベントを読み上げ、利用者が必要とする文を埋もれさせます。WAIは、role=statusを使ってステータスメッセージを提示する方法としてARIA22を文書化しています。この技法はWCAGを満たす一例であり、すべての地図が必ずそのroleを使うという要件ではありません（W3C, 2026）。

結果件数、準備済みルート、アクセシブルな入口の該当なしを伝えるステータスメッセージと、タイル読み込みやマーカー移動など無視すべきレンダラーイベントの比較。

有用なチャネルは結果件数、準備済みルート、アクセシブルな入口の該当なしを伝えます。無視するチャネルはタイル読み込み、マーカー移動、地図中心変更を列挙します。店舗名、距離、18分のルートは例示です。利用者が行動できる状態をアナウンスします。

検索とフィルターにも同じ規律が必要です。クエリ後は、マーカー更新を連続して読み上げるのではなく、件数または該当なしの状態を一度だけ報告します。割り込みが過度にならないよう短くします。件数が変わってもフォーカスを地図へ移さないでください。一覧が結果を読む場所であり続け、地図は同じ集合を反映します。

なぜAI回答は場所を名前で示す必要があるのか？

AIの地図回答は、テキストだけでも意味が通じる必要があります。「Downtown Pharmacyは深夜0時まで営業しており、選択した出発地点から1.2マイルです」は、場所、営業時間、距離を名前で示します。「赤いピンを強調しました」はキャンバスを指しているだけで、そのピンを見られない人には役立ちません。地図は同じ場所を選択し、ルートを描いて構いません。それでも文自体が判断内容を伝える必要があります。完成した回答、または短い要約をステータスチャネルへ送ります。すべてのtokenを支援技術へ送ったり、断片ごとにフォーカスをチャットへ移したりしないでください。

Downtown Pharmacyの名前、営業時間、距離を示すテキスト回答と地図、そして赤いピンを強調したとしか言わない不適切な回答。

有用な回答はDowntown Pharmacy、閉店時刻、選択した出発地点からの距離を示します。地図はその場所とルートを表示します。不適切な回答は赤いピンを強調したとしか言いません。図中の薬局名、営業時間、距離は例示です。

アクセス判断をモデルに任せないでください。ホストがレコードを認可し、回答はすでに結果集合に含まれる場所だけを説明できます。ソースデータにない段差のない入口、アクセシブルトイレ、認証を生成文に作らせてはいけません。レコードにアクセシビリティのフィールドがなければ、回答は「不明」と伝えるべきです。地図上の強調表示は任意の確認であり、回答そのものではありません。

地図がリフローできない場合でも何が機能すべきか？

WCAG 2.2の達成基準1.4.10では、利用や意味のために二次元レイアウトを必要とするコンテンツがあるとしています。Note 2は、地図や図など理解に必要な画像を挙げ、それらの部分には二次元スクロールを認めています。この例外は地図を対象にします。ページ見出し、検索、フィルター、結果テキスト、ボタン、AI回答、詳細カードには適用されません。画面幅が狭い場合や高倍率ズーム時には、一覧を地図の上または下に積み、地図は独自のスクロール領域に置き、テキストはその外に残します。キャンバスが小さなペインになっても、利用者がタスクを完了できる必要があります。

障害時も同じ分離が必要です。タイルが読み込めなくても、結果一覧、詳細、主要アクションは残します。地図が読み込めなかったことを伝え、レコードを利用可能なままにします。テキストのない空のキャンバスはスタイル上の問題ではなく、タスクの破綻です。動きを減らす設定もここに関係します。選択場所を伝えるために長いfly-toアニメーションへ依存しないでください。カメラ移動を短縮または省略しても、選択状態を変更し一覧を更新します。

アクセシブルなインタラクティブマップをKaleidrとどう配置するか？

検索、フィルター、結果一覧、詳細、主要アクション、ステータスメッセージはホストページに残します。場所、ルート、選択、フィルター、結果集合のIDを地図と共有します。Kaleidr Studioは、場所、コンテンツ、動作を備えたインタラクティブマップへアイデアを変える場所です（Kaleidr, 2026）。Viewerはshare idで公開済み地図を埋め込み、その埋め込みにはpublishable keyを必要としません（Kaleidr, 2026）。開発者ドキュメントでは、Chatをホスト地図内のSpatial AI、Viewerを地図公開、Tileをデザインされたベースマップ、Editorを描画・編集として説明しています（Kaleidr, 2026）。これらのサーフェスを囲むアクセシブルな操作経路は、引き続きホストが所有します。

ホストページに検索、フィルター、結果、詳細、アクション、ステータスがあり、中央に共有ID、右側にStudio、Viewer、Chat、地図体験がある構成。

ホストページが検索、フィルター、結果一覧、詳細、アクション、ステータスメッセージを所有します。共有IDがそのページをStudio、Viewer、Chat、地図につなぎます。図のフッターには、KaleidrがWCAG適合を自動的に保証するものではないと記されています。出荷された体験をテストする責任は公開者に残ります。

テンプレートや地図コンポーネントは土台を提供できます。ノーコード公開ガイドでも、公開者が色、コンテンツ、地図動作を追加した後の適合性をテンプレートが保証することはできず、適合は実際に出荷された体験に対して判断されると説明しています（Kaleidr, 2026）。キーボード、スクリーンリーダー、ズーム、狭いビューポートでタスク全体をテストします。地図が読み込まれない障害ケースも含めます。本記事は実装ガイドであり、適合性監査でも法的助言でもありません。

Kaleidr Studioを見る から地図を設計・公開できます。開発者ドキュメントを読む と、文書化されたChat、Viewer、Tile、Editorの各サーフェスを確認できます。結果一覧と場所を名前で示す回答はホストページに残し、地図が使うものと同じ場所IDに結び付けます。

注：Kaleidrは、クリエイティブおよび開発ワークフロー全体で、画像作成、コンテンツ改善、調査にAI支援ツールを使用しています。

よくある質問

キーボード代替は、ドラッグしないポインタ経路の代わりになりますか？

いいえ。WCAG 2.2では、ドラッグが本質的である場合、またはユーザーエージェントが動作を決定する場合を除き、ドラッグ操作を単一ポインタで完了できる方法を求めています。キーボードアクセスは同じタスクに対する別の要件です。

地図のリフロー例外は検索や結果一覧にも適用されますか？

いいえ。地図や図は二次元スクロールを維持できますが、見出し、検索、フィルター、結果、ボタン、AI回答は、ページが狭い場合やズームされた場合でも利用できる必要があります。

Kaleidrは公開地図のWCAG適合を保証しますか？

いいえ。Studio、Viewer、Chatは製品サーフェスです。適合性は、ラベル、コントラスト、結果一覧、ステータスメッセージ、テストを含む実際の公開ページによって決まります。

AI地図回答は「赤いピン」と言うべきですか？

いいえ。場所、関連する状態、距離またはルートをテキストで名前付きで示してください。地図は同じ場所を選択して構いません。文はキャンバスがなくても意味が通じる必要があります。

References

World Wide Web Consortium. Web Content Accessibility Guidelines (WCAG) 2.2. W3C Recommendation, December 12, 2024. Includes 2.4.11 Focus Not Obscured (Minimum), 2.4.12 Focus Not Obscured (Enhanced), 2.5.7 Dragging Movements, 2.5.8 Target Size (Minimum), 1.4.1 Use of Color, 1.4.11 Non-text Contrast, and the 1.4.10 Reflow note that lists maps and diagrams. Accessed October 7, 2026. https://www.w3.org/TR/WCAG22/
Kaleidr. Embed Interactive Map on a Website. Asks for headings, summaries, and a location list outside the canvas. https://kaleidr.com/blog/how-to-embed-interactive-map-on-a-website
W3C Web Accessibility Initiative. Developing a Keyboard Interface. Distinguishes keyboard focus from selection. Accessed October 7, 2026. https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/
W3C Web Accessibility Initiative. ARIA22: Using role=status to present status messages. An example technique, not a required implementation. Accessed October 7, 2026. https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA22
Kaleidr. AI Map Maker for Branded Interactive Maps. Studio turns ideas into interactive maps with locations, content, and behavior. Accessed October 7, 2026. https://kaleidr.com/studio
Kaleidr Developer Docs. Viewer. Embeds a published map by its share id, and that embed does not require a publishable key. Accessed October 7, 2026. https://docs.kaleidr.com/viewer
Kaleidr Developer Docs. Introduction. Chat is Spatial AI in the host map, Editor is draw and edit, Tile is designed basemaps, and Viewer publishes a map. Accessed October 7, 2026. https://docs.kaleidr.com/
Kaleidr. Launch a No-Code Map Website. A template does not guarantee conformance of the experience a publisher ships. https://kaleidr.com/blog/launch-a-map-website-no-code

@misc{w3c_wcag22_2024,
  title  = {Web Content Accessibility Guidelines (WCAG) 2.2},
  author = {{World Wide Web Consortium}},
  year   = {2024},
  url    = {https://www.w3.org/TR/WCAG22/}
}

@misc{kaleidr_embed_map_2026,
  title  = {Embed Interactive Map on a Website},
  author = {{Kaleidr}},
  year   = {2026},
  url    = {https://kaleidr.com/blog/how-to-embed-interactive-map-on-a-website}
}

@misc{w3c_keyboard_interface_2026,
  title  = {Developing a Keyboard Interface},
  author = {{World Wide Web Consortium}},
  year   = {2026},
  url    = {https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/}
}

@misc{w3c_aria22_2026,
  title  = {ARIA22: Using role=status to present status messages},
  author = {{World Wide Web Consortium}},
  year   = {2026},
  url    = {https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA22}
}

@misc{kaleidr_studio_a11y_2026,
  title  = {AI Map Maker for Branded Interactive Maps},
  author = {{Kaleidr}},
  year   = {2026},
  url    = {https://kaleidr.com/studio}
}

@misc{kaleidr_docs_viewer_a11y_2026,
  title  = {Viewer},
  author = {{Kaleidr}},
  year   = {2026},
  url    = {https://docs.kaleidr.com/viewer}
}

@misc{kaleidr_docs_home_a11y_2026,
  title  = {Introduction},
  author = {{Kaleidr}},
  year   = {2026},
  url    = {https://docs.kaleidr.com/}
}

@misc{kaleidr_launch_map_2026,
  title  = {Launch a No-Code Map Website},
  author = {{Kaleidr}},
  year   = {2026},
  url    = {https://kaleidr.com/blog/launch-a-map-website-no-code}
}