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 testingREADME.md を見ていると、メッセージが日本語化されていることがわかりましたので、axe-cli 内の axe-core をビルドしてメッセージが日本語化されるか試してみました。

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


日本語化したい動機

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

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

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

  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.jsaxe.ja.min.js が生成されます。
    % ls -1 | grep ja
    axe.ja.js
    axe.ja.min.js
    

  • リネームしてコピー
    それぞれ、axe.jsaxe.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
    
    メッセージの肝になる部分が日本語化され、多少わかりやすくなりました。
    以上です。


  1. 翻訳することを諦めている、されることを諦めている気もします。 

コメント