axe-reportsをカスタマイズして一括検証結果CSV内の英語を日本語化する

公開

axe-coreの検証結果を日本語化するのは「axe-core 3.2で検証結果を日本語化する方法 | アクセシビリティBlog | ミツエーリンクス」にある通りで、僕が作成した複数ページの自動アクセシビリティ検証ツール「axe-runner」でも利用させていただいています。

以前から改良しようかと考えていたのは、axe-runnerで出力した検証結果CSVのヘッダーやユーザーへの影響度などが英語のままであることです。CSVのヘッダー行はaxe-reportsのコードに書かれているためです。これを日本語化すればより分かりやすくなるのだろうか?と考え、axe-reportsをカスタマイズしました。元々axe-runnerで検証の進捗状況を示すためにaxe-reportsをカスタマイズし@hideki_a/axe-reportsとして公開していましたので、これにさらに手を加えました。

結果、以下のような検証結果CSVが得られるようになりました。
一括検証結果のCSVのヘッダーやユーザーへの影響度が日本語で出力されている画面のキャプチャ

ユーザーへの影響度は解決のヒントとして提示されるURL…Dequeu Uiversityのサイトの訳を参考に日本語のみ表示してみたのですが、英語も併記した方がなんとなく影響度の度合いがより分かりやすいような印象を持ちました。

既にaxe-runnerをご利用いただいている場合は、npm update axe-runnerを実行していただくと最新版のaxe-runnerとaxe-reportsに更新されます。

@hideki_a/axe-reportsはどなたでもご利用頂けると思いますが(axe-runner以外で検証はしていません)、あいにくまだReadmeを書いていません。AxeReports.createCsvReportHeaderRowAxeReports.createCsvReportRowを呼ぶときにロケールファイル内のlangデータを渡す、つまりconfig.locale.langのような感じで引数に追加すると日本語になるはずです。