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

WCAG 2.2チェッカー

WCAG 2.2のレベルAおよびAAの55の達成基準それぞれについて、サイトの現状を確認できます。各達成基準には4つのステータスのいずれかが付くため、自動テストでカバーできた範囲と、まだ人が確認すべき範囲を区別できます。

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

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

  • レベルAとAAのすべての達成基準

    レベルAの31項目とレベルAAの24項目、計55の達成基準を、番号と名称を付けてWCAGの順序で表示します。4.1.1(構文解析)は、WCAG 2.2で廃止とされているため除外しています。

  • 自動検査の結果を達成基準に対応付け

    入力したページと主要ページ最大4件でaxe-coreのルールを実行し、各結果を、そのルールが検査する達成基準に対応付けます。いずれかのルールが、検査したいずれかのページで不合格になると、その達成基準は不合格になります。

  • キーボード操作による根拠

    最初のページでTabキーを40回押すテストの結果を、2.1.2(キーボードトラップなし)に反映します。また、ヒューリスティックな判定として「要確認」の扱いで、2.4.7(フォーカスの可視化)にも反映します。

  • 判定できない結果は区別して表示

    画像の上にあるテキストのように、ルールが結論を出せない場合、その達成基準は合格でも不合格でもなく「要確認」と表示されます。

  • スコアではなく、未検査の範囲を明示

    自動ルールでカバーされない達成基準は「手動確認」と表示します。検査していない部分を覆い隠してしまうような、パーセンテージへの平均化は行いません。

確認できないこと

  • 人の判断が必要な達成基準は判定できません。たとえば、1.4.10(リフロー)、1.4.11(非テキストのコントラスト)、キャプションや音声解説に関する1.2の達成基準、フォームのエラーに関する3.3.1から3.3.4です。
  • 「自動検査で不合格なし」を合格として扱うことはできません。実行されて合格したルールがカバーするのは、そのルールが検査する範囲だけです。
  • 適合表明、アクセシビリティステートメント、VPATを作成することはできません。適合性は、ページ全体と一連のプロセス全体を対象に、人が判断するものです。
  • レベルAAAや、スキャン対象の5ページ以外のページは検査できません。
  • ログインやチェックアウトの先にある手順には到達できません。3.3.7(冗長な入力)や3.3.8(アクセシブルな認証(最低限))などの達成基準は、通常そうした手順に適用されます。

なぜ重要なのか

WCAGは達成基準の形で書かれており、監査担当者、調達チーム、アクセシビリティステートメントも、達成基準を単位としてサイトを説明します。不合格となったルールの一覧からは、何を直すべきかがわかります。達成基準ごとの表示からは、そのサイトについて現時点で何が言えて、何がまだ言えないかがわかります。

自動ツールが扱えるのは、レベルAとAAの達成基準の半分にも満たない範囲です。axe-coreがルールを対応付けているのは、55のうち約25の達成基準です。残りについては、信頼できる自動テストがありません。エラーメッセージが修正方法を提案しているか(3.3.3)や、幅320 CSSピクセルでもページが機能するか(1.4.10)は、ソフトウェアには判断できません。これらを手動確認として示すことで、まだ検査が必要な箇所がわかります。

自動検査で不合格がない達成基準でも、実際には満たしていないことがあります。1.1.1(非テキストコンテンツ)のルールは画像に代替テキストがあるかを確認しますが、alt="IMG_2041.jpg"が写真を見られない人にとって役に立たないことまでは判断できません。

結果の読み方

不合格
この達成基準に対応する自動ルールのうち少なくとも1つが、検査したページで不合格になりました。これは確実な問題です。その原因となった要素とページは、アクセシビリティチェッカーで確認できます。
要確認
グラデーション上のテキストのコントラストなど、自動検査が判定できなかったものが見つかりました。人がその要素を確認する必要があります。
自動検査で不合格なし
この達成基準に対応するaxe-coreのルールが少なくとも1つ実行され、合格しました。これは適合を意味しません。ルールがカバーするのは、達成基準が求める内容の一部だけです。
検査対象なし
この達成基準には自動ルールがありますが、検査したページにはルールが確認する対象がありませんでした。たとえば、キャプションのルールに対する動画や、ラベルのルールに対するフォームがない場合です。サイトの他の場所にそうしたコンテンツがある場合は、手動で検査してください。
手動確認
この達成基準をカバーする自動ルールがないため、スキャンでは合否のどちらについても何も言えません。手動で検査してください。
レベルAとレベルAA
レベルAは最低限の水準です。WCAGを引用する方針や規定では通常レベルAAが指定されており、レベルAAにはレベルAのすべての達成基準が含まれます。

よくある問題の修正方法

  • 4.1.2(名前・役割・値)が不合格

    div要素やspan要素で作られたカスタムコントロール(メニュー、タブ、アコーディオン、トグル)は、それが何であるか、開いているかどうかを支援技術に伝えません。可能な限りネイティブの<button>を使って名前を付け、aria-expandedやaria-pressedを設定して、状態が読み上げられるようにします。

  • 1.3.1(情報及び関係性)が不合格

    構造は、スタイルだけでなくマークアップで表現する必要があります。太字の段落ではなく本物のh2要素やh3要素を、リストにはulやolを、表の見出しにはscope付きのthを、入力欄のグループにはlabelや、legend付きのfieldsetを使います。

  • 3.1.1(ページの言語)が不合格

    html要素にlang属性を追加します。たとえば<html lang="en">です。WordPressのテーマでは、通常language_attributes()で出力されます。Shopifyのテーマでは、layout/theme.liquidで<html lang="{{ request.locale.iso_code }}">を使います。

  • 2.5.8(ターゲットのサイズ(最低限))が不合格

    小さなアイコンや密集したリンクは、指で押しにくくなります。各ターゲットを24 × 24 CSSピクセル以上にするか、小さなターゲットそれぞれを中心に直径24 pxの円を描いたとき、その円がほかのターゲットと重ならないように間隔を空けます。パディングを使えば、アイコンを変えずにターゲットを大きくできます。

  • 手動確認の進め方

    すぐにできるものから始めましょう。1.4.10(リフロー)では、幅1280 pxのブラウザウィンドウを400%に拡大し、横スクロールが必要な箇所がないか確認します。2.4.7と2.4.11では、ページ内をTabキーで移動し、フォーカスが常に見えていて、固定ヘッダーやCookieバナーの後ろに隠れないことを確認します。3.3.1では、誤りのある内容でフォームを送信し、エラーがテキストでわかりやすく説明されるかを確認します。

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

WCAG 2.2では、レベルAとAAで何が変わりましたか?

6つの達成基準が追加されました。2.4.11(フォーカスの非隠蔽(最低限))、2.5.7(ドラッグ動作)、2.5.8(ターゲットのサイズ(最低限))、3.2.6(一貫したヘルプ)、3.3.7(冗長な入力)、3.3.8(アクセシブルな認証(最低限))です。WCAG 2.2では、このほかにレベルAAAの達成基準が3つ追加され、4.1.1(構文解析)が削除されています。

4.1.1(構文解析)が一覧にないのはなぜですか?

WCAG 2.2では4.1.1(構文解析)が廃止とされ、削除されました。この基準が対象としていたマークアップの誤りに、ブラウザや支援技術がもはや依存していないためです。W3Cは、WCAG 2.0と2.1においても、HTMLコンテンツについてはこの基準を常に満たしているものとして扱うと注記しています。

WCAG 2.2を満たせば、WCAG 2.1も満たしたことになりますか?

はい。WCAG 2.2には後方互換性があり、2.2に適合するコンテンツは2.1と2.0にも適合します。そのため2.2で検査すれば、多くの方針や規定がいまも引用している旧バージョンもカバーできます。

これを使ってアクセシビリティステートメントやVPATを作成できますか?

出発点にはなりますが、適合性の評価報告書ではありません。ステートメントやVPATには、すべての達成基準の評価が必要で、その多くは人が行います。「手動確認」と「要確認」の一覧を見れば、まだ人による評価が必要な基準がわかります。

多くの達成基準が「手動確認」になっているのはなぜですか?

それらに対応する自動ルールが存在しないためです。制限時間を延長できるか、ヘルプがどのページでも同じ場所にあるか、ログインに記憶力のテストが必要かといった点は、ルールで読み取れるマークアップではなく、人がサイトをどう使うかによって決まります。

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

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