axe-runnerをさらに改良してv1.5.1として公開

公開

先週、「axe-runnerを大幅改良してnpmで公開」の記事を書きましたが、その後さらに改良を行いv1.5.1として公開しました。

テストの進捗表示

Consoleのドキュメントを読みカスタマイズを行ったことで、テストの進捗表示が行えるようになりました。大量のURLを処理している場合でもどこまで進んでいるのかを常時確認することができるようになりました。
「Accessibility Testing: URL No.1」のような形式でテストの進捗が表示されているターミナルのキャプチャ

axe-runner.config.jsonによる設定

axe-runner.config.jsonを使用してエミュレートするデバイスやaxeの設定を記述することができるようになりました。書式はGitHubのWiki「Config File Example」に記述しています。

例えば、翻訳ファイルを差し替えて日本語以外の言語でも結果を出力できるようになりました。
結果のCSVを韓国語で出力しExcelで表示した画面のキャプチャ

Chrome拡張のaxeだと「SCAN PART OF MY PAGE」はサインイン・サインアップが必要となっているのですが、contextの変更も可能で、include: [['.article-body']]と記述するとその部分だけテストできるようです。ヘッダー・フッターは支給されたコーディングを使用しており、本文部分だけテスト対象としたいようなケースで利用するようなイメージでしょうか。

optionsrunOnly: ['wcag2a', 'wcag21a']のように指定することで、実行時のルールを絞り込むことができます。先の['wcag2a', 'wcag21a']だとコントラストに関する指摘がなくなります。

axe-runner.config.jsonはカレントディレクトリ、もしくは-cオプションを使用して任意の場所を相対パスで指定します。

リファクタリング

これは使用する上では関係ないのですが、コードを大幅に見直しました。モジュール化することでrequireを使用してモジュールを読み込み直接関数を実行できるようになったので、イマイチ納得していなかった・引数を渡すのが手間だったspawnを利用するコードが排除できました。

Node.jsを変に意識しすぎず、普段書くWebサイト用のJavaScriptのように書く気持ちで取り組むと上手く改良できました。

最後に

2週間ほどの取り組みで、改良できることは全てやったかなと感じています。使用していく中で気付きがあればまた反映していきたいと考えています。