Maps JavaScript API のユーザー補助機能に関する最新情報
先月グローバル アクセシビリティ アウェアネス デーを迎えたことにちなみ、昨年の取り組みからの進捗状況と、Maps JavaScript API と Maps Embed API のユーザー補助機能の向上に関する最近の更新情報についてお知らせします。
Google Cloud は昨年より Embed API の根本的な改善に焦点を絞り、「タブ」の順序、キーボードとスクリーン リーダーのインタラクティブな機能、ユーザー補助ラベルの追加、各種マップ コントロールのカラー コントラストの強調といった改善に取り組んできました。このような改善により、目の不自由な方に加え、スクリーン リーダーやキーボード ナビゲーションを使うすべての方に、よりインクルーシブなマップをご利用いただけるようになります。この記事では、これまでに実現できた改善点の詳細をいくつかご紹介します。
| タブが左から右、上から下の順に並べられ、スペースバーでボタンをアクティブにして選択でき、色のコントラストが上がって視認性が増しています。 |
ハイ コントラスト モードのマップも改善し、一部のボタンとチェックボックスを見やすく、認識しやすくしました。このために、マップがハイ コントラストの設定に合うようにコードベースの CSS に変更を加えました。
| ハイ コントラスト モードでもボタンとチェックボックスの視認性が保たれます。 |
また、マップで特に使用される UI コンポーネントである情報ウィンドウ（InfoWindow）のさらなる改善にも引き続き取り組みました。デベロッパーはユーザー補助ラベルを指定して、情報ウィンドウが表示されているときにフォーカスするようプログラムで設定できるようになりました。
const infoWindow = new google.maps.InfoWindow({
ariaLabel: 'Hello Accessibility',
content: '<h2>Hello Accessibility!</h2>',
});
infoWindow.addListener('visible', () => {
infoWindow.focus();
});
infoWindow.open({
anchor: marker,
shouldFocus: false,
});
| 情報ウィンドウにユーザー補助ラベルを指定して、情報ウィンドウが表示されているときにフォーカスするようにプログラムで設定できます。 |
最後に、キーボードでのマーカー操作を支援するためにスクリーン リーダー向けの使用手順を追加しました。この機能は、初めて利用するユーザーで、キーボードを使ってインタラクティブなマーカー（登録したクリック イベント リスナーがある場合）を移動する方法についてご存知ない方に特に便利です。マーカーをより使いやすくする方法について詳しくは、「マーカーをアクセス可能にする」ガイドと「マーカーのユーザー補助機能」コードサンプルをご覧ください。
| キーボードでのマーカー操作を支援する、スクリーン リーダーの使用手順。 |
新たに改善した機能をお試しいただき、変更点に関するフィードバックや新しいバグの報告にご協力いただけますと幸いです。それらを参考にして、最も影響が大きい領域に優先して対応してまいります。皆様のウェブサイトに影響する既存のバグに [+1] で投票するか、新しいバグレポートを提出してください。
ユーザー補助機能は、さまざまなユーザーやコミュニティに多様な影響を与える複雑なトピックです。お客様のフィードバックは、Google Maps Platform の機能を誰でも利用できるようにする取り組みの指針として活用されます。Maps JavaScript API と Maps Embed API のユーザー補助機能や改善点の最新情報もご確認ください。
ウェブでは毎日、世界中の何百万人ものユーザーが Maps JavaScript API によって提供される Google マップの基本地図を利用しています。Google の目標は、多くのユーザーに受け入れられる主題図を容易に作成するために必要となるツールをデベロッパーに提供することです。
Google Maps Platform チームは、Maps JavaScript と Maps Embed の UI と API のユーザー補助機能の向上に向けて、まだまだできることがあると認識しています。詳細については、Maps JavaScript API と Maps Embed API の更新状況は、リリースノート ページでご確認ください。
Google Maps Platform に関する詳しい情報はこちらをご覧ください。ご質問やフィードバックはページ右上の「お問い合わせ」より承っております。