ウェブアクセシビリティに関わる人たちの間で広く利用されている「axe」は、Deque Systems 社が開発するアクセシビリティチェック(テスト)ツールです。公式にブラウザ拡張機能なども提供されており、弊社でも日常的に使用しています。

また、そのコアエンジンである「axe-core」は、オープンソースソフトウェア(OSS)として公開されていて、関連するライブラリを活用することで、用途に合わせたアクセシビリティチェック関連のアプリケーションを開発することが可能です。

弊社では、以前にも、この「axe-core」ライブラリを使用し、複数の URL に対するアクセシビリティチェックをコマンドライン上から実行して、HTML 形式のレポートを生成する「axe-auto-reporter」を GitHub 上で公開(以下の参考記事もご参照ください)していますが、この「axe-auto-reporter」をブラウザから利用できるウェブアプリケーションにしたものを新たに公開しました。

Burnworks A11y Reporter Web UI

今回公開したツールは下記です。

「Burnworks A11y Reporter Web UI」の画面スクリーンショット

UI はシンプルで、アクセシビリティチェックレポートを生成したい URL を入力し、「レポート作成」ボタンを押すと、「axe-core」を使用してアクセシビリティチェックを実施、その結果レポートを HTML 形式で生成します。

レポートの形式は「axe-auto-reporter」と全く同じものです。

axe-core と Puppeteer(Node.js 上で動作するヘッドレスの Chrome ブラウザです) によるアクセシビリティチェックは、サーバリソースをかなり消費しますので、少し厳しめなレートリミット(利用制限)をかけています。

通常、閲覧中のページのアクセシビリティチェックをしたい場合は、ブラウザ拡張機能のご利用をお勧めしますし、複数の URL に対する自動チェックを実施したい場合は、先に紹介した「axe-auto-reporter」などをご利用いただく方がよいと思いますので、今回公開したツールは、そのようなブラウザ拡張やコマンドラインツールをどうしても使えない方が、アクセシビリティチェックをはじめて体験される、入門用ツールとして適しているのではないかと考えています。

なお、今回公開したツールで可能なアクセシビリティチェックは、「プログラムによって機械的に行うチェック(AC: Automated Check)」です。

弊社のナレッジブログでも過去に書いていますが(下記記事参照)、このような機械チェックで発見可能なアクセシビリティ上の問題は限られており、この結果をもってアクセシビリティ上の問題点をすべて把握することはできません。

しかし一方で、今回のツールは、アクセシビリティチェックツールに関する詳しい知識を持たない方でも簡単にアクセシビリティチェックを体験することができます。

まずはアクセシビリティチェックを体験してみていただいて、それが自社が運営するウェブサイトのアクセシビリティ品質向上に興味を持つきっかけになっていただけたら幸いです。


その他のアクセシビリティ関連ツール

弊社では、今回ご紹介した「Burnworks A11y Reporter Web UI」や「axe-auto-reporter」以外にもオンラインで利用できるコントラスト比チェックツールやアクセシビリティチェックをサポートするブックマークレットなどを公開しています。

下記にまとめてありますのでご興味があればご覧ください。

バーンワークス株式会社が公開しているウェブアクセシビリティ関連の便利ツール一覧ページ スクリーンショット

関連記事