Google マップ (PC 版) のキーボード操作性の向上

ウェブサイトで、地図をユーザーに提示する際、Google マップを活用することは多いと思います。私が UI 設計に関わるプロジェクトでは、ユーザビリティの問題を回避するため、インラインフレームで Google マップを埋め込むのではなく、Google マップの URL にリンクさせるようにしています (参照 : Google マップの埋め込みについて考える)。こうすることで、インタラクティブな地図操作は Google マップのサイト/アプリに委ねることができる (地図利用というコンテキストにおいてより優れた UX を提供できる) という利点がありますが、最近、PC で開くことができる Google マップのサイトで、アクセシビリティ、特にキーボードでの操作性が大きく向上していることに気が付きました。以下、ご紹介します。

地図のズームとパン

地図アプリケーションの基本機能と言えば、ズーム (表示の拡大/縮小) とパン (表示エリアの移動) でしょう。Google マップでは、このいずれもが、キーボード操作で可能です。

ズーム (表示の拡大/縮小)

Google マップをブラウザで開いた状態で、PC の [+] キーまたは [-] キーを押すと、いつでもズームイン/ズームアウトができます (ただし、手元の環境では、Windows の Firefox ではこの操作がうまくできませんでした)。また、[Tab] キーで Google マップ上の「+」「-」アイコンにフォーカスを当てて [Enter] キーを押すことによっても、ズームイン/ズームアウトは可能です。

Google マップのズーム機能。PC の [+] キーまたは [-] キーを押すことで、また Google マップ上の「+」「-」アイコン (図中赤枠部分) にフォーカスを当てて [Enter] キーを押すことで、ズームイン/ズームアウトができる。
Google マップのズーム機能

パン (表示エリアの移動)

Google マップをブラウザで開いた状態で PC の [Tab] キーを何度か押すと、地図上に青い四角形が表示されます。この状態で、PC の上下左右矢印キーを押すと、パンが実行されます (表示エリアが移動します)。

Google マップのパン。地図上に青い四角形が表示された状態で PC の上下左右矢印キーを押すと表示エリアが移動する。
Google マップのパン

面白いのは、パンの実行中「西に移動しています」といった具合に移動方向がテキストで明示され、パンの実行が完了すると、青い四角形のエリアに含まれる主な場所がリスト表示されることです。リストの各項目には番号が振られていて、PC の数字キーを押すと、該当する番号の場所の詳細情報がサイドパネルとして展開表示されます。

主な場所リストに振られている番号 (図中赤枠部分) に呼応した数字キーを PC で押すと、その場所の詳細情報がサイドパネルとして展開表示される。
主な場所リストの番号に呼応したサイドパネル表示

その他の機能へのアクセス

Google マップでは、[Tab] キーによるフォーカス移動で、マウスクリックが可能なほとんどの機能 (メニュー、検索窓、サイドパネルの各リンク、現在位置表示、ズーム、Google Earth、など) にアクセスできるようになっています。

ただし、一部マウスによるドラッグ&ドロップが必要な機能、たとえば、ストリートビューを見るために人形 (ペグマン) を地図上に配置する操作などは、キーボード操作だけでは完結できないようです。

スクリーンリーダー対応

Windows NVDA

Windows で NVDA と各ブラウザ (Chrome や Firefox) を併用して音声読み上げを試したところ、[Tab] キーによるフォーカス移動や矢印キーによるパンの実行など、概ね問題なく読み上げられました。

よくできているなと感心したのは、パン実行中に表示される移動方向の情報や、パン実行完了後に表示されるエリア内の主な場所リストが、インタラクションに合わせて自動的に音声で読み上げられることです。主な場所リストに振られている番号に呼応した数字キーを押して、その場所の詳細情報がサイドパネルで展開表示されると、その旨も音声で読み上げられます。

なお、サイドパネルで [Tab] キーによるフォーカスが当てられない箇所 (クリッカブルでないテキスト) については、NVDA を「ブラウズモード」に切り替えることで、音声読み上げをさせることができます。

NVDA では、[Ins] キー + スペースキーによって、「フォーカスモード」と「ブラウズモード」を切り替えることができます。ご参考 :「NVDA のキーボード操作リファレンス」)

Mac VoiceOver

Mac の VoiceOver では、Google 謹製の Chrome との併用であれば概ね問題なく音声読み上げができました。[Tab] キーによるフォーカス移動、矢印キーによるパンの実行、数字キーによるサイドパネルの展開も可能です。サイドパネルで [Tab] キーによるフォーカスが当てられない箇所 (クリッカブルでないテキスト) についても、VO キー + 矢印キーを用いることで、音声読み上げをさせることができます。

一方、Mac の標準ブラウザである Safari と VoiceOver の併用においては、パンの操作がうまくできないなど、実用上まだまだ問題があるように見受けられました。今後の改善に期待したいところです。


このように PC 版の Google マップは、(Mac VoiceOver での利用において多少の課題を残しつつも) 総じてアクセシビリティはかなり向上していると言えます。ユーザーに地図を提示する際には有効に活用したいものです。