axe DevToolsを使えば、アクセシビリティの自動スキャンを迅速に簡単に実行できます。利用可能なアクセシビリティスキャンには2種類あります。
フルページスキャン
拡張機能の開始画面で「フルページスキャン」をクリックすると、ページ全体のaxe-core自動スキャンが実行されます。スキャンが完了すると、そのスキャンの結果を確認できます。
部分ページスキャン
拡張機能の開始画面で「部分ページスキャン」をクリックすると、特定のコンポーネントまたはページ領域を選択してスキャンを実行できます。これにより、選択した要素内のみで完全に分離されたスキャンが実行されます(選択したコンポーネントの外側のすべてのコンテンツは事実上無視されます)。要素を選択するには、マウスでページ上の任意の要素をポイントアンドクリックすることも、キーボードで要素選択を行うための支援技術フレンドリーな「要素セレクタ」を使用することもできます。要素の選択が完了したら、スキャンをクリックすると、そのスキャンの結果に移動します。
結果
結果の「概要」には、スキャン中に見つかったアクセシビリティの問題が表示されます。スキャンが実行されたURLが表示され、「再実行」コントロールもあります。その下には、部分ページスキャンの場合、選択した要素が表示され、ページ上で選択した要素やコンポーネントを「ハイライト」するコントロールがあります。次に、見つかった問題の数と、特定の問題タイプやカテゴリーを閲覧するための「フィルタ」として機能する内訳の数を含む問題の概要があります。
- 「自動の問題」:自動スキャン中に見つかった問題
- 「ガイド付きの問題」:インテリジェントガイドテスト中に見つかった問題
- 「要確認」:axe-coreが真の問題であるかの絶対的な確証が得られなかった潜在的な問題。これは、背景画像や複雑なグラデーション上のテキストの色のコントラスト計算でよく発生します。
- ベストプラクティス:WCAG成功基準に必ずしも適合していないが、ユーザーエクスペリエンスを向上させる産業標準の実践
- 影響(重大、深刻、普通、軽微):問題影響のカテゴリー
問題はその「ルール」に従ってグループ化されます。違反した各ルールについて、ルールの説明がある展開可能なボタンがあり、見つかった問題を詳しく調べることができます。
各問題には次のものがあります。
- 問題の説明
- 「ハイライト」(ページ上の要素をハイライトするトグル)
- 「問題を共有」(特定の問題を含むすべてのデータとスクリーンショットを載せた共有可能なページを生成)
- 指定されたルールの専用ヘルプページへのリンク(「詳細情報」)
- 「要素の場所」(アクセシビリティ問題がある要素の生成されたCSSセレクタ)
- 「要素を検査」(開発者ツールの要素パネルで要素を検査可能)
- 要素のソースコード
- 修正ガイダンス(問題の修正方法に関する情報)
結果の保存
「プロ」サブスクリプションを持つユーザーは、「テストを保存」ボタンを使用して結果を保存できます。クリックすると、テスト記録に名前を付けるよう求められます。その後、インテリジェントガイドテスト(IGT)が利用可能になり、テストを次のレベルに引き上げることができます!保存されたテスト記録は永続的な記録で、すべてのテストデータが保存されます。「保存されたテストを見る」メニュー項目を上部メニューバーでクリックすれば、保存されたテストをいつでも見つけることができます。
部分ページスキャンの結果を保存すると、選択したコンポーネント内でIGTを実行できるようになります。
