開発者なら入れておきたい、無料のアクセシビリティテストツール
ここで紹介するツールは、1回40分まで無料で使えるJAWS以外はすべて無料で、多くは1分ほどで導入できます。チェックツールは、ルールで判定できる問題を見つけます。それ以外はキーボードとスクリーンリーダーで確かめます。
ブラウザーで使うチェックツール
WAVE(新しいタブで開きます)
Chrome・Edge・Firefox拡張機能、またはウェブ版
WebAIMが提供。エラー、注意点、見出しの横にアイコンを直接表示するので、問題の多さと場所が数秒でわかります。私がどのサイトでも最初に使うツールです。
Lighthouse(新しいタブで開きます)
Chrome(標準搭載)
DevToolsを開いてLighthouseを選び、アクセシビリティの監査を実行します。100点満点のスコアと、不合格のルールが表示されます。最初の確認には便利ですが、100点でもページが使えるとは限りません。
axe DevTools(新しいタブで開きます)
Chrome・Edge・Firefox拡張機能(無料版)
Lighthouseと同じaxe-coreのルールでページを検査し、問題ごとに該当する要素と直し方を一覧にします。
Accessibility Insights for Web(新しいタブで開きます)
Chrome・Edge拡張機能
Microsoftが提供。FastPassでは自動チェックを実行し、Tabキーでの移動順をページ上に図示します。Assessmentでは、人が確認すべき項目を一つずつ案内します。
コントラスト
WebAIM Contrast Checker(新しいタブで開きます)
ウェブ版
文字色と背景色を入力すると、コントラスト比と、通常の文字・大きな文字それぞれでWCAGのAAとAAAを満たすかを表示します。
Colour Contrast Analyser(新しいタブで開きます)
Windows・macOSアプリ
TPGiが提供。画面上の色をスポイトで直接拾えるので、画像の上の文字など、コードから色を読み取れない場合に使えます。
スクリーンリーダー
NVDA(新しいタブで開きます)
Windows(無料ダウンロード)
Windows用の無料・オープンソースのスクリーンリーダー。利用者と同じく、ChromeやFirefoxで確認します。
JAWS(新しいタブで開きます)
Windows(有料、1回40分まで無料)
Freedom Scientificの有料スクリーンリーダー。ライセンスがなくても40分間使え、パソコンを再起動すると再び使えます。ChromeかEdgeで確認します。
VoiceOver(新しいタブで開きます)
Mac・iPhone・iPad(標準搭載)
MacではCommand+F5で、iPhoneやiPadでは「設定」›「アクセシビリティ」でオンにします。Safariで確認します。
TalkBack(新しいタブで開きます)
Android(標準搭載)
「設定」›「ユーザー補助」でオンにして、スマートフォンのChromeでサイトを確認します。
開発・CIで
axe-core for Playwright, Puppeteer and WebdriverIO(新しいタブで開きます)
npmパッケージ
同じルールをE2Eテストで実行し、新しい不合格があれば公開前にビルドを止めます。
eslint-plugin-jsx-a11y(新しいタブで開きます)
React(エディター内)
代替テキストの欠落、ラベルのないコントロール、クリックできるdivなどを入力中に指摘します。Svelteでは、コンパイラーが同様の多くを標準で警告します。
EaseWeb MCPサーバー
Claude Code・Cursor・VS Code
修正ガイドを、コーディングエージェントのツールとして使えます。利用者が困ること、コードでの直し方、人が確認すべき項目を返します。無料で、ログインは不要です。
私がざっと確認するときの手順
私はまずWAVEを使います。エラーの数と、ページ上の問題の横に出るアイコンで、時間をかける前に、そのサイトの状態が数秒でわかります。対象はトップページ、商品やサービスのページ1つ、主要なフォームです。そのうえで、必要に応じて次の確認をします。
- 同じページでaxe DevToolsを実行し、問題ごとの該当箇所と直し方を確認して修正します。
- Accessibility InsightsでTabキーの移動順を図示してから、同じページを自分でTabキーで進みます。
- VoiceOver、NVDA、JAWSのいずれかをオンにして、読み上げを聞きながらもう一度進みます。
- 画像や動画の上の文字は、Colour Contrast Analyserで確認します。
どの無料ツールでもわからないこと
代替テキストの内容が正しいか、フォーカスの順序が自然か、エラーメッセージが役に立つか。こうした点はルールでは判定できず、WCAGが求めることの多くを占めています。
どこから始めればよいかわからない方へ
はじめての診断
$495
$252お得:各項目を個別にご依頼の場合は$747
固定料金(米ドル)。5営業日以内に結果をお届けします。
作業範囲を決めていただく必要はありません。確認する箇所はこちらで選びます。その後、本格的な診断をご依頼いただく場合は、この料金を全額、診断料金に充当します。
診断を申し込む内容
- トップページと、ご相談のうえ選ぶ主要なテンプレート2つ
- 購入、予約、問い合わせなど、事業に欠かせない操作を1つ
- 最初に直すべき問題を優先順に、理由とあわせて一覧に
- 全体の作業量の見込みと、次に取るべき対応のご提案
適合を保証するものではありません。現状と、次に取るべき対応を明らかにするための診断です。