axe-coreを利用したアクセシビリティチェックのレポートCSVに達成基準などの情報を加えてみた

公開

昨日開催された「GAAD Japan 2022」のセッション「axe-coreで楽々アクセシビリティチェック」において、私が開発した「axe-runner」をご紹介頂きました。ありがとうございます。

2019年にプログラムを開発したもののテンプレート実装やCMSのプラグイン開発の業務が多くなかなか活かすことができていないのですが、中野さんのセッションを拝聴しaxe-coreをどのようにJIS X 8341-3:2016の試験に役立てていくのか大変参考になりました。

さて、axe-coreでチェックできる内容と達成基準の関係は「Rule Descriptions」やヘルプページ(例:「テキスト要素は背景に対して十分な色のコントラストがなければなりません」)に記述があるのですが、axe-runnerを用いてaxe-coreを実行し得られたレポートCSVにどの達成基準と関係があるかを示すことができないだろうか?と思いました。私のように達成基準とルールIDのマップをまだ持っていない人も多いだろうと思ったからです。

axe-coreを実行した際に出力される結果オブジェクトを確認すると「タグ」も格納されていることに気付きました。タグについて調べると「Axe Javascript Accessibility API」にWCAG success criterion e.g. wcag111 maps to SC 1.1.1と解説があり、達成基準のデータも含まれていました。情報があるのならばひとまずCSV中に出るようにしようと考えaxe-reportsを追加カスタマイズした結果、cat.color,wcag2aa,wcag143のようにタグを出力できました。
画面のキャプチャ:axe-runnerを用いてアクセシビリティチェックを実施し、得られたレポートCSVにタグが表示されている様子

この変更は最新のaxe-runner(v1.5.9)をインストールして頂くことでご利用頂けます。余談になりますが、ヘルプページが日本語で表示されるようにパラメータの追加も行いました。

※「Success Criterion」は「達成基準」で良かったよな、と不安になったのですが「WCAG 2.2のドラフトが更新されました | アクセシビリティBlog | ミツエーリンクス」を読み安心しました。