場所が地図でしか分からない店舗マップ

コーヒー店の「カフェを探す」ページには、見出しと、町に3つのカフェがあるという一文と、地図があります。地図はこのデザインの主役で、町を描いた絵の上に、カフェごとにピンが立っています。見えているピンは、港のそばと市場広場の2つです。古い水車小屋のカフェは右端の外にあり、地図をドラッグすると見えてきます。ピンをクリックすると、地図の下のほうに小さなカードが開き、そのカフェの住所と営業時間が出ます。

Tabキーを押すと、フォーカスはページの先頭から、地図の下の「祝日の営業時間」のリンクへ一気に移ります。ピンには一度も止まらないので、カードは開かず、地図を動かす方法もありません。スクリーンリーダーでページを読み進めると、「カフェを探す、見出しレベル2」「町に3つのカフェがあります。」に続いてすぐにリンクが読まれます。どのカフェがどこにあるのかは、一度も読まれません。

この地図は、カフェがどこにあるかという情報を伝える画像です。ところが画像は alt="" で、支援技術には装飾として扱われ、その上のピンは空の div です。カフェについてのテキストは、ピンをクリックしたときにスクリプトがカードに書き込むものしかありません。地図が伝える情報にテキストの代替がないため、1.1.1を満たしません。WAIの画像のチュートリアルは、場所を示す地図を「複雑な画像」に数えています。短い代替テキストで何の画像かを伝え、画像が示す内容はより長いテキストで、できればページの本文に書く、という扱いです。

ピンはクリックのハンドラーを持つ div です。ブラウザーは div をTabで止めず、キー操作も受け付けないため、キーボードではカフェのカードを開けません。地図の表示もドラッグするポインターでしか動かず、動かすキーもありません。カフェの詳しい情報を見ることも、端から外れた町の部分を見ることもページの機能ですが、どちらもキーボードではできないため、2.1.1を満たしません。

地図を動かす方法はドラッグだけなので、2.5.7も満たしません。地図の表示を動かすのに、ドラッグは必要ありません。ポインターがどんな道筋をたどったかで、結果は変わらないからです。2.5.7の解説書は、満たす例の一つとして、まさにこの場面を挙げています。地図の表示をドラッグで動かせ、上下左右のボタンでも動かせる、という例です。解説書は、キーボードで同じ操作ができるだけでは、この達成基準を満たすとは限らないとも書いています。タッチスクリーンやヘッドポインターを使う人、マウスのボタンを押したままにできない人には、クリックやタップで操作できるものが必要です。代わりの方法は地図の一部でなくてもよく、機能が同等であればかまいません。そのため、カフェの一覧は、カフェを見つけるための代わりにはなりますが、カフェの周りの道を見るための代わりにはなりません。

スマートフォンでは、地図が画面いっぱいに広がっても映る町の範囲はさらに狭く、最初から端の外にあるカフェが増えます。カフェを探すページは出かける途中で開かれることも多く、そのとき言葉で書かれた住所は、自分の地図アプリに貼り付けて使うものでもあります。

10グループ中5グループに影響

• 全盲 （影響あり）
• 弱視 （影響あり）
• 色覚 （影響なし）
• ろう （影響なし）
• 難聴 （影響なし）
• 発話 （影響なし）
• 手の操作 （影響あり）
• 筋力・可動域 （影響あり）
• 認知 （影響あり）
• 光過敏 （影響なし）

• 視覚を使わない スクリーンリーダーの利用者に読まれるのは、見出しと「町に3つのカフェがあります」だけで、どのカフェのことも伝わりません。地図は装飾の画像とされ、ピンとカードは、クリックするまで空のままです。
• 手の操作が限られる キーボードやスイッチの利用者はピンに一度も止まれず、音声操作の利用者は声で指定する名前もないため、住所にたどり着けません。地図を動かせないので、端から外れたカフェを探すこともできません。
• 筋力や可動域が限られる 手のふるえがある人や力の弱い人には、地図の上でドラッグを続けるのが難しく、指を離す瞬間にもまた地図がずれて、目当てのピンになかなかたどり着けません。
• 視覚が限られる 大きく拡大すると、地図に映る町の範囲が狭くなり、最初から端の外にあるカフェが増えて、そのたびにドラッグで探すことになります。
• 言語・認知・学習の能力が限られる 地図から場所を読み取るには、空間を把握する力や方向の感覚が要ります。住所や目印が言葉で書かれていなければ、ほかに手がかりがありません。

自動チェックに見えるのは、alt="" の画像と3つの空の div です。名前が要るものも、コントロールを名乗るものもないため、修正前のコードは自動チェックのどのルールにも反しません。EaseWebの診断は、Leaflet、Mapbox GL、MapLibre、Google Maps、OpenLayersといった一般的な地図ライブラリーで描かれた地図と、地図サービスから埋め込まれた地図について、1つずつ確認を促す項目を出します。項目には、名前のないピンや「Marker」のようなライブラリーの汎用の名前のままのピンの数と、フォーカスを受け取らないピンの数が示されます。場所がページにも書かれているか、地図がドラッグせずに動くかは、人が見ないと分からないからです。この例のようにサイト独自のコードで描いた地図には、地図だと分かる目印がないため、診断では見つからず、人が確認する必要があります。AIのコーディング支援に地図のアクセシビリティ改善を頼むと、地図のコンテナーに aria-label="地図" を、ピンに role="button" と tabindex="0" を付けることがよくあります。ピンには届くようになりますが、どれも名前のないボタンとして読まれ、場所はやはりどこにも書かれず、地図もドラッグでしか動きません。