いくつかのaxe DevToolsの機能では、ページ上の特定の要素を指し示すよう求められます。要素は、マウスでページ上の要素をクリックするか、キーボードと支援技術を使用して「エレメントセレクタ」で選択できます。どちらの方法も同じステップで交互に使用することができます。
要素を選択する場所
| 機能 | 選択する内容 |
|---|---|
| 部分ページスキャン | スキャンが限定される1つの要素 |
| 手動の問題報告 | 問題が提起される1つの要素と、任意の数の関連要素 |
| インテリジェントガイドテスト | 質問に応じて異なります。いくつかの質問は1つの要素(例えば、テーブルやモーダルのトリガー)を求め、他の質問は任意の数の要素(例えば、既にハイライトされていない見出しやタブストップ)を求めます。 |
ステップが1つの要素のみを受け入れる場合は、現在の選択を解除するまで他の要素を選択できません。
マウスでの選択
マウスでの選択は「マウス選択」スイッチによって制御され、現在「ON」か「OFF」かを示します。ほとんどのステップでは、マウス選択は自動的にオンになります。
マウス選択がオンになっている場合:
- ページにカーソルを置くと、ポインタの下の要素が囲み表示されます。
- 囲み表示された要素をクリックして選択します。要素はページ上でハイライト表示され続け、「エレメントセレクタ」がそれを表示するように展開されます。
マウス選択がオンの間は、クリックはaxe DevToolsによってキャプチャされるため、ページ上のリンクやボタンは作動しません。通常通りページと対話するには(例えば、モーダルを開いてから選択する場合)、まず「マウス選択」スイッチをオフにし、選択する準備ができたら再度オンにしてください。
インテリジェントガイドテストのいくつかのステップでは、モーダルを起動した後に選択する場合のように、まずページと対話できるようにマウス選択がオフになります。選択する準備ができたら、「マウス選択」スイッチをオンにしてください。
エレメントセレクタでの選択
エレメントセレクタは、マウスを使用せずに要素を選択するためのキーボード対応でスクリーンリーダーに優しい方法です。「エレメントセレクタ」の見出しの下、パネルの下部に表示され、ページのDOMを展開可能なツリーとして表示します。各項目には、タグ名とid、class、roleの属性(存在する場合)が表示されます。
ほとんどの機能では、エレメントセレクタは折りたたまれた状態から始まります。見出しの横にある「エレメントセレクタを見る」ボタンをアクティブにして展開します。
キーボードナビゲーション
| キー | アクション |
|---|---|
| 下矢印 | 次の表示されている要素に移動 |
| 上矢印 | 前の表示されている要素に移動 |
| 右矢印 | 折りたたまれている要素を展開、あるいは既に展開されている場合はその最初の子要素に移動 |
| 左矢印 | 展開されている要素を折りたたむか、既に折りたたまれている場合は親要素に移動 |
| スペース | フォーカスされた要素を選択、または既に選択されている場合は選択解除 |
ツリーを移動する際、フォーカスされた要素はページ上でハイライトされ、表示されるまでスクロールされるため、選択前に正しい要素か確認できます。
また、ツリーの下のボタンを使用することもできます:
- 「選択」はフォーカスされた要素を選択します
- 「削除」はフォーカスされた要素を選択から解除します
ツリー内の項目をクリックすると展開または折りたたまれますが、それを選択することはありません。マウスでツリーから要素を選択するには、項目をクリックしてから「選択」をクリックしてください。
スクリーンリーダー対応
ツリー内の項目にフォーカスが当たると、スクリーンリーダーは要素のアクセス可能な名前や計算された役割などの詳細を読み上げます。項目が選択の一部である場合、「選択されました」、axe DevToolsがハイライトしている場合には(例:「5のうちの2がハイライト」)「ハイライトされました」と読み上げます。
フォーカスされた要素のプロパティと属性の完全なリストを確認するには、「詳細情報」ボタンをアクティブにします。
ハイライトされた要素間のジャンプ
一部のステップでは、axe DevToolsがページ上の要素をハイライトしてレビューを求めます。例えば、インテリジェントガイドテスト中に見つかった見出しやタブストップ、手動問題報告でハイライトされた問題です。それぞれを探すためにツリーをナビゲートする代わりに、直接それらの間をジャンプすることができます。
ハイライトされた要素が2つ以上ある場合、エレメントセレクタ内の「前のハイライトへジャンプ」、「次のハイライトへジャンプ」ボタンを使用してください。ハイライトされた要素がフォーカスされている間、カウンター(例:「2 / 5」)が全ハイライト要素の中での位置を示します。
エレメントセレクタ内のどこかにフォーカスがあるとき、ツリー内の項目を含め、キーボードショートカットを使用することもできます:
| ショートカット | アクション |
|---|---|
| Alt+Shift+N(macOSではOption+Shift+N) | 次のハイライトされた要素に移動 |
| Alt+Shift+P(macOSではOption+Shift+P) | 前のハイライトされた要素に移動 |
ジャンプはラップアラウンドしますので、最後のハイライトされた要素を通り過ぎると最初に戻り、その逆も同様です。もしハイライトされた要素が一つしかなく、それから離れてしまった場合でも、どちらのショートカットでも戻ることができます。
選択の解除
選択された要素を削除するには、次の方法のいずれかを使用します。
- 要素セレクタで要素にフォーカスし、Spaceを押すか「削除」をアクティブにします
- 選択された要素のリストの要素の横にある削除(ゴミ箱)ボタンをアクティブにします
- Intelligent Guided Testsで「すべての選択を削除」をアクティブにして、現在のステップでのすべての選択をクリアします
手動で問題を報告する際、最初に選択した要素がその問題に対して「選択された要素」として挙げられ、その後に選択されたすべての要素が「関連する要素」としてリストされます。
