Axe DevTools JSON結果からのレポート生成

This page is not available in the language you requested. You have been redirected to the English version of the page.
Link to this page copied to clipboard

レポート生成に@axe-devtools/reporterパッケージを使用する

Not for use with personal data

Axe DevToolsレポーターを使用して、Playwrightと共にスキャンしたページのアクセシビリティレポートを作成します

レポートの生成は、スキャンの実行と同じくらい簡単です。Axe DevToolsレポーターを使用することで、即座に閲覧可能なHTMLレポート、CIテスト環境で閲覧するためのJUnit XMLレポート、他の複数のツールにインポートするためのCSVレポートを生成できます。このガイドでは、Axe DevToolsレポーターのインストール、設定、使用方法について説明します。

前提条件

Axe DevToolsレポーターを使用するには、Node.jsプロジェクトにAxe DevToolsおよびレポーターを統合する必要があります。このガイドではレポーターのセットアップのみを説明していますので、Axe DevToolsを使用してスキャンを実行していない場合は、このガイドを読んでスキャンの実行方法を確認してください。

レポーターのインストール

既にAxe DevTools npmパッケージをダウンロードするように~/.npmrcファイルを設定している場合、コマンドを実行するだけです:

npm install @axe-devtools/reporter

まだインストール認証を設定していない場合は、基本的なインストールガイドをお読みください。

note

バージョン 4.15.0 以降、レポーターには jsdom が含まれなくなりました。HTML レポートを生成する場合は、HTML レポートのプリレンダリング を読んで、それをインストールする必要があるのか、あるいはブラウザを提供する必要があるのか確認してください。

プロジェクトへのレポーターの追加

プロジェクトに合った構文でレポーターをインポートします:

CommonJSモジュールのJavaScript

const { Reporter } = require('@axe-devtools/reporter');

ESモジュールのJavaScript

import { Reporter } from '@axe-devtools/reporter';

TypeScript

TypeScriptはESモジュールと同じimport構文を使用します。@axe-devtools/reporterは独自の型宣言を提供しており、別途@types/パッケージをインストールする必要はありません:

import { Reporter } from '@axe-devtools/reporter';

レポーターを使用するには、Axe DevToolsライブラリとwebdriverもインポートする必要があります。

レポーターオプション

Axe DevToolsレポーターを使用する際には、3つの主要な選択肢があります

  1. レポートの名前をどうするか
  2. レポートをどこに保存するか
  3. レポートをどの形式で生成するか

レポートの名前は自由に設定できます。レポーターを初期化する際には、すべての生成されたレポートで共有されるスイート名を指定します。各レポートには、スキャンごとに割り当てられる名前も含まれます。レポートを保存する場所、つまりディレクトリは、ユーザーの裁量で決めることができます。このディレクトリ位置もインスタンスレベルで設定されるため、1つのレポーターインスタンスで生成されたすべてのレポートはディレクトリを共有します。オプションのレポート形式には、即座にユーザーが閲覧できるHTML、CI環境での使用推奨のJUnit XML、スキャン結果を他のツールにインポートするCSV、マシンが読み取り可能なアクセシビリティレポートを出力するW3C EARL JSON-LDドキュメントであるEARL（Evaluation and Report Language）があります。

レポーターの使用

レポーターをプロジェクトにインポートしたら、初期化できます。コンストラクターは、レポートのスイート名とレポートの保存先ディレクトリの2つの引数を取ります。初期化文は次のようになります:

const reporter = new Reporter('<suite-name>', '<dir-name>');

Axe DevToolsのスキャンが実行された後、レポーターを実行するには2つのステップがあります。まず、レポーターがアクセスできるように結果をログに記録する必要があります。その後、レポーターがこれらの結果をレポートに処理します。

reporter.logTestResult('<scan-name>', <results-object>);
reporter.buildHTML('<scan-dir>');

HTML レポートのプリレンダリング

HTML レポートは自己完結型で、ブラウザで開くと自分自身をレンダリングします。これを書き込む前に、レポーターは静的マークアップにプリレンダリングを試み、レポートの内容がファイル自体に含まれており、ファイルが開かれた際にすぐに表示されるようにします。

プリレンダリングにはブラウザまたは jsdom が必要です。バージョン 4.15.0 以降、jsdom はオプションのピア依存関係となり、レポーターと共にインストールされなくなったため、環境に適した方を選択してください。

  • ブラウザを提供します。 Pass browserPath in the renderOptions argument to buildHTML, or set the AXE_DEVTOOLS_REPORTER_BROWSER_PATH environment variable, pointing at a Chromium-based executable. No browser driver or automation library is needed.

  • jsdom を自分でインストールします。 これにより、以前のバージョンの動作が維持されます。

    npm install jsdom

  • マシンにすでにインストールされているブラウザを利用します。 ブラウザを提供せず、jsdom をインストールしない場合、レポーターはこのマシンの標準インストール場所とPATHにある Chromium ベースのブラウザを探します。

buildHTML を呼び出すたびに、レポーターは以下の順序でそれらのいずれかを選択します。

  1. そのパスが存在する場合、browserPath または AXE_DEVTOOLS_REPORTER_BROWSER_PATH によって指定されたブラウザ。
  2. jsdom がインストールされている場合。
  3. autoDetectBrowser が false に設定されていない限り、このマシンに見つかった Chromium ベースのブラウザ。
  4. 上記のどれにも当てはまらない場合、プリレンダリングはスキップされます。レポートは依然として書き込まれ、ブラウザで開くとレンダリングされます。
note

ステップ 3 では、各レポートに対してブラウザ プロセスを開始します。大規模なバッチ実行や、レポーターが自動で見つけたブラウザを実行することが望ましくないビルドマシンでは、autoDetectBrowser を false に設定する（または AXE_DEVTOOLS_REPORTER_BROWSER_AUTO_DETECT を偽の値に設定する）か、browserPath を提供するか、jsdom をインストールします。

ブラウザを使用する場合、サンドボックスが有効であり、ネットワーク アクセスはありません。レポートにはスキャンしたページから取得したコンテンツが含まれているため、安全で制約のある環境でない限り、サンドボックスを無効にしないでください。全オプションのリストは RenderOptions を参照してください。

サンプルファイル

このサンプルファイルはテストを書くの例と同じベースを使用していますが、レポーターも統合されています。同じファイルがJavaScriptとTypeScriptで示されています。

JavaScript

const rimraf = require('rimraf');
const { AxeDevToolsBuilder } = require('@axe-devtools/playwright');
const playwright = require('playwright');
const { Reporter } = require('@axe-devtools/reporter');

(async () => {
  rimraf.sync('./a11y_results/*');

  const browser = await playwright.chromium.launch();
  const context = await browser.newContext();
  const page = await context.newPage();

  const reporter = new Reporter('playwright', './a11y_results');

  await page.goto('https://dequeuniversity.com/demo/mars/');

  const results = await new AxeDevToolsBuilder({ page }).analyze();

  reporter.logTestResult('tested-page', results);
  reporter.buildHTML('./a11y_results');
  await browser.close();
})();

TypeScript

import rimraf from 'rimraf';
import { AxeDevToolsBuilder } from '@axe-devtools/playwright';
import * as playwright from 'playwright';
import { Reporter } from '@axe-devtools/reporter';
import type { AxeResults } from 'axe-core';

(async () => {
  rimraf.sync('./a11y_results/*');

  const browser = await playwright.chromium.launch();
  const context = await browser.newContext();
  const page = await context.newPage();

  const reporter = new Reporter('playwright', './a11y_results');

  await page.goto('https://dequeuniversity.com/demo/mars/');

  const results: AxeResults = await new AxeDevToolsBuilder({ page }).analyze();

  reporter.logTestResult('tested-page', results);
  reporter.buildHTML('./a11y_results');
  await browser.close();
})();

サンプル出力

以下の例では、単一の失敗したチェックに対する機械可読レポートの内容を示しています。スイート名やテスト名のような値は、レポーターに渡す引数から取得され、残りのフィールドはaxe-coreの結果から取得されます。HTMLレポートはソースとして読むのではなく、ブラウザで開くことを目的としているためここでは示されていません。

CSV

buildCSVは、各結果ごとに1行を、各列を説明するヘッダー行を前にして書き込みます。Remediationのようにコンマや改行を含むフィールドは引用符で囲まれます。

Page URL,Page Title,Outcome,Impact,Code Snippet,Selector,Remediation,Manual,Rule ID,Help,Description,Help URL,Standard,WCAG 2 Success Criteria,Section 508 Paragraph,Tags,Date,axe-core,Needs Review,IGT,Found By,Test Title,Share URL
https://dequeuniversity.com/demo/mars/,My Test Suite,Failed,Serious,<h3>Be Bold...</h3>,"a[href=""mars2.html?a=be_bold""] > h3","Fix any of the following:
  Element has insufficient color contrast of 4.31 (foreground color: #ff9999, background color: #344b6e, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1",false,color-contrast,Elements must meet minimum color contrast ratio thresholds,Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds,https://dequeuniversity.com/rules/axe/4.12/color-contrast,WCAG 2.0 Level AA,1.4.3 Contrast (Minimum),,"cat.color, wcag2aa, wcag143, TTv5, TT13.c, EN-301-549, EN-9.1.4.3, ACT, RGAAv4, RGAA-3.2.1",2026-07-10T18:11:41.859Z,4.12.1,No,,,My Test Suite,

JUnit XML

buildJUnitXMLは、ルールごとにtestcaseに結果をグループ化し、パスしなかったルールごとにfailure要素を含みます。複数の要素でルールが失敗した場合、同じfailure内にオカレンスが--------区切りでリストされます。

<?xml version="1.0" encoding="utf-8"?>
<testsuites>
<testsuite name="My Test Suite" package="axe-result" timestamp="2026-07-10T11:11:42-0700">
<properties>
<property name="platform.userAgent" value="" />
<property name="platform.testMachine" value="" />
<property name="testSubject.fileName" value="https://dequeuniversity.com/demo/mars/" />
<property name="testSubject.lineNum" value="-1" />
</properties>
<testcase name="color-contrast">
<failure message="Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
https://dequeuniversity.com/rules/axe/4.12/color-contrast" impact="serious">
<![CDATA[https://dequeuniversity.com/demo/mars/]]>
CSS Path: <![CDATA[a[href="mars2.html?a=be_bold"] > h3]]>
HTML: <![CDATA[<h3>Be Bold...</h3>]]>
</failure>
</testcase>
</testsuite>
</testsuites>

EARL

buildEARLは、機械可読なアクセシビリティレポートのためにW3C EARL（評価および報告言語）JSON-LDドキュメントを生成します。@contextは使用される語彙を宣言し、@graphは結果ごとに1つのアサーションを保持しています。

{
  "@context": {
    "@vocab": "http://www.w3.org/ns/earl#",
    "earl": "http://www.w3.org/ns/earl#",
    "WCAG2": "http://www.w3.org/TR/WCAG21/#",
    "dct": "http://purl.org/dc/terms/",
    "sch": "https://schema.org/",
    "source": "dct:source",
    "title": "dct:title",
    "assertedBy": { "@type": "@id" },
    "outcome": { "@type": "@id" },
    "mode": { "@type": "@id" },
    "isPartOf": { "@id": "http://purl.org/dc/terms/isPartOf", "@type": "@id" }
  },
  "@graph": [
    {
      "@type": "Assertion",
      "mode": "earl:automatic",
      "subject": {
        "@type": ["earl:TestSubject", "sch:WebPage"],
        "source": "https://dequeuniversity.com/demo/mars/"
      },
      "assertedBy": "https://github.com/dequelabs/axe-core/releases/tag/v4.12.1",
      "result": {
        "@type": "TestResult",
        "outcome": "earl:failed"
      },
      "test": {
        "@type": "TestCase",
        "title": "color-contrast",
        "@id": "https://dequeuniversity.com/rules/axe/4.12/color-contrast",
        "isPartOf": ["WCAG2:contrast-minimum"]
      }
    }
  ]
}

トラブルシューティング

メッセージが静的 HTML のプリレンダリングがスキップされたと表示される場合

実行が axe-devtools-reporter: skipping static HTML pre-rendering で始まるメッセージを出力する場合、レポーターはブラウザもインストール済みの jsdom も見つけられませんでした。レポートは依然として作成され、ブラウザで開けばレンダリングされるため、これはエラーではなく警告です。レポートを再度プリレンダリングするには、ブラウザを提供するか、HTML レポートのプリレンダリング で説明されているように jsdom をインストールしてください。メッセージは 1 回の実行につき 1 回出力され、レポートごとではありません。

内容が書き込まれていない HTML レポート

プリレンダリングされたときに空で開かれるレポートは通常、ブラウザが作成するのに十分な時間が与えられなかったことを意味します。buildHTML に対する renderOptions 引数の virtualTimeBudgetMs を上げてください。原因としてよくあるのは、大きなレポートです。

大きなレポートがバッファオーバーフローで失敗する場合

buildHTML に対する renderOptions 引数の maxBufferBytes を上げてください。これは、レポーターがブラウザから受け取るレンダリングされた出力の制限を設定し、デフォルトは 64 MB です。

さらなるサポートを得るには

スキャン結果の取得に問題がある場合は、お持ちのDeque代表者に直接連絡するか、サポートデスクやメールをお送りくださいを通じてご連絡ください。喜んでお手伝いします。

関連リンク

Is this page helpful?

Help us improve this page

Still need help?