5 月 18 日のグローバル アクセシビリティ アウェアネス デーにちなみ、Maps JavaScript API のユーザー補助機能の改善に向けた この 1 年間の取り組みについてお知らせいたします。
この 1 年間は、ストリートビュー レンダリング サービスの根本的な改善に絞り、「タブ」の順序、キーボードとスクリーン リーダーのインタラクティブな機能、ユーザー補助ラベルの追加、ストリートビューの各種コントロールのカラー コントラストの強調といった部分に取り組んできました。これらの改善により、目の不自由な方に加え、スクリーン リーダーやキーボード ナビゲーションを使うすべての方に、よりインクルーシブなマップをご利用いただけるようになっています。この記事では、今回実現した改善点の詳細をいくつかご紹介します。
デフォルトのストリートビュー パノラマの動作に新たに改良を加えました。ストリートビュー パノラマを開いたときに、フォーカスが自動的にセットされるようになりました。パノラマを閉じるには、単に Esc キーを押すだけです。デベロッパーは、ストリートビューが表示されたときのフォーカスをプログラムで設定できます。
const streetView = new google.maps.StreetViewPanorama(container, {position});
streetView.addListener('visible_changed', () => {
if (streetView.getVisible()) {
streetView.focus();
}
});
さらに、マップで最もよく使われる UI コンポーネントの 1 つであるマーカーも、引き続き改良を重ねています。たとえば、ドラッグ可能な設定を有効にすると、キーボードまたはマウスを使用してマーカーをドラッグすることができます（この機能は高度なマーカーでのみ利用可能です）。また、単一ポインタ操作では、ドラッグ可能なマーカーを長押しして（これでドラッグ操作が有効になる）マップ上の任意の場所をクリックすると、マーカーをドロップできます。ドラッグ操作は、Esc キーを押すか、単にタブでフォーカスを移動することで、いつでも解除できます。さらに、マーカーのドラッグ時にマップを継続的にズームして、マーカーのドロップ位置を正確に指定できるようになりました。この場合のズームは、マウスホイールか、キーボードの + キーと - キーを使用して操作できます。
const marker = new google.maps.marker.AdvancedMarkerElement({
map,
position,
gmpDraggable: true,
title: 'Draggable marker'
最後に紹介するのは、キーボード ショートカット ダイアログに表示される追加ヘルプ機能です。傾斜と回転の操作をベクターマップに対して有効にすると、それに対応するキーボード ショートカットがダイアログに表示されます。また、スクリーン リーダー用にキーボード ショートカットの説明が追加されたため、マップやストリートビュー上でフォーカスがセットされているときに、スクリーン リーダーによる説明の読み上げが可能になりました。
新たに改善した機能をお試しいただき、今回の変更に関するフィードバックの提供と新しいバグの報告にご協力いただけますと幸いです。それらを参考にして、最も影響が大きい領域に優先して対応してまいります。皆様のウェブサイトに影響する既存のバグに [+1] で投票するか、新しいバグレポートを提出してください。
ユーザー補助機能は、さまざまなユーザーやコミュニティに多様な影響を与える複雑なトピックです。お客様のフィードバックは、Google Maps Platform の機能を誰でも利用できるようにする取り組みの指針として活用されます。Maps JavaScript API と Maps Embed API のユーザー補助機能や改善点の最新情報もご確認ください。
ウェブでは毎日、世界中の何百万人ものユーザーが Maps JavaScript API によって提供される Google マップを利用しています。Google の目標は、誰にとっても役立つマップを作成するために必要なツールをデベロッパーに提供することです。
Google Maps Platform チームは、Maps JavaScript API のユーザー補助機能を引き続き向上させていく方針で、まだまだできることがあると認識しております。Maps JavaScript API の更新状況は、リリースノート ページでご確認いただけます。
Google Maps Platform に関する詳しい情報はこちらをご覧ください。ご質問やフィードバックはページ右上の「お問い合わせ」より承っております。
