aXe を
この
dequelabs/axe-core: Accessibility engine for automated Web UI testing のREADME.md
をaxe-cli
内の
結果を
日本語化したい 動機
日本語化が
フロントエンド フレームワークもですが、
Lint ツール の 動向が 激しすぎる。 動向が
激しすぎて、 ドキュメントの 日本語翻訳が 追いついていない。 1 私のような
英語が よく 分からない 人は、 理解するのに 苦労する。 日本語化されない
ツールは、 見向きもしない 人も 一定数いる。
業務上、
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
肝になる 部分が 日本語化され、 多少わかりやすくなりました。
以上です。
翻訳する
ことを 諦めている、 される ことを 諦めている 気もします。 ↩
コメント