ウェブアクセシビリティ適合レベル「A」「AA」を達成するために！役立つツールをご紹介
こんにちは、webエンジニアのゾノ( @ozonosho )です。
今回の記事ではウェブアクセシビリティへの対応に役立つツールをご紹介いたします。
ウェブアクセシビリティ対応とは、年齢や利用環境の違い、障害の有無などにかかわらずすべての人にとって使いやすいサイトを目指すための対応です。
例を挙げると、下記のような対応が必要になります。
- ウェブアクセシビリティ対応例
-
- 高齢者や色弱の方にたいして文字の可読性を損なわないよう文字サイズやコントラスト比を配慮する
- キーボードだけで操作する方の操作性を配慮する
- 全盲の方がスクリーンリーダーを利用してサイトを閲覧する際に適切な情報・状況が掴めるよう配慮する
この他、さまざまな対応が必要になります。
ここ２年ほど行政のサイト制作に何件か携わっているのですが、必ずウェブアクセシビリティ対応を求められました。具体的には、適合レベル「A」ならびに「AA」の達成が求められました。
ウェブアクセシビリティ対応については、問題点を指摘してくれるツールが色々とあります。（この記事でも後述します）
そのため、まずはツールで指摘された問題点を改善していく流れになります。
ただしツールだけですべての問題点を見つけることはできません。
実際にサイトをキーボード操作だけで利用してみたり、スクリーンリーダーの読み上げ機能だけで利用してみたりして見つかる問題点も多くあります。
そのため、ウェブアクセシビリティ適合レベル「A」「AA」の基準を達成するためにはツールによるチェックに加えて目視によるチェックも必要となります。
そんなわけで今回の記事ではチェックツールをご紹介、そして次回の記事からは数回に渡って僕が実際に目視で指摘されたウェブアクセシビリティ項目とその対応方法を紹介していきます。
ウェブアクセシビリティチェックに役立つツール
以下は、ウェブアクセシビリティの評価会社が実際に利用されていたツールです。これらのツールを利用することで問題点を見つけることができます。
The Nu Html Checker
主に、セマンティクス（意味情報）を適切にマークアップしているかチェックしてくれるツールです。
こちらのページからweb上でチェックすることも可能です。
axe
マークアップだけでなくコントラスト比やその他ウェブアクセシビリティ全般のチェックをしてくれるツールです。
僕はaxe-coreライブラリを利用する方法でチェックされましたが、Chrome拡張機能としてもリリースされているようです。
miChecker （エムアイチェッカー）
総務省が提供しているウェブアクセシビリティ評価ツールです。
マークアップだけでなく可読性の問題等もチェックしてくれます。僕が制作したサイトは行政のサイトだったこともあり、このツールもチェックに利用されていました。
詳細はこちらのページをご覧ください。
インストール型のツールのため、ダウンロードしたうえで利用します。
まずはツールで見つかる問題点の対応をおこなう
ここで紹介したようなチェックツールを利用すると、現状のサイトが抱えているウェブアクセシビリティの問題点を見つけることができます。
マークアップの問題からコントラスト比の問題まで、、、きっと色々と見つかります。
僕はそうでしたｗ
はじめて指摘内容を見たときは「わぁ、全部対応するの大変そうだなぁ。。。」と感じましたが、指摘内容はHTMLやCSS、デザインのレベルで改善できることがほとんどなので、取り組んでみると意外と時間かからずに対応できると思います。
（本当に大変なのは、その先”目視”で指摘される問題点の数々です…ｗ）
おわりに
以上、今回の記事ではウェブアクセシビリティへの対応に役立つツールを紹介させていただきました。
次回の記事からは具体的な指摘項目とその対応内容を紹介していきます。
当サイトではWordPressのカスタマイズ依頼を請け負っています。実現したい機能・要望がある方はぜひ下記ページよりご相談ください。
