Google Maps Platform

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

Accessibility Header

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

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

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

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

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

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

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

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

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

  const infoWindow = new google.maps.InfoWindow({
    content: "Hello Accessibility!",
});
infoWindow.open({
    anchor: marker,
    shouldFocus: true,
});
Hello world

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

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

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

今後導入予定の機能

ウェブでは毎日、世界中の何百万人ものユーザーが 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 担当テクニカル リーダー