ウェブアクセシビリティチェックツール10選｜優先度別チェックリストや注意点も｜Webサイト制作 / CMS・MAツール

Webサイト制作

ウェブアクセシビリティチェックツール10選｜優先度別チェックリストや注意点も

# Webサイト

2024.05.17

WEBサイトの構築・運用を
もっと、効率的にしたい担当者の方へ

LeadGridは、1,500社以上のサイト制作・マーケティング支援の経験から生まれた、専門知識がなくても簡単に使える国産CMS・マーケティングツールです。上場企業から中小・ベンチャーまで様々な企業にご利用いただいております。

サービス資料を無料でダウンロードする

ウェブアクセシビリティへの対応は、すべての企業にとって重要な課題です。チェックツールを活用し、効率的にWebサイトの問題点を発見したいと考える企業も多いでしょう。

そこで本記事では、16のウェブアクセシビリティチェックツールを無料・有料に分けて紹介します。またアクセシビリティ対応の優先度別チェックリストも掲載していますので、これからウェブアクセシビリティに取り組む企業はぜひ最後までご覧ください。

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

無料で利用できるウェブアクセシビリティのチェックツールには、総合的なチェックができるものから、特定の項目に特化したものまでさまざまな種類があります。ここでは、それぞれのツールを種類別に紹介します。

総合的なウェブアクセシビリティチェックツール

総合的なウェブアクセシビリティチェックツールは、さまざまな観点からWebサイトの問題点を洗い出すことができます。

みんなのアクセシビリティ評価ツール：miChecker

▲出典：総務省

miCheckerは、総務省が提供する信頼性の高いウェブアクセシビリティチェックツールです。JIS X 8341-3:2016に基づいたチェックが可能で、音声読み上げソフトを使用した際のユーザビリティを確認したり、色障害者・高齢者の方にWebサイトがどう見えているかをシミュレーションしたりといった使い方ができます。

みんなのアクセシビリティ評価ツール：miCheckerの詳細はこちら

Lighthouse (Google Chrome拡張機能)

▲出典：Chromeウェブストア

Lighthouseは、Googleが提供するChrome拡張機能です。Webサイトのパフォーマンス、アクセシビリティ、SEOなど総合的な観点から分析を行い、100点満点のスコアと改善のための具体的な提案が示されるため、課題の把握と対策の検討に役立ちます。

Lighthouseの詳細はこちら

スクリーンリーダー

スクリーンリーダーは、視覚に障害のある方がWebサイトを利用する際に使用するソフトウェアです。音声読み上げ機能を用いてWebサイトの内容を確認できるため、アクセシビリティチェックに欠かせないツールといえます。

NVDA日本語版

▲出典：NVDA

NVDA日本語版は、世界的に利用されているスクリーンリーダーNVDAの日本語対応版です。無料で利用できるオープンソースソフトウェアであり、日本語の読み上げ品質に定評があります。キーボードナビゲーションの使いやすさも検証できるため、アクセシビリティチェックに最適なツールの一つです。

NVDA日本語版の詳細はこちら

画像のalt属性やメタ情報のチェックツール

画像の代替テキストを提供するalt属性やページの概要を示すメタ情報は、アクセシビリティの観点から重要な要素です。これらをチェックするための専用ツールも提供されています。

Alt & Meta viewer (Google Chrome拡張機能)

▲出典：Chromeウェブストア

Alt & Meta viewerは、画像のalt属性とメタ情報を簡単にチェックできるChrome拡張機能です。ソースコードを直接確認することなく、視覚的にわかりやすく情報を表示してくれます。画像のサイズ確認もできるため、コンテンツの最適化にも役立ちます。

Alt & Meta viewerの詳細はこちら

CSSのチェックツール

CSSは、ウェブページのデザインを制御する言語です。アクセシビリティの観点からは、CSSを適切に使用することが求められるため、CSSのチェックに特化したツールを使用することもあります。

CSS無効化くん(Google Chrome拡張機能)

▲出典：Chromeウェブストア

CSS無効化くんは、WebページのCSSを無効化するためのGoogle Chrome拡張機能です。CSSを無効にした状態でもコンテンツが適切に表示されるかどうかを確認できます。2019年4月のアップデートで、リンクや画像の無効化機能も追加されました。アクセシビリティの観点から、CSSに依存しすぎない適切なマークアップになっているかをチェックする際に役立ちます。

CSS無効化くんの詳細はこちら

コントラスト比チェックツール

コントラスト比は、ウェブアクセシビリティにおいて重要な指標の一つです。十分なコントラスト比を確保することで、視覚に障害のある方だけでなく、すべての利用者にとって読みやすいテキストを提供することができます。

以下のツールを使って、適切なコントラスト比を保っているか確認しましょう。

ColorTester

▲出典：アルファサード株式会社

ColorTesterは、色のコントラストをチェックできる無料ツールです。Windows版の場合、画像をドラッグ＆ドロップするだけでコントラスト比を算出してくれます。シンプルな操作性と、JIS規格に基づいた評価基準が特徴です。

ColorTesterの詳細はこちら

Colour Contrast Analyser (CCA)

▲出典：TPGi

Colour Contrast Analyser（CCA）は、色のコントラスト比を簡単にチェックできるツールです。2色の組み合わせを指定して、WCAG 2.0の基準に照らし合わせた評価結果を確認できます。Windows版とmacOS版が提供されており、使いやすいインターフェースが特徴です。

Colour Contrast Analyser（CCA）の詳細はこちら

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

ここからは、有料のウェブアクセシビリティチェックツールをいくつか紹介します。網羅的なチェックを行いたい場合や、詳細な分析レポートが必要な場合は、有料ツールの導入も検討しましょう。

WAIV2

株式会社U'eyes Design

WAIV2は、株式会社U'eyes Designが提供するアクセシビリティチェックツールです。2024年4月に大幅アップデートされたWAIVの後継バージョンであり、JIS X 8341-3:2016に対応しています。評価結果の集計やサイト一括評価など便利な機能を搭載しており、使いやすさが向上しました。アクセシビリティ評価のプロセスを効率化したい企業におすすめのツールです。

WAIV2の詳細はこちら

axe Monitor

▲出典：株式会社ミツエーリンクス

axe Monitorは、Deque Systems社が開発したウェブアクセシビリティのモニタリングツールです。指定したWebサイトやページを自動的にスキャンし、アクセシビリティ上の問題点を検出します。複数のガイドラインに対応しており、レポート機能も充実しています。大規模なサイトのアクセシビリティ維持に役立つツールといえるでしょう。

axe Monitorの詳細はこちら

Stark

▲出典：Stark

Starkは、デザインツールのAdobe XD、Figma、Sketchに対応した有料のアクセシビリティチェック拡張機能・プラグインです。コントラストチェックなどアクセシビリティ関連の機能を持ち、カラーブラインドシミュレーションなど視覚的な機能も充実しています。デザイン段階からアクセシビリティを考慮したい場合に有用なツールです。

Starkの詳細はこちら

ウェブアクセシビリティの優先度別チェックリスト

ここからは、ウェブアクセシビリティで達成すべきことを、デジタル庁の『ウェブアクセシビリティ導入ガイドブック』を参考にチェックリストで解説します。

必ず達成しなければならない項目や基本的に達成すべき項目、状況に応じて確認すべき項目など、優先度別に作成していますので、自社のウェブアクセシビリティ対応に不備がないか確認してみてみましょう。

参考：ウェブアクセシビリティ導入ガイドブック｜デジタル庁（PDF）

ウェブアクセシビリティで必ず達成しなければならない項目

下記のチェックリストは、ウェブアクセシビリティで必ず達成しなければならない項目です。

これらの達成基準を実現できていない場合、利用者がWebページやWebサイト内を移動したり、コンテンツを理解したりといった行動が極めて難しくなります。また利用者を発作の危険性にさらしてしまう可能性もあるため、必ず達成するようにしましょう。

チェック項目	詳細
読み上げはひとつまで/自動再生はさせない	スクリーンリーダーが何かを読み上げているときに、同時に音を再生させないようにする。自動再生する音声は 3秒以内に収め、3秒以上続く場合はユーザーが止められるようにする
袋小路に陥らせない	キーボード操作だけで利用しているときに、モーダルダイアログのようなフォーカスを制限するコンテンツで、一度フォーカスしたら抜け出せないコンテンツを作らないようにする
光が点滅するコンテンツを作らない	光の点滅を繰り返すと、光感受性発作等を誘発しやすくなることから、1秒に3回以上点滅するコンテンツを作ってはいけない
自動でコンテンツを切り変えない	操作をしたり読んだりするのに必要な時間は人によって異なるため、スライドショーや自動で切り替わるコンテンツなどがある場合は、一時停止、非表示、停止の機能を設置する

ウェブアクセシビリティで基本的に達成すべき項目

下記のチェックリストの内容は、実現できていないとコンテンツが十分に伝わらない、あるいは操作が不完全にしかできない可能性があります。優先して対応するようにしましょう。

チェック項目	詳細
ロゴ・写真・イラストなどの画像が指し示している情報を代替テキストとして付与する	写真やイラスト、グラフなど、おもに画像で提供される情報に対して「同等の役割を果たすテキスト」を配置する
キーボード操作だけで、サービスのすべての機能にアクセスすることができるようにする	キーボード操作時にフォーカスインジケーター（選択中の要素を枠線等で囲んで示すこと）が表示されるようにするキーボード操作時に、フォーカス・入力がキャンセルされたり、フォーカス・入力した瞬間に何かが勝手に動作することがないようにする
操作に制限時間を設けてはいけない	閲覧や入力の操作に制限時間を設けてはならない。制限時間がある場合は事前に警告し、簡単に延長できるようにする
赤字・太字・下線・拡大のみによる一部強調などを用いてはいけない	赤字など、色の違いだけで情報を伝えてはいけない太字、『右の写真』『丸いボタン』など、位置や形の違いだけで情報を伝えてはいけない
スクリーンリーダーで順に読み上げたときに、意味が通じる順序になっている	文章の意味と読み上げ順序が整合していないと内容を正確に理解できないため、順序を考慮してコンテンツやサービスを設計する
見出し要素だけで、セクションやブロックに含まれる要素を表現する	大見出し、中見出し、小見出し…となるように見出しレベルを適切に設定する NVDAで F7キーを押して見出しリストを表示して、ページ中の見出しが過不足なく表示されていることを確認する Chromeの機能拡張の HTML5 Outlinerを使って、HTMLのアウトラインを確認する見出し要素を空にしない強調や文字を大きくするために見出し要素を用いない
文字と背景の間に十分なコントラスト比を保つ	文字色と背景の間に、4.5:1以上のコントラスト比がある必要がある
テキストの拡大縮小をしても情報が読み取れる	画面拡大ソフトなどを使わずに、ブラウザの文字拡大機能だけで文字サイズを200%まで変更できるようにする
特殊なテキストや表現を使わない	半角カナを使用しないようにする日付や単位の記載、英語コンテンツに、/や全角を使わない
ページの内容を示すタイトルを適切に表現する	「内容｜サイト名」とすると判別が容易複数のページでページタイトルが重複しないようにするページタイトルとそのページの大見出し（H1）が揃っていると、ユーザーはより安心してページを利用できる
リンクを適切に表現する	リンクがどこへのリンクなのか、単体で、または前後の文脈から簡単に理解できるようにするリンク先が、PDFなのか外部ウィンドウを開くのか、事前に理解できるようにする
ナビゲーションに一貫性をもたせる	ナビゲーション要素が、毎回同じ順序、表記で実装されているようにする
同じ機能には、同じラベルや説明をつける	同じ機能を複数のページで提供する場合は、同じラベル、説明で提供されているようにするボタン要素などのコンポーネント、アイコン、リンクなどに一貫性を持たせる

ウェブアクセシビリティで状況に応じて確認すべき項目

下記のチェックリストの内容は、サイトや情報システムによっては無いこともあるコンテンツや確認事項です。コンテンツやシステムに応じて対応しましょう。

チェック項目	詳細
入力フォームをさまざまな使い方でも使えるようにする	ラベルとフォームコントロールは関連付ける入力形式（全角・半角など）、文字数、使用できる文字の制限などでエラーが起きる場合は、ユーザーが入力する前に説明するエラーが起きたときに、エラーが起きた箇所を明示して適切な説明をする入力エラーはスクリーンリーダーで読み上げられるようにするエラーの回避方法は具体的に示す必要に応じて、一連のフォームコントロールをグループ化する法律に関わる操作や金融取引などに関する入力フォームでは、入力エラーのチェック、入力内容の確認、送信の取り消しをできるように設計する
音声・映像コンテンツに代替コンテンツを付与する	前後のテキスト、プレイヤーのラベルなどから、音声、映像コンテンツの存在や種別を認知できる 3秒以上のコンテンツでは、自動再生を行わないプレイヤーを用いて、一時停止、停止することができるキーボード操作を用いて、プレイヤーから抜け出すことができる会話の内容や重要な効果音などが伝わるようなキャプション（字幕）を提供する登場人物の動作や表情、場面の移り変わりなど視覚的な情報を音声で伝える「音声解説」を提供する
動的コンテンツをユーザーが操作できるようにする	アニメーション、スライドショーなどのコンテンツでは、一時停止、停止、非表示にすることができる
コンテンツの変化がスクリーンリーダーにも分かるようにする	検索結果の読み込み、ページネーションなどの画面の一部の変更がスクリーンリーダーで読み上げられるチェックボックス、ラジオボタンのオンオフが読み上げられるタブがリンクとして認識され、押下すると、当該タブの内容にフォーカスが移るモーダルを開く場合、押下すると、当該モーダルの内容にフォーカスが移るモーダルを閉じて戻るという挙動が、読み上げたときに自然と理解できるモーダルを閉じる場合、元のコンテンツの位置にフォーカスが戻るトースト・スナップバーなどの実装においては、画面がロックされないポップアップは適切に読み上げを行う（「ダウンロードを開始しています」など）フォーカスされている場合、ポップアップを自動的に閉じない

ウェブアクセシビリティでよく検討して導入すべき項目

アクセシビリティに関するプラグインやソフトウェアは、使い方や使う場所によっては逆にアクセシビリティを損ねることにもつながります。下記の技術は、それぞれの機能や効果をよく理解したうえで導入するようにしましょう。

チェック項目	詳細
アクセシビリティ・オーバーレイなどのプラグインの利用は非推奨	アクセシビリティ・オーバーレイなどのプラグインやソフトウェアで実現できると謳われている機能は、OSの支援技術、アプリの支援技術、ブラウザの機能拡張でほぼすべて実現可能であり、サイトで実装する必要性は極めて低い
文字サイズの変更、読み上げプラグインの利用は非推奨	支援技術が必要なユーザーは、既に OSの支援技術、アプリの支援技術、ブラウザの機能拡張を使っていることが多いため、サイトで支援技術を提供すると過剰対応になってしまう

ウェブアクセシビリティのチェック・診断に関する注意点

ウェブアクセシビリティのチェック・診断を行う際には、いくつかの注意点があります。ここでは、3点について詳しく解説いたします。

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

ウェブアクセシビリティのチェックでは、自動チェックツールの使用と目視確認の併用が推奨されています。

自動チェックツールはプログラムによる機械的なチェックのため、たとえば画像の代替テキストが適切かどうかを機械では判断できないように、すべての問題を発見できるわけではありません。またツールで確認できるのは、網羅すべき確認項目の2割～3割程度にとどまります。

そのため、人間の目による目視チェックと組み合わせることが重要です。ツールを用いた自動チェックと目視チェックをバランスよく実施することで、より多くの問題を発見し、ウェブアクセシビリティの向上につなげることができるでしょう。

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

ウェブアクセシビリティのチェックは、PC、スマートフォン、タブレットなど、多様なデバイスや複数のブラウザを使って行うことが大切です。デバイスやブラウザによって表示や動作が異なる場合があるためです。

たとえば、スマートフォンではPCとは異なる操作性が求められます。またブラウザごとに対応しているHTML・CSSの仕様が異なることもあります。複数の環境でチェックすることで、より多くのユーザーにとって使いやすいウェブサイトを実現できます。

加えて、支援技術を使ってチェックすることも重要です。スクリーンリーダーや音声読み上げソフト、画面拡大ソフトなどを使い、実際に利用する状況を想定してチェックします。可能であれば、視覚障害や聴覚障害など障害当事者の方や、高齢者の方に実際に使ってもらい、フィードバックをもらうことが理想的です。

改善作業後に再度チェックを行う

ウェブアクセシビリティの改善作業を行った後は、必ず再度チェックを実施し、問題が解消されたことを確認する必要があります。部分的な修正が他の部分に影響を与えていないかもチェックしましょう。

またアクセシビリティは一度達成すれば終わりではありません。サイトの更新によって新たな問題が発生する可能性もあるため、定期的・継続的なチェックが必要です。ウェブアクセシビリティの維持・向上には、継続的な取り組みが欠かせません。

ウェブアクセシビリティのチェックツールを活用して改善を進めよう

ウェブアクセシビリティは一朝一夕で達成できるものではなく、継続的な取り組みが求められます。本記事で紹介したチェックツールや優先度別チェックリストを参考に、自社のウェブサイトのアクセシビリティ改善を着実に進めていきましょう。専門的な知識がなくても、ツールを効果的に活用することで、誰もが使いやすいウェブサイトの実現に近づくことができるはずです。

なお、ウェブアクセシビリティの対応は、Webサイトリニューアル時がおすすめです。リニューアル時の要件にアクセシビリティの対応を含めることで、予算を抑えられる可能性があります。

LeadGridチームでは、さまざまな業界のWebサイトリニューアルを支援してきた実績がありますので、ぜひ一度事例集をご確認ください。