a11yc

screenshot

[en]

Introduction

Check accessibility of target page and generate accessibility evaluate page and policy.

See how it works. A11yc Accessibility Check Service WordPress Plugin jwp-a11y

deploy

Download zip and put it all in the folder a11yc or,

git clone [email protected]:jidaikobo-shibata/a11yc.git a11yc

a11yc/config/config.dist.php

to

a11yc/config/config.php

set A11YC_URL, A11YC_USERS, A11YC_LANG.

if you want to use SQLITE, create directory

a11yc/db

and create symlinks

ln -s a11yc/public/assets
ln -s a11yc/public/index.php
ln -s a11yc/public/post.php

mv a11yc/public/.htaccess.dist to document root and rename it.

mv a11yc/public/.htaccess.dist .htaccess

[ja]

紹介

JIS X 8341-3:2016 (WCAG 2.0) に基づいたアクセシビリティ報告書と方針を生成するためのウェブプリケーションです。

A11yc Accessibility Check Serviceで動いているものを確認できます。 WordPressプラグイン版 jwp-a11yもあります。

動作環境

PHP 5.6以上

設置方法

zipをダウンロードして、a11ycというフォルダにすべて入れるか、

git clone [email protected]:jidaikobo-shibata/a11yc.git a11yc

してください。

config/config.dist.php

を複製して、

config/config.php

を作り、環境設定してください。ほとんどの場合、A11YC_URL (ファイルを設置したアドレス) とA11YC_USERS (管理者情報) を設定したら大丈夫だと思います。

SQLITEを使う場合は、

a11yc/db

を設置してください。

フロントコントローラへのシンボリックリンクをはります。

ln -s a11yc/public/assets
ln -s a11yc/public/index.php

アクセシビリティのチェッカだけを使うのであれば、以下のシンボリックリンクを用意してください。

ln -s a11yc/public/post.php

ドキュメントルートに.htaccessを設置してください。

cp a11yc/public/.htaccess .htaccess

最終的に、

.htaccess
index.php
assets/
a11yc/

という状態になっていれば動作します。

権限等の問題でシンボリックリンクを張れない場合は、それぞれのphpをinclude()する方法でもいけます。しかし、この場合でも、assetsだけは、ドキュメントルートに複製する必要があります。

報告書作成画面にアクセスできるIPを制限したい場合はA11YC_APPROVED_IPSを書いてください。特にない場合は、define()しないようにしてください。

パスワードはconfig.dist.phpにもありますが、コマンドラインで

php -r "echo password_hash('password', CRYPT_BLOWFISH);\n"

というようにハッシュして保存してください。

使い方

最初に「設定」で、「目標とする適合レベル」を定めてください。

そのあと、「チェック」で対象のページを追加していって、チェックをしてゆきます。

報告書と方針

a11yc/public/report.php

を適当なファイル名に変更します。PHPがわかる方なら、適当にパスをいじって好きなところにおいてください。わからない場合でも、HTMLはいじっても大丈夫です。

ブラウザでこのファイルにアクセスすれば、状況に応じた報告書が生成されています。

CMSへの取り込み

WordPressのプラグインでは、投稿のたびに投稿内容のアクセシビリティチェックを行うようになっています。その手順を下記します。

A11ycでチェックするために記事のURLを取得します。WordPressの場合は、get_permalink($post->ID)のようなものです。一時的なチェックの場合は、サイトトップのURLを入れても動きます。

require_once ('/path/to/a11yc/main.php');
$url = get_permalink($post->ID);

HTMLのすべてをチェックするときには、headの中などのチェックも行いますが、投稿内容のみをチェックする場合は、不要なのでそのように設定します。

\A11yc\Validate::$is_partial = true;

Validateの中のリンクチェッカは処理に時間がかかるので、何らかの方法で、オンオフできるようにします。

\A11yc\Validate::$do_link_check = \A11yc\Input::post('jwp_a11y_link_check', false);

CSSのチェックも普段は不要かもしれません。

\A11yc\Validate::$do_css_check  = \A11yc\Input::post('jwp_a11y_css_check', false);

Validateクラスに検査対象のHTMLをセットします。以下はWordPressの例です。

\A11yc\Validate::html($url, apply_filters('the_content', $obj->post_content));

チェックの後、

• \A11yc\Validate\Get::errors($url)にエラー
• \A11yc\Validate\Get::errorCnts($url)にエラーの数
• \A11yc\Validate\Get::logs($url)にチェック内容

が積まれているので、これを取得できます。

参考にしたものの一部

• JIS X 8341-3:2016 対応発注ガイドライン
• アクセシビリティ・サポーテッド（AS）情報
• JIS X 8341-3:2016 試験実施ガイドライン
• ウェブアクセシビリティ評価ツールの最低要求仕様 2012年11月版
• WCAG-EM Report Tool Website Accessibility Evaluation Report Generator
• HTML5 4.7.1.1.22 Guidance for conformance checkers
• HTML5.1 4.7.5.1.23. Guidance for conformance checkers

依存しているライブラリ

• spyc
• guzzle
• Upload

チェック

skipfishとOWASP ZAPをもちいて脆弱性チェックをかけています。

謝辞

参考にさせていただいた資料および使わせてもらっているライブラリの開発者の皆さんに感謝します。