無料のアクセシビリティツール

ウェブアクセシビリティチェッカー

URLを入力すると、そのページと主要ページ最大4件を実際のブラウザで読み込み、WCAG 2.2のレベルAおよびAAのルールで検査します。問題ごとに、該当する要素、ページ、スクリーンショット、そして誰に影響するかの説明を表示します。

無料。主要ページを最大5つ、約1分でテストします。

このツールで確認する項目

  • サイトを代表する5ページ

    入力したページに加え、サイトの種類に応じて、そのページのリンクから選んだ最大4ページを検査します。ECサイトならコレクション、商品、カート、コンテンツページ、それ以外のサイトなら料金、お問い合わせ、記事、サービスなどのページです。テンプレートは使い回されるため、商品ページを1つ調べれば、通常はすべての商品ページに共通する問題がわかります。

  • レンダリング後のページにWCAGのルールを適用

    各ページを1366 × 900のChromiumで読み込み、ページのスクリプトが実行された後に、Dequeのオープンソースのルールエンジンであるaxe-coreが、WCAG 2.0、2.1、2.2のレベルAおよびAAのルールを実行します。そのため、テーマやアプリがブラウザ上でページを組み立てたときに初めて生じる問題も検出できます。

  • 影響度と達成基準

    不合格となった各ルールについて、影響度（重大、深刻、中程度、軽微）、対応するWCAGの達成基準、影響を受ける要素数とページ数を表示します。

  • 問題のある要素を枠で表示

    要素の例のHTMLと、その要素を枠で囲んだページのスクリーンショットを表示します。ご自身や開発担当者が、推測に頼らずにテンプレート内の該当箇所を見つけられます。

  • 人が判断すべき項目

    背景画像の上にあるテキストのように、axe-coreがコントラストを測定できず判定できないものは「要確認」として表示します。不合格としてカウントされることはありません。

  • キーボード操作のテスト

    最初のページでTabキーを40回押し、フォーカスの移動先を記録します。フォーカスがそもそも移動するか、ループに閉じ込められないか（Cookieバナー内でよく起こります）、最初の移動先がスキップリンクか、そしてフォーカスを受けた要素のうち、目に見えるフォーカスインジケーターがないものはどれかを確認します。最後の項目はヒューリスティックな判定のため、「要確認」として表示します。

確認できないこと

  • スクリーンリーダーが実際に何を読み上げるかは確認できません。ソフトウェアで確認できるのはボタンに名前があることまでで、その名前が読み上げられたときに意味が通じるかどうかはわかりません。
  • 動画や音声のキャプション、書き起こし、音声解説は評価できません。
  • 説明がわかりやすいか、エラーメッセージが利用者の問題解決に役立つかといった、認知面やコンテンツに関する基準は評価できません。
  • ログイン、パスワード、ボット対策の内側にあるページの検査や、チェックアウト手続きを最後まで進めることはできません。
  • サイトがWCAGに適合しているか、何らかの法律を順守しているかは判断できません。自動ルールで見つかるのは問題の一部であり、残りは人による確認が必要です。

なぜ重要なのか

アクセシビリティの問題は、テンプレートの小さなミスが大きな影響を生んでいることがよくあります。アイコンだけのカートボタンにアクセシブルな名前がないと、単に「ボタン」と読み上げられ、スクリーンリーダーの利用者には何のボタンかわかりません。コントラスト比4.5:1に届かない白地にグレーの文字は、ロービジョンの多くの人にとって読みにくく、明るい日差しの下でスマートフォンを使う人にとっても同じです。

同じヘッダー、商品カード、フッターがすべてのページに表示されるため、テンプレートを1か所直すだけで、数百件の不合格がまとめて解消されることがあります。そのため結果は、該当箇所を1件ずつ別の問題として並べるのではなく、ルールごとにまとめ、要素数とページ数を添えて表示します。

アクセシビリティには、多くの国で法的な側面もあります。スキャンでは、ある法律が適用されるかどうかや、その要件を満たしているかどうかはわかりません。スキャンで得られるのは、ご自身のページにある実際の問題を日付付きでまとめた一覧です。いずれにしても、それが実践的な出発点になります。

結果の読み方

重大
一部の人がその要素をまったく使えなくなるおそれがある問題です。たとえば、ラベルのないフォーム入力欄や、名前のないボタンです。最優先で修正してください。
深刻
一部の人にとって作業が大幅に難しくなる問題です。たとえば、コントラスト比を満たさない本文テキストです。
中程度
使いにくさや混乱を招きますが、通常は回避して利用できる問題です。
軽微
小さな問題や煩わしさです。次にそのテンプレートを編集するときに直しておく価値があります。
WCAGの達成基準
1.1.1や1.4.3など、ルールの横にある番号は、そのルールが検査する達成基準です。達成基準が記載されていないルールは、WCAGの要件ではなくベストプラクティスです。
要素数とページ数
ルールに不合格となった要素の数と、検査したページのうち何ページで不合格だったかを示します。すべてのページで不合格となるルールは、通常、ヘッダー、メニュー、フッターなどの共通部分に原因があります。
要確認
axe-coreが判定できなかった項目です。要素をご自身で確認してください。合格の場合も不合格の場合もあります。これらの項目は不合格としてカウントされません。
フォーカストラップ
Tabキーを押しても、同じいくつかの要素の間をフォーカスが循環し続けました。それらがCookieバナーの要素であれば、キーボード利用者はページの残りの部分にたどり着けない可能性があります。
フォーカスが移動しない（Focus doesn’t move）
Tabキーを押しても、どの要素にもフォーカスが当たりませんでした。リンクやボタンがdiv要素やspan要素で作られているか、スクリプトがキー入力を横取りしている可能性があります。
スキップリンク
最初のTab移動先が「本文へスキップ」リンクかどうかです。これがないと、キーボード利用者はページごとにヘッダー全体をTabキーで移動しなければなりません。なお、ランドマークや見出しによってもWCAG 2.4.1（ブロックスキップ）を満たすことができます。
目に見えるフォーカスインジケーターなし
フォーカスを受けたときに、アウトライン、ボックスシャドウ、下線のいずれも確認できなかった要素です。色の変化など別のスタイルで見えている場合もあるため、ご自身でTabキーを押して確認してください。

よくある問題の修正方法

  • コントラスト比を満たさないテキスト

    通常のテキストは背景に対して4.5:1以上、大きなテキスト（約24 px、または太字で約18.7 px）は3:1以上が必要です。要素ごとではなく、テーマ設定やデザイントークンで色を変更し、その後プレースホルダーテキスト、ホバー時の状態、画像の上のテキストをもう一度確認してください。

  • 代替テキストのない画像

    意味のある画像には、商品名や色など、何が写っているか、または何をするものかを伝えるalt属性を付けます。装飾的な画像には空のalt（alt=""）を指定し、スクリーンリーダーが読み飛ばすようにします。Shopifyでは商品の「メディア」セクションで画像から代替テキストを追加し、WordPressではメディアライブラリの「代替テキスト」欄で入力します。

  • ラベルのないフォーム入力欄

    各入力欄には、入力欄のidと一致する<label for>でラベルを関連付けるか、表示テキストがない場合はaria-labelを使います。プレースホルダーテキストだけをラベル代わりにしないでください。入力を始めた途端に消えてしまいます。よく問題になるのは、メールマガジンの登録欄やヘッダーの検索ボックスです。

  • アクセシブルな名前のないボタンやリンク

    カート、検索、メニュー、SNSプロフィールなどのアイコンボタンは、中身がSVGだけということがよくあります。そのボタンが何をするのかを示す表示テキストかaria-label（「アイコン」ではなく「カートを開く」など）を追加し、SVG自体にはaria-hidden="true"を指定します。

  • フォーカスを閉じ込めるCookieバナー

    バナーのすべてのボタンにTabキーで移動でき、EnterキーやSpaceキーで操作できること、バナーを閉じるとページにフォーカスが戻ること、ページの操作を妨げないタイプのバナーはそもそもフォーカスを保持しないことを確認してください。同意管理ツールの設定を見直し、スクリプトが古い場合は更新しましょう。

  • CSSで消されたフォーカスのアウトライン

    スタイルシートで、リンク、ボタン、:focusに対するoutline: noneやoutline: 0を探してください。それを:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }のような目に見えるスタイルに置き換えます。

このツールに関するご質問

このアクセシビリティチェッカーは無料ですか？

はい。会員登録は不要で、サイトを所有または管理していることを確認するだけです。有料のアクセシビリティ改善レポートでは、サイトマップから最大20ページの追加、キーボードのみでの操作テスト、320 pxでのリフロー確認、不合格となったマークアップをもとにした修正前後のコード、AIプロンプト、PDF、5回の再テストが加わります。

自動チェッカーでWCAGのどこまでを検査できますか？

一部だけです。ルールで確認できるのは、画像に代替テキストがあることであって、そのテキストが画像を説明しているかどうかではありません。同様に、入力欄にラベルがあることは確認できても、そのラベルがわかりやすいかどうかは確認できません。結果は確実な問題の一覧として扱い、残りはキーボードとスクリーンリーダーで検査してください。

スキャンで何も見つからなければ、サイトはADAやWCAGに準拠していることになりますか？

いいえ。サイトがWCAGに適合していること、またはADA（障害を持つアメリカ人法）、欧州アクセシビリティ法（EAA）、その他の法律を順守していることを示せる自動テストはありません。問題が見つからなかったという結果は、検査したページで自動ルールによる不合格が見つからなかったことを意味するだけです。

ステージングサイトやログインが必要なページを検査できますか？

ログイン、パスワード、ボット対策の内側にあるページは検査できません。ボット対策によってスキャンがブロックされる場合は、FixReportsScannerというユーザーエージェントを許可するか、公開されているステージング環境のコピーを検査してください。

問題を修正したのに、結果が変わらないのはなぜですか？

同じURLについては、過去1時間以内のスキャン結果が再利用されることがあります。1時間経過するのを待ち、ページキャッシュやCDNのキャッシュを削除してから、もう一度検査してください。

出典

関連ツール

アクセシビリティ改善レポート（$174、1回払い）は、無料スキャン全体を出発点に、追加のページ、すべての指摘に対する変更内容、PDF、修正を検証する再テストを加えます。

アクセシビリティ改善レポートについて