axe-runnerを大幅改良してnpmで公開

公開

Twitterを見ていて、2019年に開発した「axe-runner」のことを思い出しました。（詳細は記事「Puppeteerとaxe-coreで複数ページのアクセシビリティ検証を実現する」を参照してください。）最近何か作りたい欲が高まっていてaxe-runnerも改良してみたくなり、先週末から手を入れ始めました。結果、色々至らなかった点を大幅改良すること、またnpmでの公開を達成することができました。

axe-runnerとは

Deque Systems社が開発しているアクセシビリティのテストエンジン「axe」を利用し、複数ページのアクセシビリティチェックを行い結果をCSVに記録するものです。コマンドラインで実行します。
開発したaxe-runnerを実行して得られたCSVのキャプチャ

改良点

これまではGitHubからソースコードをダウンロードしnode axe-runner（npm start）を実行する方法でしたが、コマンドラインスクリプトを用意したことでnpm i axe-runnerでインストールしnpx axe-runner [filename of url list]でテストを実行することができるようになりました。

また、JavaScriptのコーディングがイマイチで、多数のURLを渡した際に多数のリクエストを同時に発行してしまう問題、またstdoutバッファが溢れる可能性がありましたが（バッファの問題は2021年2月9日〜2月12日）、コーディングの改善とspawnの利用により解決しました。200のURLを渡すと20分弱時間を要しますが、テストが正常に完了することを確認しています。

その他、以下の機能追加・仕様変更を行いました。

  • Basic認証に対応
  • エミュレートするデバイスを変更可能にする機能を追加
  • 1行1URLでURLを列挙したテキストファイルへの対応
  • 結果CSVの文字コードをShift_JISからUTF-8に変更（nkfコマンドへの依存をなくしました）
  • HTTP 401, 404のURLを表示する機能を追加

これにより、制作会社でテストアップした環境に対してテストを行うなど、実用に耐えうるものになったと考えます。

使用方法

README.mdを更新していきますので、npmやGitHubを参照してください。

最後に

せっかく作ったツールですので、僕自身も積極的に活用してWebサイトのアクセシビリティを高めていけたら、と考えました。また、axeの動向にも注目できたらと思います。結果CSV内のメッセージに以下のように英語が混ざることがあり少し気になっています。

aria-label属性が存在しない、または空です--aria-labelledby属性が存在しない、存在しない要素を参照している、または空の要素を参照しています--要素にtitle属性が存在していない、またはtitle属性が空です--Element's default semantics were not overridden with role="none" or role="presentation"

※2021年2月16日追記： 結果メッセージの一部が英語になるのは日本語未訳であること、@kazuhitoさんよりご連絡いただきました。調査いただきましてありがとうございます。

この先考えていること