pa11y っていうオープンソースのアクセシビリティチェックツールがあります。
これのコマンドラインツールはコマンドラインから簡単にアクセシビリティレポート （もちろん機械的なチェックなのであくまで参考レポートなんですが） を簡単に出力できるってことで、ちょっと仕事の関係で使ってみようと思いましてちょっと前に色々と試していました。
で、結構使えそうだということで本格的に使い始めたんですが、そうなるとやっぱりレポートは日本語で出力されないとってことになります。pa11y はアクセシビリティチェックやレポート出力に HTMLCodeSniffer っていう Squiz 社 （Squiz Pty Ltd） が開発しているアクセシビリティチェック用の JavaScript を使用しているため、これを翻訳した、HTMLCodeSniffer-ja を作成し、公開しました。
で、翻訳始める前にちょこっと検索したところ、すでに日本語版を公開されている方がいらっしゃたんですが、本家の HTML_CodeSniffer が何回か更新されているのと、自分が使うやつに関しては、元々の英語のメッセージも残しておきたかった （要するに日本語 / 英語併記） り、自分なりにわかりやすく翻訳文章をいじりたかったので新規で翻訳という形をとりました。
翻訳の文章は、WCAG 2.0 実装方法集 （Techniques for WCAG 2.0 の日本語訳版） を参考にしつつ、ちょっと難しいかなという言い回しなどを元の英語文章を参考に少し言い換えたりといった感じで作成しました。
pa11y での使い方
pa11y の詳しい使い方はリンク先を見ていただくとして、Windows なら、下記の手順でインストールできます。Node.js はすでに使っている前提ですが、
まず、phantomjs2 が必要なのでインストールします。
npm install -g phantomjs2
で、インストール後に、%APPDATA%¥AppData¥Roaming¥npm¥node_modules¥phantomjs2¥lib¥phantom¥bin にある phantomjs.exe を %APPDATA%¥AppData¥Roaming¥npm¥ に移動します。
その後、pa11y をインストール。
npm install -g pa11y
この状態で、コマンドラインから下記のようにテストをしてみて、問題なくレポートが表示されればインストールは完了です。
pa11y nature.com
日本語でレポートを出力
日本語化しますが、--htmlcs、--H オプションで、HTMLCS.js の場所を指定することもできますので、
pa11y --htmlcs https://burnworks.com/docs/HTML_CodeSniffer-ja/HTMLCS.js nature.com
のようにすれば、とりあえず日本語でレポートの表示は可能です。
あるいは、pa11y の設定ファイルに下記のように HTMLCS.js の場所を指定しておいてもよいと思います。
pa11y({
htmlcs: 'https://burnworks.com/docs/HTML_CodeSniffer-ja/HTMLCS.js'
});
HTMLCS.js のビルド
インストール済みの pa11y に同梱されている HTMLCS.js を日本語版で置き換えちゃいたいという場合は、下記のような感じで GitHub からソースを持ってきてビルドしてください。
cd $YOUR_HTMLCS_DIR git clone https://github.com/burnworks/HTML_CodeSniffer-ja.git cd HTML_CodeSniffer-ja npm install grunt --gruntfile Contrib/Grunt/gruntfile.coffee build
問題なければ下記のようなメッセージがでてビルドが完了すると思います。
Running "uglify:dist" (uglify) task File build/HTMLCS.js created. Running "copy:dist" (copy) task Copied 7 files Done, without errors.
これで、build フォルダ内に HTMLCS.js ができていると思いますので、これを pa11y のインストールディレクトリ以下にある /lib/vendor/HTMLCS.js に上書きしてしまってください。
様々な形式でのレポート出力
オプションを何も指定しなければ、デフォルトでは cli でレポートが表示 （要するに黒い画面にレポートが出力されます） されますが、オプションを指定することで、HTML や CSV、JSON 形式でのレポート出力が可能です。
例えば、HTML 形式のレポートが作りたければ、
pa11y --reporter html http://example.com/sample.html > sample-report.html
のように、--reporter html （あるいは --r html でも可） オプションでレポート形式を指定して、さらに、
http://example.com/sample.html > sample-report.html
のように、[レポート対象の URL] > [出力ファイル名] という形で指定してあげれば、作業フォルダに sample-report.html が生成されます。
CSV はそのままでは文字化けするので注意
日本語化に際して、各ファイルの文字コードが UTF-8 になっていますが、CSV 形式を指定してレポートを作った場合、その CSV をエクセルで開くと、デフォルトの Shift_JIS で開かれてしまうため、文字化けします。UTF-8 に対応したテキストエディタなどで一度開いていただいて、文字コードを変えるなりしてから使ってください。
ブックマークレットでの使い方
HTML_CodeSniffer を翻訳したため、本家の利用方法であるブックマークレットでのアクセシビリティチェックも日本語化されています。
本家のブックマークレット ソース内で、//squizlabs.github.io/HTML_CodeSniffer/build/ となっている箇所を、下記のように URL だけ変えてください。
javascript:(function()%20{var%20_p='https://burnworks.com/docs/HTML_CodeSniffer-ja/';var%20_i=function(s,cb)%20{var%20sc=document.createElement('script');sc.onload%20=%20function()%20{sc.onload%20=%20null;sc.onreadystatechange%20=%20null;cb.call(this);};sc.onreadystatechange%20=%20function(){if(/^(complete|loaded)$/.test(this.readyState)%20===%20true){sc.onreadystatechange%20=%20null;sc.onload();}};sc.src=s;if%20(document.head)%20{document.head.appendChild(sc);}%20else%20{document.getElementsByTagName('head')[0].appendChild(sc);}};%20var%20options={path:_p};_i(_p+'HTMLCS.js',function(){HTMLCSAuditor.run('WCAG2AA',null,options);});})();
自前で日本語版をビルドした方は、build フォルダをご自身のサーバ等にアップした上で、その URL を上記に反映して使ってもらえればよいと思います。
実際に実行すると下記のような感じになります。
課題
一部だけちょっとうまく翻訳できてないところがあるので追って。あと、翻訳おかしいとか、そういうのがありましたらご指摘ください。
