aXe axe-cli を日本語化する

aXe を CLI で 実行するための、dequelabs/axe-cli: A command-line interface for the aXe accessibility testing engine があります。
このツールを実行すると、警告メッセージが英語で出力されます。

dequelabs/axe-core: Accessibility engine for automated Web UI testing の README.md を見ていると、メッセージが日本語化されていることがわかりましたので、axe-cli 内の axe-core をビルドしてメッセージが日本語化されるか試してみました。

結果を以下に記載します。

日本語化したい動機

日本語化が必要な理由を以下に記載します。

1. フロントエンド フレームワークもですが、 Lint ツール の動向が激しすぎる。

2. 動向が激しすぎて、ドキュメントの日本語翻訳が追いついていない。¹

3. 私のような英語がよく分からない人は、理解するのに苦労する。

4. 日本語化されないツールは、見向きもしない人も一定数いる。

業務上、展開して使用してもらうには抵抗を持つ人もいるかと思いますので、敷居を下げるためには必要なことだと考えます。

axe-cli の インストールから、axe-core の日本語化まで実施する

axe-cli の インストール

グローバルインストールします。

npm install axe-cli -g

axe-core の日本語化

axe-cli をインストールすると、axe-cli ディレクトリ下に、axe-core もインストールされます。
この axe-core を再ビルドして日本語化します。

• インストールしていないのであれば、grunt をインストール
  私はインストールしていなかったので、実施しました。
  grunt をあまりよく知らないので、グローバルインストールしていますが、グローバルでなくてもいいかもしれません。
  

  % npm install -g grunt
  /usr/local/bin/grunt -> /usr/local/lib/node_modules/grunt/bin/grunt
  + grunt@1.0.1
  added 92 packages in 12.283s
  

• ディレクトリ移動
  

  cd /usr/local/lib/node_modules/axe-cli/node_modules/axe-core
  

• 依存モジュールを解決
  いきなり、build したところ依存モジュールがなくてエラーになったので、依存モジュールを解決します。
  

  npm install
  

• 日本語を指定して build
  

  grunt build --lang=ja
  

  上記実施すると、axe.ja.js、axe.ja.min.js が生成されます。
  

  % ls -1 | grep ja
  axe.ja.js
  axe.ja.min.js
  

• リネームしてコピー
  それぞれ、axe.js、axe.min.js にリネームします。
  

  % cp axe.ja.js axe.js
  % cp axe.ja.min.js axe.min.js
  

これで、日本語化の作業は完了です。

日本語化した axe-cli を実行する

axe-cli のコマンドを実行します。

• Command

  % axe https://www.monotalk.xyz
  

• Output
  

  Running axe-core 2.5.0 in phantomjs
  
  Testing https://www.monotalk.xyz ... please wait, this may take a minute.
  
    Violation of "color-contrast" with 3 occurrences!
      前景色と背景色のコントラストがWCAG 2のAAコントラスト比のしきい値を満たすことを確認してください. Correct invalid elements at:
       - .navbar-header.page-scroll > a.navbar-brand
       - #blog > div > ul > li:nth-child(2) > a
       - div > p.copyright.text-muted
      For details, see: https://dequeuniversity.com/rules/axe/2.5/color-contrast
  
    Violation of "frame-title" with 7 occurrences!
      <iframe>及び<frame>要素に空のタイトル属性が存在しないことを確認してください. Correct invalid elements at:
       - #aswift_0
       - #aswift_1
       - #aswift_0,#google_ads_frame1
       - #aswift_0,#google_ads_frame1,#ad_iframe
       - #aswift_0,#google_ads_frame1,#ad_iframe,#google_image_div > iframe
       - #aswift_0,#google_ads_frame1,#ad_iframe,body > iframe
       - #aswift_1,#google_ads_frame2
      For details, see: https://dequeuniversity.com/rules/axe/2.5/frame-title
  
    Violation of "html-has-lang" with 5 occurrences!
      全てのHTMLドキュメントにlang属性が存在することを確認してください. Correct invalid elements at:
       - #aswift_0,html
       - #aswift_0,#google_ads_frame1,html
       - #aswift_0,#google_ads_frame1,#ad_iframe,html
       - #aswift_1,html
       - #aswift_1,#google_ads_frame2,html
      For details, see: https://dequeuniversity.com/rules/axe/2.5/html-has-lang
  
    Violation of "link-name" with 1 occurrences!
      リンクに認識可能なテキストが存在することを確認してください. Correct invalid elements at:
       - #aswift_0,#google_ads_frame1,#ad_iframe,#aw0
      For details, see: https://dequeuniversity.com/rules/axe/2.5/link-name
  
  16 Accessibility issues detected.
  
  Please note that only 20% to 50% of all accessibility issues can automatically be detected. 
  Manual testing is always required. For more information see:
  https://dequeuniversity.com/curriculum/courses/archive/1.0/testing
  

  メッセージの肝になる部分が日本語化され、多少わかりやすくなりました。
  以上です。