HOME > ウェブアクセシビリティ対応.com > ハウツー > 初心者必見！ウェブアクセシビリティチェックツールのおすすめ12選
基礎知識
ハウツー
checker

  1. 初心者必見！ウェブアクセシビリティチェックツールのおすすめ12選

初心者必見！ウェブアクセシビリティチェックツールのおすすめ12選

  1. ウェブアクセシビリティチェックツールを活用すれば、効率的なウェブアクセシビリティ対応が可能です。ウェブアクセシビリティ実現に向けWebサイトを改修する際、問題点を洗い出す必要がありますが、人手による確認では多くの手間がかかります。ツールを活用することで、手間や時間の短縮が可能です。

本記事では、おすすめのウェブアクセシビリティチェックツールや、ツールを活用した対応ステップ、チェックのポイントについて詳しく解説します。おすすめのウェブアクセシビリティチェックツールを知りたい方、効率的にウェブアクセシビリティ対応したい方は、ぜひ参考にしてください。

ウェブアクセシビリティチェックツールとは

ウェブアクセシビリティチェックツールとは

ウェブアクセシビリティチェックツールとは、Webサイトがウェブアクセシビリティに対応できているかを確認するツールのことです。ウェブアクセシビリティには複数の項目があり、全ての項目を人が確認すると多くの手間がかかります。また、抜け漏れが発生するリスクもあるでしょう。ウェブアクセシビリティチェックツールを活用すれば、効率的なチェックが実現できます。

無料のウェブアクセシビリティチェックツール8選

無料のウェブアクセシビリティチェックツール8選

ウェブアクセシビリティチェックツールは複数あります。まず、無料のウェブアクセシビリティチェックツール8選について詳しく解説します。

  • Lighthouse
  • Alt & Meta viewer
  • miChecker
  • NVDA
  • ColorTester
  • Colorblind Web Page Filter
  • CSS無効化くん
  • Colour Contrast Analyser（CCA）

Lighthouse

LighthouseはGoogleが無料で提供している、Google Chromeの拡張機能です。以下の項目をチェックし、操作性に問題がないかの確認が可能です。

  • ページ読み込みやレスポンスのスピードに問題がないか
  • モバイルで、Webサイトをスマートフォン向けアプリのように使える仕組みのPWAになっているか
  • HTMLの構造やテキストの背景色に問題はないか
  • SEOが最適な状態か

Alt & Meta viewer

Alt & Meta viewerは、視覚障がい者もスムーズにWebサイト利用ができるようにするためのGoogle Chrome拡張機能です。Webサイトの画像内容を示すテキストタグであるALTが、正常に機能しているかを確認できます。

miChecker

miChecker（みんなのアクセシビリティ評価ツールmiChecker）は、JIS X 8341-3:2016に対応した総務省の提供ツールです。高齢者や視覚障がい者がどのように見えるかのシミュレーションや、読み上げツールを活用した場合のシミュレーションなど、さまざまな項目を診断できます。また、ウェブアクセシビリティに関する資料も付属しているため、知識の獲得にも役立ちます。

NVDA

NVDA

出典：NVDA公式Webサイト

NVDAは、世界中で利用されている以下が可能な音声読み上げソフトです。

  • テキストの読み上げ
  • マウスカーソル位置の読み上げ
  • 点字ディスプレイの自動検出
  • 点字入力キーを活用した入力

基本的には、視覚障がい者の支援ツールとして利用されていますが、ウェブアクセシビリティチェックにも活用可能です。

ColorTester

アルファサード株式会社

出典：アルファサード株式会社公式Webサイト

ColorTesterは、JIS X 8341-3に基づく色のコントラストを簡単に確認可能なツールです。画像をドラッグ＆ドロップでアップロードすれば、迅速にコントラスト比を算出してくれます。

Colorblind Web Page Filter

Colorblind Web Page Filter

出典：Colorblind Web Page Filter公式Webサイト

Colorblind Web Page Filterは、WCAG 2.0に基づく色のコントラスト比をチェック可能なツールです。使い方は非常に簡単で、検証したいページのURLを入力するだけです。インストールは必要ありません。各ページに対して、以下の複数パターンにおけるチェックができます。

  • １型色覚（灰色と赤の区別がしにくい）
  • ２型色覚（灰色と緑の区別がしにくい）
  • ３型色覚（黄色と青を混同する）

CSS無効化くん

CSS無効化くんは、以下を無効化するGoogle Chromeの拡張機能です。

  • CSS
  • リンク
  • 画像

CSSに依存し過ぎず、適切なマークアップになっているかを確認できます。

Colour Contrast Analyser（CCA）

TPGi

出典：TPGi公式Webサイト

Colour Contrast Analyser（CCA）は、WCAG2.1に対応したコントラスト比チェックツールです。WindowsやmacOSでも活用でき、シンプルで使いやすいインターフェースが魅力です。

有料のウェブアクセシビリティチェックツール4選

 

続いて、以下の有料ウェブアクセシビリティチェックツール4選について詳しく解説します。

  • Accessdove
  • WAIV2（旧WAIV）
  • Siteimprove
  • axe Monitor

Accessdove

Accessdove

Accessdoveは、タグ1行でWebサイトの翻訳やウェブアクセシビリティ対応ができるツールです。タグを埋め込むだけで、知識がなくても即日対応できます。また、一度設置すれば規格に合わせたアップデートが自動的に反映されるため、修正などは必要ありません。ウェブアクセシビリティメニューは30種類以上あり、さまざまな症状に対応できます。

WAIV2（旧WAIV）

株式会社U'eyes Design

出典：株式会社U’eyes Design公式Webサイト

WAIVはJIS X 8341-3:2016をベースに、どの程度アクセシビリティ対応できているかを評価するツールです。問題点や修正のポイントを具体的に提示してくれます。また、以下項目ごとに細かな確認も可能です。

  • 表示速度
  • 操作性
  • 文章の読みやすさ

ウェブアクセシビリティには直接関係ないものの、ユーザーに迷惑がかかるリンク切れや見にくい色の使用、読みにくいテキストの連続なども確認でき、Webサイトの品質向上に役立ちます。PDFを含めたWebサイトの確認ができる点も魅力です。

Siteimprove

Siteimprove

出典：Siteimprove公式Webサイト

Siteimproveは、7,000社以上の企業や組織に利用されているツールです。以下を含め、200以上の項目を定期的に自動検証してくれます。

  • リンク切れ
  • 表記ゆれ
  • 表示速度
  • 誤字・脱字
  • アクセシビリティ

さまざまな問題を網羅的にチェックしてくれるため、ウェブアクセシビリティ対応にとどまらず、Webサイト全体の品質向上が期待できます。また、問題点の影響や対応すべき優先順位付けも提案してくれ、効率的なWebサイト改修を実現できます。

axe Monitor

株式会社ミツエーリンクス

出典：株式会社ミツエーリンクス公式Webサイト

axe Monitorは、WCAG2.0に対応したウェブアクセシビリティチェックのツールです。ページ単位ではなく、Webサイト全体を一括で確認できます。また、チェックした内容はチームでの共有やタスクの割り振りができ、効率よく問題を解決可能です。抜け漏れも発生しにくいでしょう。

チェックツールを利用したウェブアクセシビリティ対応のステップ

チェックツールを利用したウェブアクセシビリティ対応のステップ

チェックツールを利用したウェブアクセシビリティ対応のステップは、以下の通りです。

  1. チェック基準の明確化
  2. ウェブアクセシビリティチェックツールの利用
  3. Webサイトの改修
  4. 再チェック

順に解説します。

チェック基準の明確化

まず、どの規格のどの基準に対応するかを明確にしましょう。主な基準にはJISとWCAGがあり、達成基準はA・AA・AAAの3段階にわかれています。どの達成基準を選択するかで、求められる要件が異なります。ちなみに、望ましいとされている適合基準はAAです。

なお、基準に関する詳細については、以下をご覧ください。
⇒ウェブアクセシビリティの「A」「AA」達成基準を詳しく解説！

ウェブアクセシビリティチェックツールの利用

基準が明確になった後に、チェックツールを活用しWebサイトを評価します。ツールによりWebサイト全体を一括でチェックするケースと、コンテンツごとにチェックするケースがありますが、人間が一つひとつするよりも効率的に確認可能です。

Webサイトの改修

ツールで洗い出された問題点を確認し、Webサイトを改修します。問題点が複数ある場合は、優先順位付けを行い、負担のない範囲で改修しましょう。できる範囲でのウェブアクセシビリティ対応も重要です。

再チェック

Webサイトを改修したら、問題がないかを確認します。該当箇所が正しく修正されているかはもちろん、他に悪い影響が出ていないかのチェックも欠かせません。検証する際には、ツールだけでなく目視や実際の操作による確認を行いましょう。ツールは完璧ではありません。例えば、文章の整合性など人間の判断が必要とされる問題も存在します。

チェックする際のポイント

チェックする際のポイント

Webサイトの状態をチェックする際のポイントは、以下の通りです。

  • ツールと目視の両方でチェックを行う
  • 複数のデバイスやブラウザでチェックする
  • 改修後に必ず再チェックを行う

ここからは、上記それぞれのポイントについて詳しく解説します。

ツールと目視の両方でチェックを行う

ウェブアクセシビリティの状態を確認する際には、ツールと目視の両方で確認しましょう。チェックツールで確認できる項目は、2割から3割程度と言われており、全項目のチェックができるわけではありません。目視とツールの活用を組み合わせれば、より多くの問題を発見でき、品質の向上につながります。

複数のデバイスやブラウザでチェックする

近年、インターネットを活用するデバイスは、パソコンやスマートフォン、タブレットなど複数あります。また、ブラウザもGoogle Chromeやsafariなど、人により活用するものが違うため、複数のデバイス・ブラウザにおける確認が欠かせません。多数のデバイス・ブラウザで確認すれば、より多くの人が活用しやすい環境を整えられます。また、文字の読み上げなど障がい者が活用するツールが使えるかのチェックも重要です。

改修後に必ず再チェックを行う

Webサイトを改修した際は、問題が解消されているか再度チェックしましょう。また、ある改修により、他に影響が出ていないかの確認も欠かせません。一部の改修により、他が見にくくなったり、使いにくくなったりするケースもあるため、注意が必要です。

まとめ

まとめ

ウェブアクセシビリティチェックツールを活用すれば、問題点を洗い出す手間や時間を短縮でき、効率的なウェブアクセシビリティ対応が可能です。ツールを活用する際には、以下のステップを実施しましょう。

  1. チェック基準の明確化
  2. ウェブアクセシビリティチェックツールの利用
  3. Webサイトの改修
  4. 再チェック

ツールは複数あるため、どれを利用するかの見極めも重要です。AccessdoveはWCAGやJIS X 8341-3をサポートしており、タグ1行でウェブアクセシビリティに対応できるため、おすすめです。