axe-core 3.2で検証結果を日本語化する方法

先日、畠山が案内したとおり、axe-core 3.2がリリースされました。

axe-core 3.2の全体的な変更点は畠山の記事を確認いただくとして、この記事では別の変更点を紹介します。それはaxe-coreの検証結果を日本語化する方法です。

axe-coreはこれまでも検証結果を日本語化することはできましたが、npmで公開されているパッケージをそのまま使えないなど、複雑な手順を踏む必要がありました。しかし、3.2からは次のように比較的簡単に日本語化することができます。

const axe = require('axe-core');
const AXE_LOCALE_JA = require('axe-core/locales/ja.json');

axe.configure({
    locale: AXE_LOCALE_JA
});

axe.run().then((results) => {
   if (results.violations) {
       console.error('問題が発見されました。');
       // ...
   }
});

日本語化するには、axe.configureの引数オブジェクトのlocaleに、翻訳用のデータが入ったオブジェクトを指定します（APIの解説（英語））。翻訳用のデータはaxe-coreパッケージ内に入っており、GitHubでも一覧を確認できます。記事執筆時点でドイツ語（de.json）、フランス語（fr.json）、日本語（ja.json）、オランダ語（nl.json）が利用できます。

Puppeteerと組み合わせると次のようになります。

const puppeteer = require('puppeteer');
const AXE_SOURCE = require('axe-core').source;
const AXE_LOCALE_JA = require('axe-core/locales/ja.json');

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();

    // CSPの設定によってはaxeを注入できないためバイパス
    await page.setBypassCSP(true);

    // ページ読み込み
    await page.goto('https://example.com/');

    // axeを注入
    await page.evaluate(`eval(${JSON.stringify(AXE_SOURCE)});`);

    // axeを日本語化して実行
    const results = await page.evaluate((config, context, options) => {
        /* eslint-env browser */
        const {axe} = window;

        axe.configure(config);

        return axe.run(context || document, options || {});
    }, {locale: AXE_LOCALE_JA});

    await browser.close();

    // 結果を確認
    if (results.violations) {
        console.error('問題が発見されました。');
        // ...
    }
})();

社内では、類似のコードを使って目視検証と同時にaxe-coreによる検証も行っていますが、日本語化したことで検証結果をシェアしやすくなったと感じています。皆さんもぜひaxe-coreを日本語で使ってみてください。