この記事は Google Maps Platform チームによる Google Cloud Blog の記事 “Improved accessibility in the Maps JavaScript API” を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。
Google は、Maps JavaScript の UI と API のユーザー補助機能の改善に継続的に取り組んでおり、まだまだできることがあると認識しております。お客様にはこうした新機能を毎週の最新バージョンでお試しいただき、変更点に関するフィードバックの提供と新しいバグの報告にご協力いただけますと幸いです。それらを参考に、最も影響の大きい領域に優先順位を付けさせていただきます。みなさんのウェブサイトに影響を与える既存のバグに +1 し、新しいバグレポートをご提出ください。ユーザー補助機能は、さまざまなユーザーやコミュニティに多様な影響を与える複雑なトピックです。お客様のフィードバックは、Google Maps Platform の機能を誰でも利用できるようにする取り組みの指針として活用されます。
2020 年最初の機能変更は、特に根本的な問題に焦点を絞っていました。タブの順序の最適化、キーボードの有効化とスクリーン リーダーの対話的な機能、スクリーン リーダーに関する説明の追加、各マップコントロールのカラー コントラストの強調を図りました。機能変更の前後での違いをご覧ください。
タブの順序は標準的ではなく、スペースバーでボタンがアクティブになりませんでした。
タブの順序は左から右、上から下に並べられ、スペースバーでボタンがアクティブになり選択でき、色のコントラストが上がって視認性が増しています。
また、デベロッパーがマップに追加するマーカーについても詳しく調べました。マーカーは、img ロールか、インタラクティブな場合（クリック イベント リスナーが登録されている場合など）は button ロールにデフォルト設定されました。インタラクティブなマーカーもキーボードで矢印キーを繰り返し押して操作できます。デベロッパーがマーカーにタイトルを指定すると、このテキストはユーザー補助ラベルにも使用されます。こうした改善は最適化されていないマーカーにのみ適用されm。詳細については、新しい「マーカーを利用可能にする（Make a marker accessible）」ガイドと「マーカーのユーザー補助機能（Marker Accessibility）」コードサンプルをご覧ください。
ユーザー補助のラベルとロールが適用された、キーボードの矢印キーで操作できるマーカー。
マップで特に使用される UI コンポーネントは InfoWindow です。改善点の中で特筆すべきなのは、InfoWindow が開いたり閉じたりした際に、InfoWindow から出入りするタブ選択を自動的に管理する機能です。デフォルトではこれまで多くのユーザーから寄せられたフィードバックを元に、open() が自動的にフォーカスを移動するかどうかを決定します。デベロッパーの皆様は、InfoWindow を開く際に shouldFocus オプションを使用して明示的に選択することをおすすめします。
const infoWindow = new google.maps.InfoWindow({
content: “Hello Accessibility!”,
});
infoWindow.open({
anchor: marker,
shouldFocus: true,
});
InfoWindow を開くと、最初のフォーカス可能な要素（デベロッパー指定のコンテンツか、組み込みの閉じるボタン）が開きます。閉じると、フォーカスが復元されます。
Maps JavaScript API は 2005 年以降、パンやズームなどのマップ操作のキーボード コントロールをサポートしていますが、ユーザーがキーボード ショートカットを見つけるのは困難でした。今月、UI に新しいキーボード ショートカットのダイアログを追加し、使用できるショートカットをユーザーが見つけやすくしました。こうしたキーボード ショートカットは、マップ自体にフォーカスがあるときに有効になります。
マップ上の「キーボード ショートカット」ボタンをアクティブにすると、使用可能なショートカットのダイアログが表示されます。
今後導入予定の機能
ウェブでは毎日、世界中の何百万人ものユーザーが Maps JavaScript API によって提供される Google basemap を利用しています。Google の目標は、万人向けのマップを作成できるようにするために必要なツールをデベロッパーに提供することです。
Google は、Maps JavaScript の UI と API のユーザー補助機能の改善に継続的に取り組んでおり、まだまだできることがあると認識しております。今回の変更は、その手始めにすぎません。これらの新機能をぜひお試しになり、フィードバックをご提供ください。また、リリースノート ページでは、Maps JavaScript API の新しい機能の追加状況をご確認いただけます。さらに、既存のバグを検索してウェブサイトに影響するバグに +1 する、これまでに修正されたバグを確認する、フィードバックや発生した問題を記載した新しいバグレポートを送信するなどの方法で、Google Maps Platform の改善にご協力いただけますと幸いです。
Google Maps Platform に関する詳しい情報はこちらをご覧ください。ご質問やフィードバックはページ右上の「お問い合わせ」より承っております。