WCAG 2.2のレベルAとAAの全55達成基準を網羅したインタラクティブなチェックリストです。各項目にわかりやすい意味、テスト方法、修正方法を付け、WCAGのカラーコントラストチェッカーも備えています。
ほとんどのサイトにとってのWCAGチェックリストは、WCAG 2.2のレベルAとAAの55の達成基準を対象にします（4.1.1 構文解析は削除されました）。主な確認点は、少なくとも4.5:1（大きな文字は3:1）のテキストのコントラスト、キーボードだけでのすべての操作、見えるフォーカス、ラベル付きの入力欄、キャプション、そして少なくとも24 × 24 CSSピクセルのターゲットです。
WCAG 2.2の概要
これはアクセシビリティ評価の作業用バージョンです。WCAG 2.2のレベルAとAAのすべての達成基準を原則ごとにまとめ、それぞれにわかりやすい言葉での意味、数分でできるテスト方法、コードが役立つ場合はコードによる修正方法を付けています。進めながら項目にチェックを入れ、レベルや原則で絞り込み、結果を印刷できます。
レベルAAに適合するには、55の達成基準を満たす必要があります。内訳はレベルAが31、レベルAAが24です。4.1.1 構文解析が廃止扱いとなって削除された後、レベルAAAの31項目を含めると、WCAG 2.2の達成基準は全部で86あります。
達成基準1.4.3では、通常のテキストと背景の間に4.5:1、大きな文字には3:1を求めています。大きな文字とは、少なくとも18ポイント（24 CSSピクセル）、または太字で14ポイント（約18.66 CSSピクセル）のものです。達成基準1.4.11では、アイコン、入力欄の枠線、フォーカスインジケーターに3:1を求めています。
それを保証できるチェックリストはありません。法律は国や業種によって異なり、WCAG 2.1や独自の基準に基づくものもあります。このページは障壁を見つけて取り除くために使い、法令遵守に関する疑問は法律の専門家に相談してください。
WCAG 2.2では9つの達成基準が追加され、そのうち6つがAまたはAAです。フォーカスが隠されない（最低限）、ドラッグ操作、ターゲットのサイズ（最低限）、一貫したヘルプ、冗長な入力、アクセシブルな認証（最低限）です。また、4.1.1 構文解析が削除されました。
各色は、赤、緑、青のチャンネルを線形化し、それぞれ0.2126、0.7152、0.0722の重みを掛けて相対輝度に変換されます。比は、明るいほうの輝度に0.05を足した値を、暗いほうの輝度に0.05を足した値で割ったもので、1:1から21:1までの値になります。
フォーカスされるまで隠れていて、フォーカスされると上部に表示されます。結果の中でTabを押すと確認できます。
focus-visibleを使うと、キーボード利用者にリングが表示されます。outlineの色は背景に対して3:1に達する必要があります。
scroll-paddingで余白を確保し、スクロールして表示されたフォーカス中の要素がバーの下に隠れないようにします。
小さなアイコンボタンは、余白を加えて24 × 24 CSSピクセルまで大きくします。44ピクセルはより厳しいAAAの基準で、スマートフォンではより使いやすくなります。
これを開発者ツールに貼り付けます。これらは達成基準で指定されている値で、適用してもコンテンツが読める状態を保つ必要があります。
メッセージはテキストで、入力欄の隣にあり、直し方を示し、aria-describedbyで関連付けられています。
role=statusの領域は、テキストが変わるとフォーカスを移動させずに穏やかに読み上げられます。
動きを減らしたい人に対して自動再生の動きを止めることは、一時停止、停止、非表示の基準を満たすのにも役立ちます。
正しいautocompleteの値を指定し、貼り付けを禁止しなければ、パスワードを思い出さなくてもログインできます。
画像、アイコン、コントロールには代替テキストがあり、装飾は隠されている。
すべてのimgのalt、アイコンボタンの名前、グラフの要約を確認する。
音声のみのコンテンツには書き起こしが、音のない動画には書き起こしか音声トラックがある。
ポッドキャストや音のない動画をそれぞれ探し、その代替手段があるか確認する。
音声付きの収録動画に同期したキャプションがある。
キャプションをオンにして動画を再生し、あるかどうかだけでなく正確さも確認する。
動画内の視覚だけの情報が解説されているか、テキストで提供されている。
目を閉じて視聴し、重要な情報が失われていないか確認する。
音声付きのライブ配信にキャプションがある。
ライブ用のプレーヤーやサービスがリアルタイムのキャプションに対応しているか確認する。
映像が意味を持つ場面では、収録動画に音声解説がある。
解説付きのバージョンや、画面上のテキストもカバーするナレーションを探す。
見出し、リスト、表、ラベルが、見た目だけでなくマークアップで表現されている。
見出し、リスト、表の見出しセル、ラベルの関連付けを調べる。
コード上の読み上げ順序が意味と一致している。
CSSをオフにするか、スクリーンリーダーのブラウズモードを使い、上から下へ読む。
説明が形、色、大きさ、位置、音だけに頼っていない。
「丸いボタン」や「右側の」といった表現を本文から探す。
どちらかが必須でない限り、コンテンツは縦向きでも横向きでも使える。
スマートフォンを回転させるか、両方の向きをエミュレートする。
個人情報の入力欄が目的を宣言しており、ブラウザーが自動入力できる。
名前、メール、電話番号、住所の入力欄にautocompleteの値があるか確認する。
色だけで意味、状態、リンクを示していない。
グレースケールで表示し、エラーやリンクが区別できるか確認する。
3秒を超えて自動再生される音は、一時停止またはミュートできる。
音を出した状態で各ページを読み込む。
テキストのコントラストが少なくとも4.5:1、大きな文字では3:1である。
下のコントラストチェッカーで、テキストと背景の組み合わせを測る。
コンテンツや機能を損なわずに、テキストを200%まで拡大できる。
200%に拡大し、切れたり重なったりするものがないか確認する。
ロゴを除き、文字の画像ではなく実際のテキストを使っている。
画像になっているバナーやボタンを探す。
コンテンツが幅320 CSSピクセルに、縦横両方向のスクロールなしで収まる。
幅1280ピクセルで400%に拡大する。
アイコン、入力欄の枠線、フォーカスリング、グラフの要素が3:1に達している。
枠線やアイコンを、隣接する色に対して測る。
行、段落、文字、単語の間隔を広げても何も崩れない。
テキスト間隔のブックマークレットか、下のCSSの上書きを適用する。
ツールチップは閉じることができ、その上にポインターを移動でき、離れるまで表示され続ける。
ツールチップにホバーし、その中にポインターを移動し、Escapeを押す。
すべての操作がキーボードだけでできる。
マウスを外して、各タスクを完了する。
どのコンポーネントからも、常にフォーカスを移動できる。
ウィジェット、埋め込み、ダイアログにTabで入り、Tabで出る。
1文字のショートカットは、オフにする、割り当てを変える、フォーカス時のみ動作させる、のいずれかができる。
修飾キーなしで文字や数字を使うショートカットを一覧にする。
制限時間はオフにする、調整する、延長する、のいずれかができる。
セッションのタイムアウトや時間制限のある手順を探す。
動く、点滅する、自動更新されるコンテンツは一時停止できる。
カルーセル、ティッカー、アニメーションする背景を探す。
1秒間に3回を超えて点滅するものがない。
動画やアニメーションに激しい点滅がないか確認する。
スキップリンクやランドマークにより、繰り返されるブロックを飛ばせる。
読み込み直後にTabを1回押し、「コンテンツへスキップ」があるか確認する。
各ページに内容を説明するタイトルがある。
サイト全体でブラウザーのタブのタイトルを読む。
意味や操作性を損なわない順序でフォーカスが移動する。
Tabで順に移動し、飛びがないか確認する。
リンクのテキストが、その前後の文脈とあわせてリンク先を示している。
すべてのリンクを一覧にし、単独の「こちらをクリック」や「続きを読む」を指摘する。
メニューと検索、またはサイトマップなど、ページを見つける方法が複数ある。
検索、サイトマップ、または完全なメニューがあるか確認する。
見出しとラベルが、その主題や目的を説明している。
見出しの構造だけを読み、意味が通じるか確認する。
キーボードのフォーカスインジケーターが見える。
Tabで移動し、現在位置が常にわかるか確認する。
フォーカスされた要素が、固定バーやバナーで完全に隠されない。
Cookieバナーと固定ヘッダーが表示された状態でTabで移動する。
軌跡やマルチポイントのジェスチャに、シングルポインターの代替手段がある。
ピンチ、スワイプ、描画の操作にボタンがあるか確認する。
操作は指を離したときに実行されるか、中止または取り消しができる。
押してからドラッグで外れ、指を離す。何も実行されないことを確認する。
アクセシブルな名前に、表示されているラベルのテキストが含まれている。
開発者ツールで、表示されているラベルと算出された名前を比較する。
振る、傾けるといった機能にはボタンによる代替手段があり、オフにできる。
端末の動きを使う機能を探す。
ドラッグで行う操作は、すべてシングルクリックやタップでも行える。
スライダー、並べ替え可能なリスト、地図をドラッグなしで操作してみる。
ターゲットは少なくとも24 × 24 CSSピクセルあるか、24ピクセルの円が他と重ならない間隔がある（例外あり）。
小さなアイコンやインラインのコントロールを測る。
ページが主な言語を宣言している。
html要素のlang属性を確認する。
別の言語の箇所がlangでマークされている。
他の言語の引用やフレーズを探す。
要素にフォーカスしても、コンテキストが変化しない。
すべてのコントロールにTabで移動し、送信やページ移動が起きないことを確認する。
設定を変更しても、予告なくコンテキストが変化しない。
セレクトボックスやラジオボタンを変更し、予期しないページ移動がないか確認する。
繰り返し表示されるナビゲーションは、同じ相対的な順序を保つ。
複数のページでメニューを比較する。
同じ機能を持つコンポーネントは、同じ方法でラベル付けされている。
ページ間で検索、カート、ダウンロードのコントロールを比較する。
繰り返し表示されるヘルプの選択肢は、同じ相対的な順序で表示される。
各ページで、お問い合わせ、チャット、ヘルプのリンクの位置を比較する。
入力エラーが特定され、テキストで説明されている。
フォームを空のまま、また不正なデータで送信する。
入力が必要な箇所の入力欄に、ラベルまたは説明がある。
すべての入力欄に、見えるラベルと形式のヒントがあるか確認する。
修正方法がわかっている場合、エラーメッセージがそれを提案する。
エラーの文言を読み、入力の直し方が書かれているか確認する。
重要な送信は、取り消し、確認、または最終確認ができる。
購入手続きとアカウント削除を最後まで試す。
一連の手続きの中ですでに入力した情報が、自動入力されるか選択できる。
1つの流れの中で、住所やメールの入力欄が繰り返されていないか探す。
ログインに、代替手段のない記憶テストやパズルが不要で、貼り付けが許可されている。
パスワードの貼り付けを試し、パズル以外の選択肢があるか確認する。
カスタムのコントロールが、名前、役割、状態を支援技術に公開している。
アクセシビリティツリーでカスタムウィジェットを調べる。
ステータスメッセージが、フォーカスを移動させずに読み上げられる。
カートへの追加や検索結果の表示を実行し、読み上げを聞く。
知覚可能
操作可能
理解可能
堅牢
インタラクティブなWCAG 2.2 A・AAチェックリスト
印刷またはPDFとして保存
レベルで絞り込む
原則で絞り込む
すべてのレベル
レベル{level}
すべての原則
表示中の{shown}件の達成基準のうち{ticked}件にチェック済み。チェックはこのタブを開いている間だけ保持されます。
テスト：
適合
不適合
{label}のカラーピッカー
{label}の16進数
WCAGカラーコントラストチェッカー
WCAG 2.2の定義にある相対輝度の計算式を使います。6桁の16進数カラーコードを入力してください。
テキスト
背景
通常のテキストのサンプル、16ピクセル標準。
大きな文字のサンプル、24ピクセル。
コントラスト比 {ratio}:1
#1f2937のような有効な16進数カラーコードを2つ入力してください。
AAの基準値に対する結果
用途
必要な値
結果
通常のテキスト（1.4.3）
大きな文字（1.4.3）
アイコン、枠線、フォーカスリング（1.4.11）
通常のテキスト、AAA（1.4.6）
無料で始める · クレジットカード不要