axe-DevTools Node APIでのロギング

Axe DevToolsスキャンの結果を活用する方法はほぼ無限です。

すべてのaxe-core駆動のアクセシビリティスキャンは、その結果をJSONオブジェクトとして返すように設定できます。この形式により、ウェブアクセシビリティ初心者でも簡単に活用でき、経験豊富な専門家に必要な情報の深さを含んでおり、標準のアサーションに基づくテスト形式以外でも、自動レポート生成やカスタムテストを行うことができます。

Axe DevTools Logger

提供された形式でのレポート生成を望まないが、結果をファイルに保存したい場合、Dequeはこれを処理するためのコンポーネントであるAxe DevTools Loggerを提供しています。このモジュールを使用すると、テストを実行しながら結果をファイルに書き込むことができます。

インストールには、他のAxe DevTools nodeJSベースのコンポーネントと同様の認証情報の設定が必要です。元のAxe DevToolsインストール方法については、インストールガイドを参照してください。

ロガーをインストールするには、npmではnpm install @axe-devtools/logger、yarnではyarn add @axe-devtools/loggerコマンドを実行します。

Axe DevTools Loggerの使用

ロガーは以下のようにインポートされます：

const { AxeDevToolsLogger } = require('@axe-devtools/logger');

さらに、ES6モジュールを使用してパッケージをインポートすることもできます：

import { AxeDevToolsLogger } from '@axe-devtools/logger';

インポート後、次のようにインスタンス化できます。

const logger = new AxeDevToolsLogger('Report Name', '/path/to/a/directory');

スキャンを実行して結果オブジェクトを生成した後、このコマンドで結果をファイルにログできます。

logger.logTestResult('\<test-name>', results-object);

ロガーをインスタンス化する際に指定されたディレクトリに、Test-Reports-<test-name>.jsonというファイル名でログファイルが表示されます。

結果の概要

以下のセクションでは、結果JSONファイルに含まれるオブジェクトについて説明します。

メタ情報

結果オブジェクトは、いくつかの有用なメタ情報で始まります。これにはテスト名、テストされたページのウェブアドレス、テストが実行された日時、使用されたaxe-coreルールセットなどが含まれます。

調査結果

結果の始まりは「調査結果」の見出しで区切られています。結果には、それぞれ独自の配列を持つ4つのタイプがあります。これらの結果タイプは、適用不可、不完全、合格、違反です。さらに、違反配列の直前には、いくつかのテスト固有のデータが配置されています。

適用不可

「適用不可」とは、フォームのないページに対するフォーム関連のテストのように、その特定のテストに関連するページコンテンツが存在しないことを意味します。

不完全

不完全なテストは実行されたが、結果をどのカテゴリに最終的に分類すべきかを判断するためにさらなるレビューが必要なテストです。一般的な不完全な状況としては、変化する背景色を持つ要素のカラコントラストチェックで、十分なコントラストが達成されているかが明確でない場合があります。このカテゴリの問題は、自動的に違反として扱うべきではありません。それが違反であるかどうかは分からないからです。アクセシビリティ知識のあるユーザーは、これらの結果をさらに詳細に検査することで、既存の自動テストでは検出できない追加の違反を見つけることができます。

合格

この結果のグループには、チェックされたルールが関連するアクセシビリティ違反を見つけなかったことが列挙されています。各合格したルールに関連付けられたページ要素の配列があり、ルールに対してチェックされて合格しています。

違反

違反配列にはスキャンで見つかったすべてのアクセシビリティ違反が含まれています。Dequeのゼロ偽陽性ポリシーのおかげで、ここに示された結果は真のものであることが保証されています。各違反には、違反内容、ページ上の場所、修正方法の提案などの詳細情報が含まれています。詳しくは以下のフィールドリファレンスを参照してください。

フィールドリファレンス - 合格と違反

合格と違反オブジェクトに含まれるフィールドは以下の通りです：

• description — ルールが何を行うかを説明するテキスト文字列
• help — 実行されたテストを説明するヘルプテキスト
• helpUrl — 違反の詳細に関するさらなる情報を提供するURL。Deque Universityサイトのページへのリンクです。
• id — ルールの一意の識別子。ルール一覧を参照。
• impact — 違反の深刻度。テストが失敗した場合はminor、moderate、serious、criticalのいずれかであり、チェックが合格した場合はnullです。
• tags — このルールに割り当てられたタグの配列。これらのタグはオプション構造で使用され、実行するルールを選択できます（attest.a11yCheckパラメータを参照）。
• nodes — ルールがテストしたすべての要素の配列
  • html — 要素のHTMLスニペット
  • impact — この特定のチェックの深刻度。minor、moderate、serious、criticalのいずれか。ルールに含まれる各チェックは異なる影響度を持つことができます。失敗したすべてのチェックの中で最も高い影響度がルールの報告に反映されます。
  • target — 各要素がiframeまたはフレームのレベルに対応するセレクタの配列。iframeまたはフレームが1つある場合、ターゲットには2つのエントリがあるべきです。iframeレベルが3つの場合、ターゲットには4つのエントリがあるべきです。
  • any — いくつかのうち少なくとも1つが合格しなければならなかったチェックの配列。配列の各エントリには以下が含まれます：
  • id — このチェックの一意の識別子。チェックのIDはルールのIDと同じ場合があります。
  • impact — この特定のチェックの深刻度。minor、moderate、serious、criticalのいずれか。ルールの一部である各チェックは異なる影響度を持つことができます。失敗したすべてのチェックの中で最も高い影響度がルールの報告に反映されます。
  • message — このチェックが合格または失敗した理由の説明
  • data — チェックの種類に固有の追加情報。任意の項目です。例えば、カラコントラストチェックには前景色、背景色、コントラスト比などが含まれます。
  • relatedNodes — このチェックに関連する他のノードに関する情報の任意の配列。例えば、重複IDチェックの違反には、同じ重複IDを持つ他のセレクタがリストされます。配列の各エントリには以下の情報が含まれます：
    • target — 関連ノードのセレクタの配列
    • html — 関連ノードのHTMLソース
  • all — すべてが合格しなければならないチェックの配列。配列の各エントリには any 配列と同じ情報が含まれています
  • none — すべてが不合格でなければならないチェックの配列。配列の各エントリには any 配列と同じ情報が含まれています

さらに、JSON結果オブジェクトは独自のカスタムテストを簡単に作成できます。標準のアクセシビリティ違反アサーションに加えて、結果オブジェクトを違反、重大度、影響、関連するルールセット、または結果オブジェクト内の任意のパラメータで切り分けることができます。したがって、結果オブジェクトに配置されたデータはどれでもテストすることができます。

次のステップ

Dequeのレポーターを使用すると、スキャン結果を簡単に共有し、消化することができます。HTML、JUnit XML、またはCSVレポートを生成するように設定でき、設定が完了するとレポートは自動的に返されます。設定方法とレポーターの使用方法については、レポーターガイドを参照してください。

また、結果をAxe デベロッパーハブにアップロードすることもできます。CLIを使用してアクセシビリティ結果をAxe デベロッパーハブに送信するを参照してください。