Google Maps Platform

Maps JavaScript API のユーザー補助機能の向上

2021年6月23日

https://storage.googleapis.com/gweb-cloudblog-publish/images/developers-dot-devsite-v2-prod.appspot.com.max-2600x2600.png

Google Cloud Japan Team

※この投稿は米国時間 2021 年 6 月 16 日に、Google Cloud blog に投稿されたものの抄訳です。

本日は、Google Maps Platform JavaScript チームが行っている、Maps JavaScript API のユーザー補助機能の改善に重点を置いた最近の機能変更をいくつかご紹介します。当チームは 2020 年に、すぐに使えるユーザー補助機能と、デベロッパーがユーザー補助エクスペリエンスを作成するために利用できるフックを増やす新たな取り組みを開始しました。

Google は、Maps JavaScript の UI と API のユーザー補助機能の改善に継続的に取り組んでおり、まだまだできることがあると認識しております。お客様にはこうした新機能を毎週の最新バージョンでお試しいただき、変更点に関するフィードバックの提供と新しいバグの報告にご協力いただけますと幸いです。それらを参考に、最も影響の大きい領域に優先順位を付けさせていただきます。みなさんのウェブサイトに影響を与える既存のバグに +1 し、新しいバグレポートをご提出ください。ユーザー補助機能は、さまざまなユーザーやコミュニティに多様な影響を与える複雑なトピックです。お客様のフィードバックは、Google Maps Platform の機能を誰でも利用できるようにする取り組みの指針として活用されます。

2020 年最初の機能変更は、特に根本的な問題に焦点を絞っていました。タブの順序の最適化、キーボードの有効化とスクリーンリーダーの対話的な機能、スクリーンリーダーに関する説明の追加、各マップコントロールのカラーコントラストの強調を図りました。機能変更の前後での違いをご覧ください。

https://storage.googleapis.com/gweb-cloudblog-publish/original_images/before-t_copy.gif

タブの順序は標準的ではなく、スペースバーでボタンがアクティブになりませんでした。

https://storage.googleapis.com/gweb-cloudblog-publish/original_images/after-t_copy.gif

タブの順序は左から右、上から下に並べられ、スペースバーでボタンがアクティブになり選択でき、色のコントラストが上がって視認性が増しています。

また、デベロッパーがマップに追加するマーカーについても詳しく調べました。マーカーは、img ロールか、インタラクティブな場合（クリックイベントリスナーが登録されている場合など）は button ロールにデフォルト設定されました。インタラクティブなマーカーもキーボードで矢印キーを繰り返し押して操作できます。デベロッパーがマーカーにタイトルを指定すると、このテキストはユーザー補助ラベルにも使用されます。こうした改善は最適化されていないマーカーにのみ適用されることにご注意ください。詳細については、新しい「マーカーを利用可能にする（Make a marker accessible）」ガイドと「マーカーのユーザー補助機能（Marker Accessibility）」コードサンプルをご覧ください。

https://storage.googleapis.com/gweb-cloudblog-publish/original_images/markers.gif

ユーザー補助のラベルとロールが適用された、キーボードの矢印キーで操作できるマーカー。

マップで特に使用される UI コンポーネントは InfoWindow です。改善点の中で特筆すべきなのは、InfoWindow が開いたり閉じたりした際に、InfoWindow から出入りするタブ選択を自動的に管理する機能です。デフォルトではこれまで多くのユーザから寄せられたフィードバックを元に、open() が自動的にフォーカスを移動するかどうかを決定します。デベロッパーの皆様は、InfoWindow を開く際に shouldFocus オプションを使用して明示的に選択することをおすすめします。

読み込んでいます...

https://storage.googleapis.com/gweb-cloudblog-publish/original_images/Hello_world.gif

InfoWindow を開くと、最初のフォーカス可能な要素（デベロッパー指定のコンテンツか、組み込みの閉じるボタン）が開きます。閉じると、フォーカスが復元されます。

Maps JavaScript API は 2005 年以降、パンやズームなどのマップ操作のキーボードコントロールをサポートしていますが、ユーザーがキーボードショートカットを見つけるのは困難でした。今月、UI に新しいキーボードショートカットのダイアログを追加し、使用できるショートカットをユーザーが見つけやすくしました。こうしたキーボードショートカットは、マップ自体にフォーカスがあるときに有効になります。

https://storage.googleapis.com/gweb-cloudblog-publish/original_images/keyboard.gif

マップ上の「キーボードショートカット」ボタンをアクティブにすると、使用可能なショートカットのダイアログが表示されます。

今後導入予定の機能

ウェブでは毎日、世界中の何百万人ものユーザーが Maps JavaScript API によって提供される Google basemap を利用しています。Google の目標は、万人向けのマップを作成できるようにするために必要なツールをデベロッパーに提供することです。

Google Cloud は、Maps JavaScript の UI と API のユーザー補助機能の改善に継続的に取り組んでおり、まだまだできることがあると認識しております。今回の変更は、その手始めにすぎません。これらの新機能をぜひお試しになり、フィードバックをご提供ください。また、リリースノートページでは、Maps JavaScript API の新しい機能の追加状況をご確認いただけます。さらに、既存のバグを検索してウェブサイトに影響するバグに +1 する、これまでに修正されたバグを確認する、フィードバックや発生した問題を記載した新しいバグレポートを送信するなどの方法で、Google Maps Platform の改善にご協力いただけますと幸いです。

今後ともどうぞよろしくお願いいたします。

Google Maps Platform の詳細については、ウェブサイトをご覧ください。

-Chris J. Shull、Maps JavaScript API 担当テクニカルリーダー

投稿先