Esri は、W3C (World Wide Web Consortium) の WCAG (Web Content Accessibility Guidelines) (2.0、2.1、2.2 AA) およびリハビリテーション法第 508 条の基準に従うことにより、すべてのユーザーが ArcGIS Experience Builder にアクセスできるように取り組んでいます。 アクセシビリティーの認定専門家が、製品のアクセシビリティー基準およびガイドラインへの適合性を文書化する際に使用するテンプレートである VPAT (Voluntary Product Accessibility Template) を使用して、ArcGIS Experience Builder をテストしています。
「ArcGIS Experience Builder の Esri アクセシビリティー適合レポート」をご参照ください。
アクセシブル テクノロジーに対する Esri の取り組みについては、「Esri のアクセシビリティー」をご参照ください。 アクセシビリティーに関する法的情報については、「Esri の法的情報」をご参照ください。 アクセシビリティーのベスト プラクティスについては、「ArcGIS Experience Builder に関するアクセシビリティーのベスト プラクティス」をご参照ください。
以降のセクションでは、アクセシブルなアプリを構築するための現在の Experience Builder 機能について説明します。 今後のソフトウェア更新で、アクセシビリティー機能がさらに追加されます。
注意:
以降のセクションのコンテンツは、今後のリリースに伴って変更される場合があります。
ページ
[ページ] パネルには、全画面、スクロール、グリッドの 3 つのタイプのページを追加できます。 アクセシブルなアプリを構築するには、全画面ページとスクロール ページを使用することをおすすめします。
全画面ページでは固定レイアウトが使用され、ウィジェットがページ上の絶対位置に表示されます。 デフォルトでは、キーボードによるナビゲーションのタブ順は、ウィジェットがキャンバスに追加された順序に従います。 ただし、これは、ウィジェットを追加した順序によっては、キーボードによるナビゲーションのタブ順が、ユーザーにとって予期しない順序でページ内を移動する可能性があることを意味します。
より直感的なタブ順を作成するには、ビルダー内にある [A11Y] ボタンをクリックして、[固定レイアウトでのエレメントのタブ順序の自動計算] をオンにします。 オンにすると、Experience Builder では、全画面ページ (およびカード ウィジェットやリスト ウィジェットなど、全画面ページのように動作するウィジェット固定レイアウト コンテナー) 内の新しく追加したすべてのウィジェットに対して論理的なタブ順が作成されます。 Experience Builder は、ウィジェットの位置に基づいてタブ順を自動的に計算します。 最適な結果を得るためには、アクセシブルなアプリを構築する前に、まずこの設定をオンにします。
[固定レイアウトでのエレメントのタブ順序の自動計算] をオンにしても、レイアウト内にすでに存在するウィジェットのタブ順は自動的に調整されません。 自動計算を実行するにはレイアウトに小さな調整を加える必要がありますが、固定レイアウト全体への自動計算の場合は、1 つの小さな調整のみを行います。 たとえば、ページ、セクション、カード ウィジェット上の 1 つのウィジェットのサイズを変更すると、ページ、セクション、カード ウィジェット全体の自動計算がそれぞれ実行されます。
注意:
自動的に計算されたタブ順によって、ウィジェットの鉛直方向の順序が変更されます。 アクセシブルなアプリを構築するときは、ウィジェットを重ねて配置しないことをおすすめします。
スクロール ページはブロックとスクリーン グループに整理されます。 ブロック コンテナーは行ウィジェットに似ています。 スクロール ページでは、キーボードのタブ順は論理的な読み取り順に従います。 ただし、カード、固定パネル、セクション ウィジェットなど、固定レイアウトを使用するウィジェットを追加する場合、それらのウィジェットは上記の固定レイアウトの動作を行うため、直感的なタブ順を実現するには [A11Y] ボタンを使用する必要があります。
注意:
Safari で Tab キーを使用してタブ順を期待どおりに機能させるには、Safari 設定の [詳細] ウィンドウで [Tab キーを押したときに Web ページ上の各項目を強調表示] をオンにする必要があります。 Option + Tab キーと Option + Shift + Tab キーを使用して、Safari で各項目に順番に移動することもできます。
次の表に、このセクションの情報の概要を示します。
| ページ タイプ | アクセシビリティーの状況 | 備考 |
|---|---|---|
全画面 | サポート | ビルダーの [固定レイアウトでのエレメントのタブ順序の自動計算] 設定を使用します。 |
スクロール | サポート |
テンプレート
テンプレートから開始する場合、アクセシビリティーのために最適化されている次のいずれかの全画面テンプレートを使用することをおすすめします。 これらのテンプレートはすべて、テンプレート ギャラリーの [デフォルト] タブに表示されます。
- ビルボード
- 時系列
- ダート
- 折りたたみ可能
- フレーム
- ギャラリー
- 一般
- ジュエリーボックス
- ジャーニー
- ローンチパッド
- プラトー
- ポケット
- 序文
- リボン
- スカイライン
- サマリー
- タブ
テンプレート ギャラリーの [ArcGIS Online] タブには、Esri とユーザーが作成したパブリック テンプレートがリストされます。 Job Hunting (A11Y) テンプレートは、アクセシビリティーについて最適化されています。
これらのテンプレートは、次の方法でアクセシビリティーのために最適化されています。
- キーボード ナビゲーションのタブ順序は直感的なものになっています。 各要素は見かけの階層に従っており、重なり合うことはありません。 [固定レイアウトでのエレメントのタブ順序の自動計算] 設定はデフォルトでオンになっているため、デフォルトのレイアウトを変更すると、直感的な順序を維持するために Experience Builder でタブ順序が更新されます。
- デフォルトのカラー コントラスト比は、テキストの場合は 4.5:1、ユーザー インターフェイス コンポーネントとグラフィック オブジェクトの場合は 3:1 という WCAG の最小要件を満たしています。
- キーボード フォーカス インジケーターには、識別可能なフォーカス リングを表示するために最適化されたデフォルトの色があります。
- 必要に応じて、1 ～ 6 のランクが付いた見出しに大きなテキストが表示されます。
- デフォルトの画像ソースがある画像ウィジェットにはデフォルトの代替テキストがあります。 空のプレースホルダー画像ウィジェットには空の代替テキストがあり、画像を追加するときに代替テキストを追加できます。
スクリーン リーダー
Experience Builder のアクセシビリティーのサポートは、次のブラウザーとスクリーン リーダーを組み合わせてテストされています:
| オペレーティング システム | ブラウザー | スクリーン リーダー |
|---|---|---|
Windows | Google Chrome、Mozilla Firefox | NVDA |
macOS | Safari、Google Chrome | VoiceOver |
注意:
スクリーン リーダーによって動作が異なる場合があります。
注意:
NVDA には、スクリーン リーダーの実行中に特定のキーダウン イベントがトリガーされないという既知の問題があります。 これを回避するには、NVDA 設定の [ブラウズモード] カテゴリーで [ページ読み込み時にブラウズモードを有効にする] をオフにします。
注意:
VoiceOver と Microsoft Edge の組み合わせなど、ここに記載されていないその他のスクリーン リーダーとブラウザーの組み合わせについては、完全にはカバーされていません。
テーマと色
アプリのテーマによって、アプリ内の色が決まります。 デフォルトの 6 つのテーマ (プライム、アストロ、オーシャン、ベルベット、アビス、メドウ) は、バンドごとに色のコントラストが最適化されています。 カスタム テーマ カラーを選択する場合は、コントラストと色のアクセシビリティー要件を満たしていることを確認します。
テーマ設定で、サーフェスと対話型エレメントの背景色を変更できます。 これらのエレメントの上に表示されるテキストの色も変更できます。 ページ、コンテナー、オーバーレイ、および対話型エレメントのデフォルト状態と選択状態の背景色とテキスト色の設定はリンクされています。 背景色を変更すると、その背景色と十分なコントラストがあるテキスト色が Experience Builder によって自動的に使用されます。 十分なコントラスト (最小 4.5:1) がない色にテキスト色を変更した場合、別のテキスト色を選択するよう求める警告が表示されます。
テーマ設定では、キーボード フォーカスがあるアプリのエレメントを示すフォーカス インジケーターの色を変更することもできます。 デフォルトでは、フォーカス インジケーターの色は、プライマリー テーマの色にリンクされています。 その色で、異なる色合いになります。 プライマリー テーマの色を変更すると、フォーカス インジケーターの色も変更されます。 フォーカス インジケーターの色を関連付けられているカラー パレットで変更すると、2 つの色のリンクは解除されますが、[リセット] をクリックすると再度リンクできます。
テキスト ウィジェットやチャート ウィジェットなど、多くのウィジェットの設定では、テーマ カラーとは異なるカスタム カラーを設定することができます。 タイムライン ウィジェットなどの一部のウィジェットでは、前景色と背景色を選択することができます。 アプリでカスタム カラーを使用する場合は、その色がアクセシビリティー基準を満たしていることを確認します。
ウィジェット
全画面ページでは、キーボードを使用して、[ウィジェットの挿入] パネルからキャンバスにウィジェットを追加することができます。 このためには、Tab キーを使用してキーボード フォーカスをウィジェットに切り替えて、Enter または Space を押します。 そのウィジェットがキャンバスの中央に表示されます。 ページ アウトライン内にあるウィジェットにキーボード フォーカスを切り替えてそのウィジェットを選択した場合、矢印キーを使用して、キャンバス上でウィジェットを移動することができます。
スクリーン リーダーによる読み上げが可能なカスタム ラベルをウィジェットに設定するには、[A11Y] ボタンをクリックし、[各ウィジェットのアクセシビリティー設定を有効化] をオンにします。 この設定をオンにすると、アプリ内のすべてのウィジェットでウィジェット設定の [コンテンツ] タブに [アクセシビリティー設定] セクションが表示されます。このセクションには次の設定が含まれています:
- [アクセシブル ラベル] - スクリーン リーダーで読み上げられるアクセス可能なラベルをウィジェットに設定します。
- [移動先で有効化] - ユーザーが実行時にキーボードのタブ順でこのウィジェットに直接ジャンプしてフォーカスできるようにする、タブ順ショートカットを追加します。 少なくとも 1 つのウィジェットでこの設定をオンにした場合、ウィジェットのタブ順の先頭にショートカット ボタンが表示されます。 Tab キーを押すと、この設定をオンにしたすべてのウィジェットでタブ順の先頭にショートカットが表示されます。 移動先ショートカットは、アウトラインの第 1 レベルにあるウィジェットでのみ追加できます。 マップやレイアウト コンテナー内にネストしているウィジェットはこの設定をサポートしていません。 ページ設定でヘッダーとフッターをオンにした場合、どちらにも移動先ショートカットが自動的に設定されます。
以下の表に一覧表示されているウィジェットはアクセシビリティーに対応しています。 特定の機能や配置スタイルについては、例外もあります。 ベスト プラクティスと例外が記載されています。
注意:
マップ ウィジェットと他のウィジェットに関連する一部の操作 (描画ウィジェットでのマップ上への描画など) は、キーボード ナビゲーションやスクリーン リーダーにはまだ対応していません。
| ウィジェット | アクセシビリティーの状況 | 備考 |
|---|---|---|
アコーディオン | サポート | |
データの追加 | サポート | |
ベースマップ ギャラリー | サポート | |
ブックマーク | サポート | |
ボタン | サポート | |
列 | サポート | パディングを追加して、列内のウィジェットにフォーカス リングを表示できます。 |
座標 | 制限付きサポート | マップから座標を取得する操作は、キーボードではサポートされていません。 |
日付フィルター | サポート | |
ルート案内 | 制限付きサポート | マップをクリックして、ストップ順を変更したりストップを追加したりする操作は、キーボードではサポートされていません。 |
区切り線 | サポート | |
描画 | 制限付きサポート | マップ上で描画する操作はサポートされていません。 |
埋め込み | サポート | |
フィーチャ情報 | サポート | |
フィーチャ レポート | サポート | |
フィルター | サポート | |
固定パネル | サポート | |
フロー行 | サポート | |
フライ コントローラー | 制限付きサポート | マップ ウィジェットとの対話機能はキーボードではサポートされていません。 |
画像 | サポート | 画像に代替テキストを手動で追加できます。 |
凡例 | サポート | 凡例ウィジェットでは、スクロール可能な場合にのみキーボード フォーカスを受け付けることができます。 |
リスト | サポート | Esc キーを使用してダイナミック リストを終了できます。 |
ログイン | サポート | |
マップ レイヤー | 制限付きサポート | 左矢印キーと右矢印キーを使用して、グループ レイヤーを展開したり折りたたんだりできます。 Space キーと Enter キーを使用して、[順序変更] ドロップダウン メニュー オプションでレイヤーの順序を変更できます。 アクションを実行した後、キーボード フォーカスが [オプション] ボタンに自動的に戻らない場合があります。 |
計測 | 制限付きサポート | マップ ウィジェットとの対話機能はキーボードではサポートされていません。 |
メニュー | サポート | |
プレースホルダー | サポート | |
印刷 | サポート | |
クエリー | サポート | |
行 | サポート | |
検索 | サポート | |
セクション | サポート | |
選択 | 制限付きサポート | マップ ウィジェットとの対話機能 (対話的な選択) はキーボードではサポートされていません。 |
共有 | サポート | |
サイドバー | サポート | |
調査 | サポート | [アクセシブル ラベル] 設定を使用して、スクリーン リーダーで読み上げられるタイトルを、ウィジェットに接続する調査アイテムに追加できます。 ただし、ウィジェットに読み込む調査の Survey123 バージョンが 3.12 より古い場合、iframe タイトルにラベルが想定どおりに表示されるためには、調査を読み込んだ後でアクセシブル ラベルを追加する必要があります。 |
スワイプ | 制限付きサポート | 高度なテンプレートは、キーボードではサポートされていません。 |
テーブル | サポート | Shift + スペース キーを使用して、テーブル内の行を選択できます。 |
テキスト | サポート | ウィジェットの設定の [テキスト形式] で見出しレベルを定義できます。 テキスト ウィジェットでは、スクロール可能であり、リンクなどの対話型要素が含まれている場合にのみ、キーボード フォーカスを受け付けることができます。 |
タイムライン | 制限付きサポート | スライダーの移動はキーボードではサポートされていません。 |
ビュー ナビゲーション | 制限付きサポート | 矢印キーを使用してビュー間を移動できます。 Enter キーを使用して現在のビューをアクティブにすることができます。 [スライダー]、[矢印 1]、[矢印 3] の各クイック スタイルはスクリーン リーダーでサポートされていません。 |
ウィジェット コントローラー | サポート | 矢印キーを使用して、ウィジェット パネルのサイズを変更できます。 |
注意:
デフォルトで、アイコンには空の代替テキストが含まれています。