今すぐ使えるアクセシビリティチェックツール13選！
UI開発者 宇賀夏だ！祭りだ！アクセシビリティだ！
ということで、すぐに使えるWebアクセシビリティチェックツールをまとめてご紹介したいと思います。
当社では、アクセシビリティの品質チェックを行う専門の部署が存在しますが、検品依頼をする前に最低限の自己検品を行うことは、時間短縮に加えて品質を守る上でも大切です。
今回は私が普段に使っているGoogle Chromeのエクステンションなど、これまでフロントエンドBlogで紹介してきたツールも含めてまとめをご用意いたしました。
目次
スクリーンリーダー
耳でWebサイトを聴いているユーザーが、どのような情報が取得できているのかを確認するためには欠かせないツールです。
たとえば、マークアップの違いによるセマンティクスの変化や、WAI-ARIAの実装によるアナウンスの変化を確認できます。
VoiceOver
スクリーンリーダーの中では最も身近でとっつきやすいのがVoiceOverではないでしょうか。
VoiceOverは、Apple社のmacOS、iOS、iPodに標準装備されているスクリーンリーダーです。
iOSでの起動方法は、次の通りです。
- 設定を開く
- 一般
- アクセシビリティ
- VoiceOver
- VoiceOverを「オン」にする
他にも起動方法は用意されていますが、Siriが搭載されている端末であれば、「VoiceOverオン」と話しかけることで起動させることもできます。
iOSで起動しているVoiceOverを終了する方法は起動する方法と同様で、設定画面からでも「VoiceOverオフ」とSiriに話しかけても終了することができます。
- VoiceOver スタートアップガイド（macOS Sierra）
- iPhone ユーザガイド（iOS10）
NVDA
NVDAはアドオンによる機能拡張が可能なWindows向けのスクリーンリーダーで、オープンソースのフリーウェアです。
私は個人的にFocus Highlightをいうアドオンと一緒に利用しています。
その他制作で使える便利ツール
Web制作をしていく上で、その実装が正しいかどうかを1つ1つ最終的に確認する作業は意外と大変です。
その確認作業の負担を少しでも軽減させていきたいというときに活躍してくれるツールもいくつか紹介したいと思います。
Accessibility Developer Tools
Google Chromeの開発者ツールを拡張するエクステンションです。
読み上げられる要素のコンテンツを確認できます。また、コントラスト比をチェックすることができます。
ARIA Validator
WAI-ARIAが正しく実装されているかを検査してくれるツールです。
詳しい内容は2014年9月5日の記事 ARIA Validatorを利用したWAI-ARIAの検証をご覧ください。
現在、2014年8月6日から更新されておらず、2016年に勧告されたWAI-ARIA1.1の仕様が考慮されていないため、バージョンアップが期待されます。
Alix
読み込むだけでHTMLに潜むエラー、警告、廃止された要素、アドバイスの4つに分類される指摘事項を表示してくれるa11y.cssというものがあり、それを今見ているWebページに反映させることができるエクステンションです。
a11y.cssのプロジェクトページでは、有効化させるためのブックマークレットも配布しています。
aXe
クリック1つでWebページのアクセシビリティチェックを行ってくれるツールです。
最終的にはアクセシビリティエンジニアによる目視確認が必要不可欠なアクセシビリティチェックとはいえ、WAI-ARIAの実装ミスについても細かくチェックを行ってくれる優れものです。
指摘ごとに内容をまとめて閲覧できるようになっており、発生している指摘事項がWCAG2.0のどの達成レベルに準拠する上で問題なのかもIssue tagsに表示されます。
指摘内容についての詳しい解説ページへの導線も備えてられており、理由や指摘の重要性などの情報も明記されていて非常に親切なつくりになっています。
Chrome Accessibility Experiment
Google Chromeに標準で備わっている実験中の機能です。
flags画面から、「Developer Tools experiments」を有効にすることで、要素がアクセシビリティAPIに公開している情報を閲覧することができるようになります。
アクセシビリティツリーが見られるため、その要素が他の要素とどのような関係性を持っているのかを視覚的に理解できます。
また、要素自体の状態やラベル、役割などのプロパティや、スクリーンリーダーではどのような情報が読み上げられるかがある程度わかるため、通常の実装だけでなく、WAI-ARIAの実装の助けとして活躍します。
ChromeLens
Google Chromeのエクステンションです。
残念ながらこのエクステンションが持つアクセシビリティチェック機能は、WAI-ARIA1.1の仕様を想定しておらず、アップデートが期待されている状態ですが、視覚障害を持つユーザーの見え方をエミュレートできる点が注目です。
Lensesという機能で「Enable lens」にチェックを入れると画面が真っ黒になります。
チェックボックスのとなりにあるプルダウンからレンズの種類を選ぶことで、視界が霞んでいる状態、色が上手く認識できない状態のフィルタをWebページにかけることが可能です。
また、Trace tab pathという機能では、タブフォーカスの遷移した軌跡を画面上に表示させることができ、さらにその結果のキャプチャをpng形式で保存することもできます。
Colour Contrast Analyser
WindowsやmacOS / OS X向けのツールで、WCAG2.0の基準に基づいたカラーコントラストの合否判定を行うことができるツールです。
指定した色の組み合わせの合否判定を、達成基準別、文字サイズ別に表示します。指定した色の組み合わせが色盲のユーザーにとってどのように見えるかも確認することが可能です。
ChromeLensのように見え方のシミュレーション機能も搭載されています。
Contrast Ratio Checker
こちらもカラーコントラストに関するツールで、Google Chromeのエクステンションです。
別途アプリケーションを立ち上げる必要も無く、調べたい要素をクリックするだけで該当箇所が達成基準を満たしているかどうかを確認できます。
HTML5 Outliner
HTML5ではアウトラインアルゴリズムという概念が存在します。多くの支援技術やブラウザは、この概念を取り入れた実装を行っていません。
そのため、アウトラインアルゴリズムだけを意識したマークアップよりも、暗黙的なアウトライン形成を考慮した場合と同じように見出しレベルを決定するべきではありますが、実際にそのWebページのアウトラインが、アルゴリズムによって解釈されたときどのような構造になっているかを確認できるツールです。
セクショニングルート内のヘディングコンテンツは無視されるため、純粋にbody要素内のアウトラインを確認することができます。
こちらもGoogle Chromeのエクステンションですが、Web版も存在しています。
Nu Html Checker
W3Cが公開しているHTMLバリデータです。
WebページがHTMLの仕様に則って作られているかどうかは、WCAG2.0の4大原則の1つ「堅牢性」にかかわってきます。
Webページの品質を最低限担保するためにはinvalidではないHTMLであることが大前提であるため、確実に検証を行っていきたいですね。
- Nu Html Checker（Web版）
- validator/validator: The Nu Html Checker（Github）
Web Developer
Web制作を行っている開発者が使うGoogle Chromeの多くにインストールされていると思っているエクステンションです。
JavaScriptやCSS、画像を無効にしたり、Cookieに関する操作やalt属性のチェック、画面のリサイズなど様々な機能を併せ持ったツールです。
今見ているWebページがJavaScript無効環境、CSS無効環境、画像無効環境で閲覧された場合どのような状態になるのかの確認や、各種属性を可視化するなど、活躍の場は幅広いです。
最後に
世の中には数え切れないほど多くのツールが溢れかえっています。
自分でツールを開発するというのはもちろんですが、公開されているツールの中から自分に合ったものを選び取っていくことも、エンジニアとして生きる醍醐味だと私は思います。
最終的なベストは全て目視で確認、耳で聴くことに尽きるわけですが、ツールで回収できるような指摘事項は効率よく発見・解決していきたいですね。