WCAG 2.2：各要件の評価方法

何かを伝える非テキストコンテンツにテキストによる代替がある

• ルールが一部を判定する
• 必要なもの：ブラウザーの開発者ツール

1. 写真、アイコン、ロゴ、グラフ、地図、図、動画のポスター画像、ボタンやリンクの中の画像など、テキストでないコンテンツをページ全体から探してください。
2. それぞれを開発者ツールの [Elements] パネルで選択し、アクセシビリティ ペインで Name を読んでください。
3. 名前がなく、支援技術から隠されてもいない (alt=""、aria-hidden="true"、role="presentation"、または CSS の背景によって) ものをすべて控えてください。
4. 背景画像、アイコンフォント、content プロパティで追加された画像など、CSS だけで表示される情報も探してください。読むべき alt 属性がないため、それぞれを調べ、表示されている内容がスクリーンリーダーの読み上げるテキストでも提供されているか確認してください。
5. グラフや地図など、短い言葉では説明できないコンテンツについては、名前が少なくともそれが何であるかを示し、より詳しい説明がページ上にあるか、隣にリンクされていることを確認してください。

合格の条件

利用者に必要なすべての非テキストコンテンツにテキストによる代替があるか、装飾であるため支援技術から隠されています。

不合格の条件

何かを伝える非テキストコンテンツにテキストによる代替がなく、スクリーンリーダーの利用者には名前のない画像が示されるか何も示されないため、WCAG 1.1.1 を満たしません。

これを検査するルール：img-alt-present, role-img-text-alternative-present, canvas-text-alternative-present, embed-text-alternative-present, svg-text-alternative-present, svg-image-text-alternative-present, object-text-alternative-present, video-poster-text-alternative-present, meter-name-present, progressbar-name-present

コントロールとして使われる画像やアイコンに、その働きを示す名前がある

• ルールが一部を判定する
• 必要なもの：ブラウザーの開発者ツール

1. ホームへリンクするロゴ、検索の虫眼鏡、ダイアログを閉じる×印など、内容が画像やアイコンだけのリンク、ボタン、その他のコントロールをすべて見つけてください。
2. それぞれを開発者ツールの [Elements] パネルで選択し、アクセシビリティ ペインで Name を読んでください。
3. 名前が、画像に写っているもの (「虫眼鏡」) やファイル名ではなく、コントロールの働きや移動先 (「検索」「閉じる」「ホーム」) を示しているか確認してください。

合格の条件

画像やアイコンでできたすべてのコントロールに、その働きや移動先を示す名前があります。

不合格の条件

画像やアイコンでできたコントロールに名前がないか、名前が働きではなく画像を説明しているため、WCAG 1.1.1 を満たしません。

これを検査するルール：input-image-alt-present, area-alt-present

装飾的な画像だけが支援技術から隠されている

• 人だけが確認できる
• 必要なもの：ブラウザーの開発者ツール

1. 枠線、区切り線、背景画像、飾り、隣のテキストがすでに内容を伝えている画像など、装飾のためだけの画像、アイコン、グラフィックをページから探してください。
2. それぞれを開発者ツールの [Elements] パネルで選択し、アクセシビリティ ペインで無視されている (alt=""、aria-hidden="true"、role="presentation"、または CSS の背景) ことを確認してください。
3. ページ内に描かれた装飾的な SVG については、aria-hidden="true" があることを確認してください。これがないと、ブラウザーとスクリーンリーダーの組み合わせによっては、名前のない画像として読み上げたり、中のテキストを読んだりします。
4. 次に逆の確認をしてください。そのように隠されている各画像について、なくなった場合に利用者が何か (情報、ラベル、グラフのデータ) を失うかを考えます。

合格の条件

装飾的な画像は支援技術から隠されており、隠されている画像はすべて本当に装飾です。

不合格の条件

装飾的な画像が (多くの場合ファイル名で) 読み上げられるか、情報を伝える画像が支援技術から隠されているため、WCAG 1.1.1 を満たしません。

各テキストによる代替が、画像が伝えるものを伝えている

• ルールが一部を判定する
• 必要なもの：ブラウザーの開発者ツール

1. テキストによる代替を持つ各画像やその他の非テキストコンテンツについて、代替 (開発者ツールのアクセシビリティ ペインの Name) を読み、ページ上のその位置でコンテンツを見てください。
2. その位置でコンテンツが読み手に何を伝えているかを考え、代替が同じものを伝えているか確認してください。画像化された文字ならその文字、写真ならそれが示す要点、グラフならそれが示す事実です。
3. グラフや図などの複雑な画像に対して代替がその名前しか示していない場合は、詳細が隣のキャプション、テキスト、表、または横のリンクにあり、スクリーンリーダーの利用者が画像からそれを見つけられることを確認してください。
4. ファイル名、ウェブアドレス、「画像」「写真」のような言葉である代替や、すぐ隣のテキストを繰り返している代替を控えてください。
5. 各代替の言語を確認してください。ページの言語で書かれているか、その言語が指定されていることが望ましいです。

合格の条件

各テキストによる代替が、その位置でコンテンツが伝えるものを、直接、またはスクリーンリーダーの利用者がそこからたどれる説明によって伝えています。

不合格の条件

ファイル名、汎用的な言葉、データがどこにも示されていないグラフの名前など、テキストによる代替がコンテンツの伝えるものを伝えていないため、WCAG 1.1.1 を満たしません (F30)。

これを検査するルール：area-alt-quality, canvas-text-alternative-quality, embed-text-alternative-quality, img-alt-decorative, img-alt-quality, input-image-alt-decorative, input-image-alt-quality, object-text-alternative-quality, svg-text-alternative-quality

CAPTCHA が目的を示し、別の感覚を使う形式も提供している

• 人だけが確認できる
• 必要なもの：スクリーンリーダー

1. 入力させる歪んだ文字、選ばせる画像、ドラッグさせるパズルなど、ページが人とプログラムを見分けるために使っているテストを見つけてください。
2. 答えを明かすことなく、それが何であり何をすればよいかを示すテキストによる代替があることを確認してください。
3. 視覚によるテストに対する音声版のように別の感覚を使う形式、またはメールで送られるコードのようにまったく別の方法が提供されていることを確認してください。
4. スクリーンリーダーとキーボードで、その別の形式を試してください。

合格の条件

ページにそのようなテストがないか、テストが何であるかを示し、別の感覚を使って完了できる形式を提供しています。

不合格の条件

テストが見ることによってしか (または聞くことによってしか) 合格できないか、それが何であるかを示すテキストがないため、WCAG 1.1.1 を満たしません。

収録済みの音声だけ及び映像だけのメディアに、トランスクリプトまたは同等の代替がある

• ルールが一部を判定する
• 必要なもの：ブラウザーのみ

1. フレーム内のものも含め、ページ上のすべての音声プレーヤーと音のない動画を見つけ、それぞれを再生してください。
2. 音声については、プレーヤーの隣やページのほかの場所に、トランスクリプトまたはそのリンクがあるか探してください。
3. 音のない動画については、トランスクリプト、または表示されるすべてを説明する音声版があり、ページからキーボードで見つけて再生できるか探してください。
4. それぞれの代替をメディアと比べ、発話、重要な音、表示される内容について、同じ情報を伝えているか確認してください。
5. それ自体がページ上のテキストに対する代替であり、そのことが明示されているメディアは除外してください。

合格の条件

収録済みの音声だけ又は映像だけの各メディアに、同じ内容を伝えるトランスクリプト (映像の場合は音声版でも可) があるか、ページ上のテキストに対する代替であることが明示されています。

不合格の条件

収録済みの音声だけのメディアにトランスクリプトがないか、収録済みの映像だけのメディアに、同じ情報を伝えるトランスクリプトも音声版もないため、WCAG 1.2.1 を満たしません。

これを検査するルール：media-alternative-transcript-evidence

音声付きの収録済み動画にキャプションがある

• 人だけが確認できる
• 必要なもの：ブラウザーのみ

1. フレーム内のものやほかのサイトのプレーヤーも含め、ページ上の音声付きの収録済み動画をすべて見つけてください。
2. それぞれを音を出して再生し、その音声が情報 (発話や重要な音) を伝えているかを控えてください。
3. 情報を伝えている場合は、プレーヤーの CC ボタン、映像に焼き込まれたキャプション、または隣にリンクされた同じ動画のキャプション付き版など、キャプションを探してください。トランスクリプトだけではキャプションの代わりになりません。
4. それ自体がページ上のテキストに対する代替であり、そのことが明示されている動画は除外してください。

合格の条件

音声が情報を伝える収録済みの動画すべてに、その場で、または隣にリンクされたキャプション付き版でキャプションがあるか、ページ上のテキストに対する代替であることが明示されています。

不合格の条件

収録済みの動画にせりふや重要な音があるのに、トランスクリプトが提供されていても、その場にもリンクされたキャプション付き版にもキャプションがないため、WCAG 1.2.2 を満たしません。

これを検査するルール：video-caption

キャプションが、すべてのせりふ、話者、重要な音を、動画と同期して伝えている

• 人だけが確認できる
• 必要なもの：ブラウザーのみ

1. キャプション付きの各動画を、音を出し、キャプションをオンにして再生してください。
2. 最初から最後まで、キャプションを話されている内容や聞こえる音と比べてください。
3. キャプションがすべてのせりふを伝え、話者がわかりにくい場合は誰が話しているかを示し、重要な音 (音楽、警報音、笑い声) を説明しており、映像と同期し続けていることを確認してください。
4. 自動生成されたキャプションは注意して扱ってください。名前、数字、句読点を誤ることが多く、音を説明しないため、編集しない限りこの達成基準を満たすことはまれです。

合格の条件

キャプションが、すべてのせりふ、必要な場合は話者、重要な音を、動画と同期して伝えています。

不合格の条件

キャプションがせりふや重要な音を省いている、必要な場合に誰が話しているかを示していない、または動画との同期がずれているため、WCAG 1.2.2 を満たしません (F8)。

音声付きの収録済み動画に、音声解説または完全なテキストによる代替がある

• 人だけが確認できる

これにはまだ手順がありません。

音声付きのライブ動画にキャプションがある

• 人だけが確認できる

これにはまだ手順がありません。

音声付きの収録済み動画に音声解説がある

• 人だけが確認できる

これにはまだ手順がありません。

見出しに見えるテキストが、ページのアウトラインに合ったレベルの見出しとしてマークアップされている

• ルールが一部を判定する
• 必要なもの：ブラウザーの開発者ツール, スクリーンリーダー

1. ページを見て、周囲のテキストより大きいか太く、後に続く内容を導入している、見出しとして機能するテキストをすべて控えてください。
2. それぞれについて、開発者ツールの [Elements] パネルで、<h1> から <h6> のいずれかであるか、aria-level 付きの role="heading" を持つことを確認してください。
3. 逆も確認してください。ページ上の各見出し要素が、テキストを大きくするためだけに使われているのではなく、内容を導入していることを確認します。
4. スクリーンリーダーの見出し一覧、HeadingsMap などのブラウザー拡張機能、またはアクセシビリティ ペインで見出しを一覧にし、そのレベルがページの見た目の構造と一致しているか確認してください。セクションの小見出しは、そのセクションの見出しと同じレベルやそれより上ではなく、その下に位置します。h2 の後に h4 が続くなど、レベルが飛んでいるだけであれば、入れ子が正しい限りこの達成基準を満たさないことにはなりません。ベストプラクティスの問題として記録してください。

合格の条件

見た目の見出しはすべて見出しとしてマークアップされ、見出し要素はすべて実際に見出しであり、レベルがページのアウトラインに従っています。

不合格の条件

見出しに見えるテキストが通常のテキストである、見出し要素が大きさのためだけに使われている、またはレベルがアウトラインと矛盾しているため、スクリーンリーダーの利用者がセクションを見つけたりたどったりできず、WCAG 1.3.1 を満たしません。

これを検査するルール：p-as-heading

リストとして表示されるコンテンツがリストとしてマークアップされている

• ルールが一部を判定する
• 必要なもの：ブラウザーの開発者ツール

1. メニュー、手順、リンクのグループなど、行頭記号や番号、または同じレイアウトで横や縦に並んだ項目として、リストのように表示されているコンテンツをページから探してください。
2. それぞれについて、開発者ツールの [Elements] パネルで、<ul>、<ol>、<dl> のいずれかである (または role="listitem" の項目を持つ role="list" がある) ことを確認してください。
3. 各リストの直接の子がリスト項目だけであり、各リスト項目がリストの中にあることを確認してください。
4. VoiceOver と Safari でテストする場合、list-style: none で行頭記号を消したリストは、role="list" がない限り Safari がリストとして公開しないことに注意してください。これはページの不備ではなくブラウザーの方針ですが、リストの構造が利用者にとって重要な場合は控えてください。

合格の条件

リストとして表示されるコンテンツがリストとしてマークアップされ、リストのマークアップに欠けがありません。

不合格の条件

リストとして表示されるコンテンツが段落、改行、div の連続であるか、リストのマークアップが壊れているため、スクリーンリーダーがリストであることや項目数を伝えず、WCAG 1.3.1 を満たしません。

これを検査するルール：list-children-valid, listitem-parent-valid, definition-list-children-valid, dlitem-parent-valid

データテーブルの見出しとキャプションがマークアップされ、レイアウトのためだけの表には見出しのマークアップがない

• ルールが一部を判定する
• 必要なもの：ブラウザーの開発者ツール, スクリーンリーダー

1. ページ上のすべての表と、表を使わずに作られたデータのグリッドをすべて見つけてください。
2. データの表については、開発者ツールの [Elements] パネルで、見出しセルが <th> であり (行見出しか列見出しかが明らかでない場合は scope 付き)、表の上に表示されているタイトルが <caption> であることを確認してください。
3. 見出しが複数の階層にわたる複雑な表については、各データセルが headers 属性または scope によって見出しを示していることを確認してください。
4. スクリーンリーダーでいくつかのデータセルを移動し、見出しが一緒に読み上げられることを確認してください。
5. レイアウトのためだけに使われている表については、<th>、<caption>、summary がないことを確認してください。

合格の条件

データは見出しとキャプションがマークアップされた表に入っており、スクリーンリーダーが各セルの見出しを読み上げ、レイアウト用の表には見出しのマークアップがありません。

不合格の条件

データの表に見出しのマークアップがないかセルに偽のキャプションがある、データが表を使わずにグリッド状に配置されている、またはレイアウト用の表がデータとしてマークアップされているため、WCAG 1.3.1 を満たしません。

これを検査するルール：table-headers-attr-valid, table-th-has-data-cells, table-fake-caption, td-has-header

フォームフィールドが見えるラベルに、フィールドのグループがグループ名を示すテキストに関連付けられている

• ルールが一部を判定する
• 必要なもの：ブラウザーの開発者ツール, スクリーンリーダー

1. テキストフィールド、チェックボックス、ラジオボタン、ドロップダウン、カスタムコントロールなど、ページ上のすべてのフォームフィールドを見つけてください。
2. それぞれを開発者ツールの [Elements] パネルで選択し、アクセシビリティ ペインの Name に見えるラベルが含まれていることを確認してください。
3. ラジオボタンや 3 つに分かれた日付など、1 つの質問に属するフィールドのグループについては、各フィールドとともに質問が読み上げられるように、グループが <legend> 付きの <fieldset> であるか、名前付きの role="group" を持つことを確認してください。
4. フィールドの隣に表示される指示 (形式、必須の印) が、aria-describedby でフィールドに関連付けられているか、ラベルの中にあることを確認してください。

合格の条件

各フィールドの名前に見えるラベルが含まれ、フィールドのグループには質問による名前があり、フィールドの指示がフィールドに関連付けられています。

不合格の条件

フィールドが関連付けられていない近くのテキストだけでラベル付けされているか、グループの質問がフィールドに関連付けられていないため、スクリーンリーダーがフィールドの目的を伝えずに読み上げ、WCAG 1.3.1 を満たしません。

これを検査するルール：form-control-programmatic-label-present

ARIA のロールと関係性が、ページの見た目と同じ構造を伝えている

• ルールが一部を判定する
• 必要なもの：ブラウザーの開発者ツール

1. カスタムのメニュー、タブ、ツリー、グリッド、リスト、リストボックスなど、ARIA のロールで作られたページの部分を見つけてください。
2. それぞれについて開発者ツールのアクセシビリティツリーを開き、示される構造が画面上の表示と一致しているか確認してください。tablist が tab を含み、menu が menuitem を含み、grid が row と cell を含んでいることなどです。
3. ロールを持つ要素に、そのロールが必要とする親や子が欠けていないこと、また aria-owns を使っている場合は各要素に所有者が 1 つだけであることを確認してください。
4. <body> が aria-hidden="true" で隠されていないことを確認してください。

合格の条件

アクセシビリティツリーがページの見た目の構造を伝えており、すべてのロールがそのロールに必要な位置にあります。

不合格の条件

ロールに必須の親や子が欠けている、二重に所有されている、またはページがツリーから隠されているため、支援技術が画面と一致しない構造を伝え、WCAG 1.3.1 を満たしません。

これを検査するルール：aria-hidden-body, aria-required-children, aria-prohibited-children, aria-required-parent, aria-roles-valid, aria-owns-valid

太字、色、位置、アスタリスクなど、スタイルやレイアウトで示される意味が、マークアップまたはテキストでも示されている

• 人だけが確認できる
• 必要なもの：ブラウザーの開発者ツール, スクリーンリーダー

1. アスタリスクや色で示された必須フィールド、強調や取り消し線の付いた語、スタイルで示された選択中の項目、枠で区別されたテキストなど、見た目だけで示されている意味を探してください。
2. それぞれについて、同じ意味がマークアップ (required、aria-current、<em>、<del> など) またはテキスト自体 (「必須」「現在のページ」) にあるか確認してください。
3. CSS の content プロパティで追加されたテキストやアイコンを確認してください。スクリーンリーダーがそれを読むかどうかはブラウザーによって異なるため、CSS だけで追加される情報は、マークアップまたはテキストにもある必要があります。
4. それらの部分をスクリーンリーダーで読み、スタイルが示す内容が読み上げられることを確認してください。

合格の条件

スタイルやレイアウトが伝える内容は、すべてマークアップまたはテキストにもあります。

不合格の条件

色だけ、または説明のないアスタリスクだけで示された必須フィールドなど、意味がスタイルや位置だけで示されているため、スクリーンリーダーの利用者がそれを見落とし、WCAG 1.3.1 を満たしません。

支援技術がコンテンツを読む順序で意味が保たれ、テキストのレイアウトにスペースが使われていない

• 人だけが確認できる

これにはまだ手順がありません。

指示が、形、色、大きさ、位置、向き、音だけに頼っていない

• 人だけが確認できる

これにはまだ手順がありません。

一方の向きが必要不可欠でない限り、ページが縦向きと横向きの両方で機能する

• ルールが一部を判定する
• 必要なもの：ブラウザーの開発者ツール

1. 開発者ツールのデバイスツールバー、またはスマートフォンやタブレットでページを開いてください。
2. 縦向きで表示した後で横向きに回転させ (またはその逆)、それぞれの向きでメインコンテンツとコントロールを操作してください。
3. 画面の回転ロックをオフにした実際のスマートフォンやタブレットで結果を確かめてください。デバイスツールバーでは、ページがスクリプトで向きを固定しているか、インストールされたウェブアプリの場合はマニフェストで固定しているかがわかりません。
4. ページが、デバイスを回転させるよう求めたり、コンテンツを横倒しにしたり、一方の向きでコンテンツを隠したりしないことを確認してください。
5. そうしている場合は、銀行の小切手やピアノの鍵盤のように、その向きが必要不可欠かを考えてください。

合格の条件

ページが両方の向きで表示されて機能するか、一方の向きがページにとって必要不可欠です。

不合格の条件

必要不可欠な理由がないのに、デバイスの回転を求める、コンテンツを回転させる、またはコンテンツを隠すことによって、ページが一方の向きでしか機能しないため、WCAG 1.3.4 を満たしません。

これを検査するルール：css-orientation-lock

利用者に関する情報を求めるフィールドが、正しい autocomplete の値で目的を示している

• ルールが一部を判定する
• 必要なもの：ブラウザーの開発者ツール

1. 氏名、メールアドレス、電話番号、住所、誕生日、ユーザー名、パスワード、カード情報など、ページを利用している本人に関する情報を求めるフィールドをすべて見つけてください。
2. それぞれについて、開発者ツールの [Elements] パネルで autocomplete 属性を読んでください。
3. それが、フィールドが求める内容に合った値 (name、email、tel、street-address、postal-code、bday、username、new-password、cc-number など) であることを確認してください。
4. autocomplete="off" を持つフィールドや autocomplete 属性のないフィールドは、ブラウザーが入力を提案する場合でも、目的を特定していません。
5. 贈り物の受取人など、ほかの人について尋ねるフィールドは除外してください。ただし、適切な section や値でそのことを示している場合を除きます。
6. 対象となるのは、WCAG の入力目的の一覧にある目的だけです。たとえば会員番号や顧客番号のフィールドには、その一覧に該当する値がなく、値は不要です。

合格の条件

利用者本人の情報を求めるすべてのフィールドに、それに合った autocomplete の値があります。

不合格の条件

利用者本人の情報を求めるフィールドに autocomplete の値がないか値が誤っているため、ブラウザーや支援ツールが入力したり目的を示したりできず、WCAG 1.3.5 を満たしません。

これを検査するルール：autocomplete-valid

情報の提示、反応の要求、要素の区別に、色だけが使われていない

• ルールが一部を判定する
• 必要なもの：ブラウザーの開発者ツール

1. 段落内のリンク、必須または無効なフィールド、選択中のタブや日付、グラフの系列、赤や緑で示される状態など、ページが色で伝えている情報を探してください。
2. それぞれについて、下線、アイコン、テキストのラベル、模様、枠線、形の変化など、色以外のものでも伝えているか確認してください。
3. 段落内のリンクが色だけで区別されている場合は、ホバー時とフォーカス時に下線などの印が付くこと、またリンクの色と周囲のテキストのコントラスト比が 3:1 以上であることを確認してください。
4. ページをグレースケールで表示し (開発者ツールの [レンダリング] パネルで achromatopsia をエミュレートします)、失われる情報がないことを確認してください。

合格の条件

ページが色で伝えているものは、すべて別の方法でも伝えられています。

不合格の条件

どのフィールドにエラーがあるか、どのテキストがリンクかなどの情報が色だけで伝えられているため、WCAG 1.4.1 を満たしません。

これを検査するルール：link-in-text-block

3 秒より長く自動で再生される音を、一時停止、停止、または音量を下げることができる

• 人だけが確認できる
• 必要なもの：キーボード

1. 音を出した状態でページを読み込み、音楽、動画、広告など、自動で始まる音がないか聞いてください。
2. 3 秒より長く音が再生される場合は、ページの上部やプレーヤーの近くに、それを一時停止または停止する手段、あるいはコンピューター全体の音量とは別にその音量を下げる手段があるか探してください。
3. そのコントロールをキーボードで見つけて操作できることを確認してください。

合格の条件

3 秒より長く自動で再生される音はないか、ページの冒頭近くにあるコントロールでそれを一時停止、停止、または音量を下げることができます。

不合格の条件

音が 3 秒より長く自動で再生され、コンピューター全体の音量以外にそれを一時停止、停止、または小さくする手段がないため、スクリーンリーダーの音声がかき消され、WCAG 1.4.2 を満たしません。

これを検査するルール：no-autoplay-audio

テキストと背景のコントラスト比が 4.5:1 以上 (大きな文字は 3:1 以上) である

• ルールが一部を判定する
• 必要なもの：ブラウザーの開発者ツール

1. 薄いグレーのテキスト、色付きのパネル上のテキスト、プレースホルダー、画像やグラデーションに重なるテキスト、ボタン内のテキストなど、背景に対して薄く見えるテキストをページから探してください。
2. それぞれを調べ、開発者ツールの [Styles] ペインで色の見本をクリックしてください。カラーピッカーに背景とのコントラスト比が表示されます。
3. カラーピッカーは、CSS で指定された背景色に対して測定します。テキストが画像、グラデーション、半透明のレイヤーの上にある場合や、テキストの色が opacity やブレンドモードによって決まる場合は、ピッカーの数値は信頼できないため、代わりに次の手順を使ってください。
4. 背景が画像、グラデーション、半透明のレイヤーである場合は、コントラスト計算ツールを使い、テキストが最も見えにくい部分の背景に対してテキストを測定してください。
5. コントラスト比が 4.5:1 以上、大きな文字 (24 ピクセル (18 ポイント) 以上、または 18.66 ピクセル (14 ポイント) 以上の太字) では 3:1 以上であることを確認してください。
6. 結果を四捨五入しないでください。4.49:1 は不合格です。状態によってコントラストが下がることがあるため、ホバー時、フォーカス時、選択時などのほかの状態のテキストも確認してください。
7. ロゴやブランド名、無効になっているコントロールのテキスト、装飾にすぎないテキストや誰にも見えないテキスト、写真の中の道路標識のようにほかの重要なコンテンツを含む画像の一部であるテキストは除外してください。

合格の条件

すべてのテキストと文字画像の背景とのコントラスト比が 4.5:1 以上 (大きな文字は 3:1 以上) です。

不合格の条件

テキストと背景のコントラスト比が 4.5:1 (大きな文字は 3:1) 未満で、ロービジョンの人が読めないため、WCAG 1.4.3 を満たしません。

これを検査するルール：contrast-minimum, contrast-computable

コンテンツや機能を損なうことなく、テキストを 200% までサイズ変更できる

• ルールが一部を判定する
• 必要なもの：ブラウザーのズーム

1. ブラウザーを 200% にズームしてください。
2. ページ全体を確認し、すべてのテキストが大きくなり、切り取られたり重なったり隠れたりしているテキストがないことを確認してください。
3. そのサイズでページのコントロール、メニュー、フォームを操作し、すべてが引き続き機能することを確認してください。
4. スマートフォンで、ピンチ操作でページを 200% までズームできることを確認してください。ズームを強制的に有効にするユーザー補助設定をオフにした Android の Chrome を使ってください。iOS の Safari はズームを禁止するビューポートの指定を無視するため、この不合格が見えなくなることがあります。
5. キャプションと文字画像は除外してください。

合格の条件

200% で、すべてのテキストが大きくなって読める状態を保ち、すべてが引き続き機能します。

不合格の条件

200% でテキストが切り取られる、重なる、大きくならない、コントロールが機能しなくなる、またはピンチズームが禁止されているため、WCAG 1.4.4 を満たしません。

これを検査するルール：meta-viewport-zoom-enabled

ロゴのように見た目が必要不可欠な場合を除き、テキストが画像ではなくテキストとして表示されている

• 人だけが確認できる
• 必要なもの：ブラウザーの開発者ツール

1. バナー、見出し、ボタン、引用、メニューなど、文字を含む画像を探してください。
2. ポインターでその中の単語を選択してみるか、要素を調べてください。選択できないテキストは、たいてい画像、SVG の描画、canvas の中にあります。
3. それぞれについて、CSS でスタイルを付けた実際のテキストで同じ表示ができないかを考えてください。
4. ロゴやブランド名、フォントの見本のように文字の特定の見た目が必要不可欠な画像、および画像内のテキストのフォント、サイズ、色を利用者が設定できるページのように、利用者が好みに合わせて変更できる文字画像は除外してください。

合格の条件

テキストは実際のテキストであるか、文字画像がロゴであるか、正確な見た目を必要としています。

不合格の条件

スタイルを付けたテキストでも同じ見た目にできる文字が画像として表示されており、利用者がサイズ、色、間隔を変更できないため、WCAG 1.4.5 を満たしません。

これを検査するルール：image-of-text

幅 320 CSS ピクセルで、コンテンツに 2 方向のスクロールが不要で、何も失われない

• 人だけが確認できる

これにはまだ手順がありません。

コントロールの存在と状態を示す部分のコントラスト比が 3:1 以上である

• 人だけが確認できる

これにはまだ手順がありません。

グラフィックの理解に必要な部分のコントラスト比が 3:1 以上である

• 人だけが確認できる

これにはまだ手順がありません。

style 属性で強制された間隔が、テキストへの利用者の間隔の適用を妨げていない

• ルールが一部を判定する
• 必要なもの：ブラウザーの開発者ツール

1. 開発者ツールの [Elements] パネルで、ページのマークアップから !important を検索し (Ctrl+F、Mac では Cmd+F)、line-height、letter-spacing、word-spacing を指定している style 属性内の一致箇所をすべて控えてください。
2. それぞれについて、[Computed] タブで結果の値を読み、line-height はフォントサイズの 1.5 倍、letter-spacing は 0.12 倍、word-spacing は 0.16 倍と比べてください。
3. 値がそれより小さい場合は、ウィンドウの幅を 320 CSS ピクセルまで狭め、そのテキストが 2 行以上に折り返すか確認してください。
4. 開発者ツールの [Styles] ペインで、* に line-height: 1.5 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important を指定するスタイルルールと、p に margin-bottom: 2em !important を指定するルールを新たに追加してください。style 属性が優先されるため、その要素は自身の値を保ちます。
5. そのテキストが切り取られる、ほかのテキストと重なる、または隠れるかを確認してください。

合格の条件

折り返すテキストに対してそれらの値を下回る間隔を強制している style 属性はないか、強制されたテキストが間隔を適用してもすべて表示されます。

不合格の条件

折り返すテキストに対して style 属性がそれらの値を下回る間隔を強制しているため、ブックマークレットやブラウザー拡張機能で利用者の間隔を適用できず、その間隔ではテキストが重なるか切り取られ、WCAG 1.4.12 を満たしません。

これを検査するルール：avoid-inline-spacing

1.4.12 の間隔を適用しても、テキストが切り取られたり重なったりしない (ブラウザーで測定)

• ルールが一部を判定する
• 必要なもの：ブラウザーの開発者ツール, キーボード

1. 開発者ツールの [Styles] ペインで、* に line-height: 1.5 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important を指定するスタイルルールと、p に margin-bottom: 2em !important を指定するルールを新たに追加してください。[Styles] ペインで追加したルールは、ページのセキュリティポリシーによってブロックされません。
2. ページ全体をスクロールし、切り取られる、ほかのテキストと重なる、または消えるテキストを探してください。画像の一部であるテキストは対象外です。
3. ほかの確認で使う幅でも同じことを行ってください。テキストが最も折り返し、最も切り取られやすい幅 320 CSS ピクセルも含めます。
4. テキストが切り取られている場合は、「続きを読む」リンクや枠を広げるボタンなど、テキスト全体を表示する手段をページが提供しているか確認してください。キーボードで操作でき、間隔を適用したままでテキスト全体を表示できる場合にだけ認めます。

合格の条件

すべてのテキストが見えて読める状態を保っているか、切り取られたテキストをキーボードで全文表示できます。

不合格の条件

間隔を適用するとテキストの一部が切り取られる、重なる、または失われ、別の方法で全文を表示することもできないため、WCAG 1.4.12 を満たしません。

これを検査するルール：text-spacing-content-loss

1.4.12 の間隔を適用しても、コントロール、メニュー、フォームが機能し続け、すべてのテキストを表示する

• 人だけが確認できる
• 必要なもの：ブラウザーの開発者ツール, キーボード, マウスなどのポインティングデバイス

1. 開発者ツールの [Styles] ペインで、* に line-height: 1.5 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important を指定するスタイルルールと、p に margin-bottom: 2em !important を指定するルールを新たに追加してください。
2. ページ上の各コントロールを操作してください。メニューやドロップダウンを開き、フォームに入力して送信し、タブを切り替え、ダイアログを開閉します。
3. それぞれが引き続き反応すること、位置がずれたテキストがコントロールを覆っていないこと、すべてのラベルとボタンがテキストをすべて表示していることを確認してください。

合格の条件

間隔を適用しても、すべてのコントロールが引き続き機能し、テキストをすべて表示しています。

不合格の条件

間隔を適用すると、コントロールが機能しなくなる、覆われて操作できなくなる、または働きを示すテキストが失われるため、WCAG 1.4.12 を満たしません。

1.4.12 の間隔を適用しても、操作後にだけ表示されるコンテンツ (メニュー、ダイアログ、タブ、メッセージ) がすべてのテキストを保つ

• 人だけが確認できる
• 必要なもの：ブラウザーの開発者ツール, キーボード, マウスなどのポインティングデバイス

1. 開発者ツールの [Styles] ペインで、* に line-height: 1.5 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important を指定するスタイルルールと、p に margin-bottom: 2em !important を指定するルールを新たに追加してください。
2. 何かを操作した後にだけページが表示するコンテンツを表示させてください。各メニューとダイアログを開き、各タブに切り替え、折りたたまれた各セクションを展開し、各ツールチップを表示し、誤りを含むフォームを送信してエラーメッセージを表示します。
3. ページ本体と同様に、それぞれについて、切り取られる、ほかのテキストと重なる、または消えるテキストがないか確認してください。
4. テキストが切り取られている場合は、「続きを読む」リンクや枠を広げるボタンなど、テキスト全体を表示する手段をページが提供しているか確認してください。キーボードで操作でき、間隔を適用したままでテキスト全体を表示できる場合にだけ認めます。

合格の条件

操作後に表示されるコンテンツが、間隔を適用してもすべてのテキストを見えて読める状態に保っているか、切り取られたテキストをキーボードで全文表示できます。

不合格の条件

間隔を適用すると、メニュー、ダイアログ、タブ、ツールチップ、メッセージ内のテキストが切り取られるか重なり、別の方法で全文を表示することもできないため、WCAG 1.4.12 を満たしません。

ホバーやフォーカスで表示される追加のコンテンツを、ポインターやフォーカスを動かさずに消すことができる

• 人だけが確認できる

これにはまだ手順がありません。

ホバーで表示される追加のコンテンツの上にポインターを移動しても、コンテンツが消えない

• 人だけが確認できる

これにはまだ手順がありません。

ホバーやフォーカスで表示される追加のコンテンツが、消されるか、ポインターやフォーカスが離れるか、内容が有効でなくなるまで表示され続ける

• 人だけが確認できる

これにはまだ手順がありません。

すべての機能をキーボードだけで操作できる

• 人だけが確認できる
• 必要なもの：キーボード

1. スクリーンリーダーをすべてオフにしてください。スクリーンリーダーはブラウズモードで、キーボードだけでは到達できない要素も作動させられるため、不合格が隠れてしまいます。
2. ページを再読み込みし、どこもクリックせずに Tab キーを繰り返し押してページ全体を移動してください。通過したリンク、ボタン、フィールド、その他のコントロールをすべて控えます。
3. ポインターでクリックやドラッグができるものと比べ、コントロール、メニュー項目、スクロール可能なボックス、地図の一部、カスタムウィジェットなど、キーボードで一度も到達できないものを控えてください。
4. 各コントロールをキーボードで操作してください。作動させるには Enter または Space、メニュー、タブ、リスト、スライダーの中では矢印キー、開いたものを閉じるには Escape を使います。
5. カスタムウィジェットについては、タブリストでの矢印キーなど、その種類のウィジェットについて WAI-ARIA Authoring Practices が示すキーと比べてください。一般的でないキーでしか機能しないウィジェットも、ページがそのキーを説明していればこの達成基準を満たす場合がありますが、ユーザビリティの問題として記録してください。
6. キーボードで到達や操作ができないものがある場合は、カルーセルの前へ・次へボタンのように、同じことをキーボードだけで行える別の手段をページが提供しているか確認してください。ポインターでできることをすべて行える場合にだけ認めます。
7. フリーハンドの描画など、ポインターの軌跡に依存するものは除外してください。

合格の条件

ページでポインターを使ってできることはすべて、直接、または同じ役割を果たす別の手段によって、キーボードだけで行えます。

不合格の条件

ポインターでしか行えないことがあり、同じことをキーボードで行う手段がないため、WCAG 2.1.1 を満たしません。

これを検査するルール：iframe-focusable-content, server-side-image-map-absent, scrollable-region-focusable, mouse-only-event-handlers, click-handler-keyboard-operable, widget-keyboard-focusable, focus-not-removed-by-script

ページのどの部分からも、キーボードで常にフォーカスを移動できる

• 人だけが確認できる

これにはまだ手順がありません。

1 つの文字、数字、記号でできたショートカットを、オフにするか割り当て直すことができるか、そのコントロールにフォーカスがあるときだけ機能する

• 人だけが確認できる

これにはまだ手順がありません。

リアルタイム、必要不可欠、または 20 時間を超える場合を除き、各制限時間を解除、調整、または延長できる

• ルールが一部を判定する
• 必要なもの：ブラウザーのみ

1. 終了するセッション、期限切れになるフォーム、自動で更新されたり次へ進んだりするページ、消えるコンテンツなど、一定時間後に起きることをページから探してください。
2. ページのソースを確認し、しばらくページ上で待って、<meta http-equiv="refresh"> や無操作の後のサインアウトなど、知らされていない制限時間を見つけてください。
3. サーバー側で終了するセッションについては、推測せずにチームにその長さを尋ね、その時点で警告が表示されるのを待ってください。警告はスクリーンリーダーで確認してください。表示されるだけでなく、読み上げられる必要があります。
4. 各制限時間について、次のうち少なくとも 1 つが当てはまることを確認してください。制限時間に達する前に解除できる。少なくとも元の長さの 10 倍まで調整できる。終了前に警告され、キーを押すなどの簡単な操作で延長するための時間が少なくとも 20 秒あり、少なくとも 10 回延長できる。
5. オークションなどのリアルタイムのイベントの一部である制限時間、時間制限のある試験など必要不可欠な制限時間、20 時間より長い制限時間は除外してください。

合格の条件

すべての制限時間を解除、調整、または延長できるか、リアルタイム、必要不可欠、または 20 時間を超えるものです。

不合格の条件

制限時間によってセッション、フォーム、ページが終了し、それを解除、調整、延長する手段がないため、WCAG 2.2.1 を満たしません。

これを検査するルール：meta-refresh-timing-absent

自動で始まり 5 秒より長く続くアニメーションを、一時停止、停止、または非表示にできる

• 人だけが確認できる
• 必要なもの：キーボード

1. ページを読み込み、カルーセル、スクロールするテキスト、アニメーション、背景動画など、自動で動く、点滅する、またはスクロールするものがないか見てください。
2. 自動で始まり、5 秒より長く続き、ほかのコンテンツと並行して表示されるものごとに、それを一時停止、停止、または非表示にするコントロールを探してください。
3. そのコントロールをキーボードで見つけて操作できること、また動きを遅くするだけでなく止めることを確認してください。
4. 読み込み中の進行状況インジケーターなど、必要不可欠な動きは除外してください。

合格の条件

ほかのコンテンツと並んで 5 秒より長く自動で動く、点滅する、またはスクロールするものはすべて、一時停止、停止、または非表示にできます。

不合格の条件

コンテンツがほかのコンテンツと並んで 5 秒より長く自動で動く、点滅する、またはスクロールし、それを一時停止、停止、非表示にする手段がないため、WCAG 2.2.2 を満たしません。

これを検査するルール：moving-content-pausable, deprecated-elements-not-used

自動で更新されるコンテンツを、一時停止、停止、非表示にするか、更新の頻度を下げることができる

• 人だけが確認できる
• 必要なもの：キーボード

1. ニュースティッカー、ライブのスコア、価格、フィード、タイマーなど、自動で変わるコンテンツがないかページを見てください。
2. 自動で始まり、ほかのコンテンツと並行して表示されるものごとに、それを一時停止、停止、非表示にするか、更新の頻度を選ぶコントロールを探してください。
3. そのコントロールをキーボードで見つけて操作できることを確認してください。
4. ページの目的にとって必要不可欠な更新は除外してください。

合格の条件

ほかのコンテンツと並んで自動で更新される部分はすべて、一時停止、停止、非表示にするか更新を遅くすることができるか、その更新が必要不可欠です。

不合格の条件

コンテンツがほかのコンテンツと並んで自動で更新され、それを一時停止、停止、非表示にする手段も、頻度を変える手段もないため、WCAG 2.2.2 を満たしません。

どの 1 秒間にも 3 回を超えて閃光を放つものがないか、閃光が十分に小さく暗い

• 人だけが確認できる

これにはまだ手順がありません。

複数のページで繰り返されるブロックを飛ばせる

• ルールが一部を判定する
• 必要なもの：キーボード, スクリーンリーダー, ブラウザーの開発者ツール

1. ダイアログやオーバーレイを閉じてから、ヘッダー、ナビゲーション、検索、サイドバーなど、サイトのほかのページと共通して繰り返されるブロックを控えてください。
2. ページを再読み込みして Tab キーを 1 回押し、それらのブロックを飛ばしてメインコンテンツへフォーカスを移すスキップリンクが現れるか確認し、Enter でそれをたどってください。
3. 開発者ツールのアクセシビリティ ペイン、またはスクリーンリーダーの一覧で、メインコンテンツが main ランドマークであるか、ナビゲーションの外にある見出しで始まっているかを確認してください。
4. ページにスキップリンクがある場合は、その移動先が存在し、リンクをたどった後の次の Tab キーでメインコンテンツの中へ移動することを確認してください。

合格の条件

ページに繰り返されるブロックがないか、機能するスキップリンク、main ランドマーク、または見出しによって、キーボードやスクリーンリーダーの利用者がそれを飛ばせます。

不合格の条件

繰り返されるブロックを飛ばす手段がなく、キーボードやスクリーンリーダーの利用者がページごとにそれをたどらなければならないため、WCAG 2.4.1 を満たしません。

これを検査するルール：bypass-blocks-present

ページに、その主題や目的を示し、サイトのほかのページと区別できるタイトルがある

• ルールが一部を判定する
• 必要なもの：ブラウザーのみ

1. ブラウザーのタブ、または開発者ツールの [Elements] パネルの <title> で、ページのタイトルを読んでください。
2. 記事の見出しや手続きの段階 (「お届け先住所 - ご注文手続き - ショップ」) など、このページの主題や目的を示していることを確認してください。
3. サイトのほかのページを 2、3 ページ開き、タイトルでページを区別できることを確認してください。サイト名より前にそのページ固有の部分を置くのは良い方法ですが、必須ではありません。
4. シングルページアプリケーションのように、新しいページを読み込まずに内容が変わる場合は、タイトルもそれに合わせて変わることを確認してください。

合格の条件

ページのタイトルがその主題や目的を示し、ほかのページと区別できます。

不合格の条件

ページにタイトルがないか、汎用的なタイトル、ファイル名、またはほかのページと同じタイトルであるため、WCAG 2.4.2 を満たしません。

これを検査するルール：page-title-present, page-title-patterns

Tab キーと Shift+Tab によるフォーカスの移動が、ページの意味を保ち、操作できる順序に従っている

• 人だけが確認できる
• 必要なもの：キーボード

1. ページを再読み込みし、フォーカスの移動先を見ながら、フォーカスがページ全体を一巡するまで Tab キーを繰り返し押してください。
2. その順序を、ページを読んで操作する順序と比べてください。たとえば、フォームのフィールドはラベルの順に、作業の手順はその順番どおりに移動するかを見ます。
3. Shift+Tab でページを戻り、フォーカスが同じ経路を逆にたどることを確認してください。
4. 順序が読む順序と異なる場合は、フォームのフィールドより先に送信ボタンに到達するなど、それによって意味が変わったり操作できなくなったりするかを確認してください。

合格の条件

見た目の順序と多少異なる箇所があっても、フォーカスがページの意味を保ち、すべての部分を操作できる順序でページ内を移動します。

不合格の条件

フィールドが本来の順序どおりに入力されないなど、フォーカスがページ内をあちこちに移動し、意味や操作が変わってしまうため、WCAG 2.4.3 を満たしません。

開いたダイアログ、メニュー、セクションにフォーカスが移動し、ダイアログがページを覆っている間はその中にとどまり、閉じると元に戻る

• 人だけが確認できる
• 必要なもの：キーボード

1. ページにある各ダイアログ、メニュー、ドロップダウン、折りたたまれたセクションを、それを開くコントロールで Enter または Space を押して、キーボードで開いてください。
2. Tab キーを 1 回押し、フォーカスが、背後や離れた場所にあるものではなく、開いたものの中に移る (またはすでにその中にある) ことを確認してください。
3. ページを覆うダイアログでは、すべてのコントロールを一巡するまで Tab キーを押し、フォーカスが背後のページに移らずダイアログの中にとどまることを確認してください。
4. Escape または閉じるボタンで閉じ、フォーカスがそれを開いたコントロール、または次に移るのが妥当な場所に戻ることを確認してください。

合格の条件

フォーカスが開いたものの中に移動し、ダイアログがページを覆っている間はその中にとどまり、閉じると元の場所に戻ります。

不合格の条件

フォーカスが開いたものの背後に残る、ダイアログから背後のページへ移る、または閉じたときにページの先頭に移るため、順序が画面上の表示に沿わなくなり、WCAG 2.4.3 を満たしません。

閉じている、隠れている、または画面外にあるコンテンツにフォーカスが止まらない

• 人だけが確認できる
• 必要なもの：キーボード, ブラウザーの開発者ツール

1. メニューやダイアログを閉じてからページを再読み込みし、フォーカスの位置を見ながら Tab キーでページ全体を移動してください。
2. 1 回以上のキー操作の間、フォーカスが消えたように見えるたびに控えてください。
3. そうした各停止位置で、開発者ツールの [Console] に document.activeElement と入力し、表示された要素が閉じたメニュー、隠れたパネルの中にあるか、画面外にあるかを確認してください。
4. フォーカスを受け取ると現れるスキップリンクは除外してください。フォーカスを受け取った時点で表示されます。

合格の条件

すべてのタブストップが、目に見えるもの、またはスキップリンクのようにフォーカスを受け取ると現れるものの上にあります。

不合格の条件

閉じたメニュー、隠れたパネル、画面外にあるコントロールにフォーカスが止まり、順序が存在しないものを通過するため、WCAG 2.4.3 を満たしません。

各リンクの目的が、リンクテキストだけで、またはリンクテキストとそれを含む文、段落、リスト項目、表のセルから判断できる

• ルールが一部を判定する
• 必要なもの：ブラウザーの開発者ツール, スクリーンリーダー

1. スクリーンリーダーのリンク一覧でページのリンクを一覧にするか、Tab キーでリンクを順に移動して、開発者ツールのアクセシビリティ ペインで各リンクの Name を読んでください。
2. 空の名前、「こちら」「続きを読む」「PDF」、アイコンのファイル名など、移動先や働きを示していない名前のリンクを控えてください。
3. それぞれについて、リンクを含む文、段落、リスト項目、表のセル、またはそのセルの表見出しを読み、それで目的が明らかになるか確認してください。
4. 対象となる文脈は、リンクを含む文、段落、リスト項目、表のセル、その表のセルの見出しセル、リンクが属する見出し、および aria-describedby でリンクに関連付けられたテキストです。別の列の段落など、リンクの近くにあるだけのテキストは対象になりません。
5. 同じ名前で異なる場所へ移動するリンクが、文脈によって区別できることを確認してください。

合格の条件

すべてのリンクの目的が、名前だけで、または名前とそれを含む文、段落、リスト項目、表のセルから明らかです。

不合格の条件

リンクに名前がないか、「続きを読む」のような名前で、周囲のどこにもその目的の説明がないため、WCAG 2.4.4 を満たしません。

これを検査するルール：link-name-present, link-name-quality

サイト内のページを見つける方法が複数ある

• 人だけが確認できる

これにはまだ手順がありません。

見出しが、その後に続くコンテンツを説明している

• 人だけが確認できる
• 必要なもの：スクリーンリーダー

1. スクリーンリーダーの見出し一覧、HeadingsMap などのブラウザー拡張機能、または開発者ツールのアクセシビリティツリーで、ページの見出しを一覧にしてください。
2. 各見出しと、その下のコンテンツを読んでください。
3. 各見出しが、仮の文字列、ファイル名、何の見出しにもなりうる語ではなく、そのコンテンツの主題を示していることを確認してください。
4. 隣り合う同じレベルの見出しを区別できることを確認してください。
5. この達成基準が求めるのは、存在する見出しとラベルが内容を説明していることだけです。見出しやラベルがないことは、ここではなく 1.3.1 または 3.3.2 で確認します。

合格の条件

すべての見出しが、その下のコンテンツの主題を示しています。

不合格の条件

「セクション 1」やファイル名など、見出しがその下のコンテンツを説明していないため、WCAG 2.4.6 を満たしません。

これを検査するルール：heading-quality

ラベルがフィールドを説明しており、同じラベルのフィールドを区別できる

• 人だけが確認できる
• 必要なもの：ブラウザーのみ

1. ページ上のすべてのフィールドとコントロールの見えるラベルを読んでください。
2. 「フィールド 1」や「テキスト」ではなく「メールアドレス」のように、それぞれが何を入力または選択するかを示していることを確認してください。
3. 「氏名」が 2 つあるなど、複数のフィールドが同じラベルを共有している場合は、グループの見出しやラベルの残りの部分によって、どれがどれかをページが明確にしていることを確認してください。

合格の条件

すべてのラベルがフィールドやコントロールの目的を示し、同じラベルのフィールドは区別されています。

不合格の条件

ラベルがフィールドの目的を示していないか、複数のフィールドが同じラベルを持ち、それらを区別するものがないため、WCAG 2.4.6 を満たしません。

これを検査するルール：form-control-label-quality

キーボードフォーカスを受け取るすべての要素が、フォーカスがあることを表示する

• ルールが一部を判定する
• 必要なもの：キーボード

1. ページを再読み込みし、Tab キーでページ全体をゆっくり移動してください。
2. 各停止位置で、アウトライン、色の変化、下線、その他の目に見える変化によって、どの要素にフォーカスがあるかが見えることを確認してください。
3. フォーカスの移動にはマウスではなくキーボードを使ってください。ブラウザーは、マウスでクリックした要素のフォーカスを Tab キーで到達した要素とは異なる方法で表示するため、マウスでのテストではここでは何も証明できません。
4. フォーカスがどこにあるかわからない停止位置と、1 回以上のキー操作の間フォーカスが消えたように見える箇所をすべて控えてください。
5. 矢印キーを使うメニュー、ダイアログ、ウィジェットの中でも同じことを行ってください。
6. Windows でコントラストテーマをオンにし、いくつかの停止位置で繰り返してください。box-shadow や背景色だけで描かれたフォーカスのスタイルは、そのモードでは消えます。WCAG はそこで表示されることを求めていませんが、ベストプラクティスの問題として記録してください。

合格の条件

すべての停止位置で、どの要素にフォーカスがあるかが見えます。

不合格の条件

フォーカスが目に見える変化のない要素に移るか、隠れたものや画面外のものに移るため、キーボードの利用者が現在位置を見失い、WCAG 2.4.7 を満たしません。

これを検査するルール：css-hidden-focus, css-focus-indicator-suppressed, focus-not-removed-by-script

フォーカスを受け取った要素が、ページがその上に重ねるコンテンツによって完全に隠されない

• 人だけが確認できる

これにはまだ手順がありません。

軌跡ベースまたはマルチポイントのジェスチャで行うことを、1 回のタップやクリックでも行える

• 人だけが確認できる

これにはまだ手順がありません。

操作がポインターを押したときではなく離したときに実行されるか、中止または取り消しができる

• 人だけが確認できる

これにはまだ手順がありません。

コントロールの名前に、見えるラベルのテキストが含まれている

• ルールが一部を判定する
• 必要なもの：ブラウザーの開発者ツール

1. ボタン、リンク、フィールド、タブ、メニュー項目、隣のテキストでラベル付けされたコントロールなど、テキストでできた見えるラベルを持つコントロールをすべて見つけてください。
2. それぞれについて、開発者ツールのアクセシビリティ ペインで Name を読んでください。
3. 名前に見えるラベルの語が同じ順序で含まれていること、できれば先頭にあることを確認してください (「購入」と表示されたボタンなら、名前は「次へ」ではなく「購入手続きへ進む」)。
4. 比較の際は、大文字・小文字や句読点の違いは無視してください。画像として表示されたテキストも見えるラベルとみなします。
5. 「×」や「>」など、記号だけでできたラベルは除外してください。その名前は働きを示していることが望ましいです。
6. アイコンだけのボタンなど、見えるテキストのないコントロールは除外してください。照合すべき見えるラベルがありません。

合格の条件

すべてのコントロールの名前に、見えるラベルの語が順序どおりに含まれています。

不合格の条件

コントロールの名前に見えるラベルが含まれていないため、音声入力の利用者が見えている言葉を言ってもそれを作動させられず、WCAG 2.5.3 を満たしません。

これを検査するルール：label-in-name

デバイスを動かして行うことをコントロールでも行え、動きへの反応をオフにできる

• 人だけが確認できる

これにはまだ手順がありません。

ドラッグで行うことを、1 回のタップやクリックでも行える

• 人だけが確認できる

これにはまだ手順がありません。

ターゲットが 24 × 24 CSS ピクセル以上であるか、十分に離れている

• ルールが一部を判定する
• 必要なもの：ブラウザーの開発者ツール

1. アイコン、閉じるボタン、ページ送り、横に並んだリンク、小さなチェックボックスなど、小さなコントロールを探してください。
2. それぞれを調べ、開発者ツールのボックスモデルで、ポインターに反応する領域 (見えているアイコンより大きいことがあります) のサイズを読んでください。24 × 24 CSS ピクセル以上であることを確認します。
3. それより小さい場合は、ターゲットを中心とする直径 24 ピクセルの円が、ほかのターゲット、またはほかの小さなターゲットの円に接するかを確認してください。
4. 文や段落の中のリンク、スタイルを付けずにブラウザーが描画するコントロール、ページのほかの場所に十分な大きさの同等のコントロールがあるもの、地図のピンのようにサイズが必要不可欠なターゲットは除外してください。

合格の条件

すべてのターゲットが 24 × 24 CSS ピクセル以上であるか、ほかから十分に離れているか、例外のいずれかに当たります。

不合格の条件

24 × 24 CSS ピクセルより小さいターゲットがほかのターゲットに近く、直径 24 ピクセルの円が互いに重なり、当てはまる例外もないため、WCAG 2.5.8 を満たしません。

これを検査するルール：target-size-minimum

ページの主な言語がマークアップで示され、それが正しい

• ルールが一部を判定する
• 必要なもの：ブラウザーの開発者ツール

1. 開発者ツールの [Elements] パネルで、<html> 要素の lang 属性を読んでください。
2. それが言語コード (en、fr、pt-BR) であり、ページのテキストの大部分が書かれている言語であることを確認してください。
3. <html> に xml:lang もある場合は、両方が同じ言語を示していることを確認してください。
4. シングルページアプリケーションでは、インターフェースの言語を切り替え、lang もそれに合わせて変わることを確認してください。スクリーンリーダーはその言語の音声がインストールされている場合にだけ音声を切り替えるため、聞こえる内容だけでなく、マークアップで判断してください。

合格の条件

<html> 要素の lang が、ページの大部分が書かれている言語を示しています。

不合格の条件

ページに lang がないか、lang が誤っているか無効であるため、スクリーンリーダーが誤った音声と発音で読み上げ、WCAG 3.1.1 を満たしません。

これを検査するルール：html-lang-attr-present, html-xml-lang-mismatch

ページと異なる言語の文章や語句に、その言語が指定されている

• ルールが一部を判定する
• 必要なもの：ブラウザーの開発者ツール, スクリーンリーダー

1. ページを読み通し、言語選択メニューの選択肢も含め、ページと異なる言語で書かれた文章、引用、語句、物の名前を控えてください。
2. それぞれについて、開発者ツールの [Elements] パネルで、その要素またはそれを囲む要素に、その言語のコードを持つ lang 属性があることを確認してください。
3. 固有名詞、技術用語、英語における「café」のようにページの言語の一部になった語は除外してください。
4. いくつかをスクリーンリーダーで聞き、発音が切り替わることを確認してください。

合格の条件

ほかの言語の文章や語句すべてに、その言語を示す有効な lang 属性が指定されています。

不合格の条件

ほかの言語の文章や語句にその言語が指定されていないか、誤ったコードが指定されているため、誤った発音で読み上げられ、WCAG 3.1.2 を満たしません。

これを検査するルール：valid-lang

要素にフォーカスを移すだけでは、コンテキストが変化しない

• 人だけが確認できる

これにはまだ手順がありません。

利用者に事前に知らせない限り、設定の変更でコンテキストが変化しない

• 人だけが確認できる

これにはまだ手順がありません。

複数のページで繰り返されるナビゲーションが、毎回相対的に同じ順序で現れる

• 人だけが確認できる

これにはまだ手順がありません。

ページ間で同じ働きをするコンポーネントが、同じ方法で識別されている

• 人だけが確認できる

これにはまだ手順がありません。

複数のページで提供されるヘルプが、毎回相対的に同じ位置にある

• 人だけが確認できる

これにはまだ手順がありません。

ページが検出した入力エラーが、どのフィールドがどう誤っているかを示すテキストで表示される

• ルールが一部を判定する
• 必要なもの：キーボード, スクリーンリーダー

1. ページ上の各フォームを見つけ、空のまま送信し、次に誤った値 (形式が正しくないメールアドレス、数値フィールドへの文字、過去の日付) で送信してください。
2. ページが検出した各エラーが、色やアイコンだけでなくテキストで、フィールドの隣または上部の一覧に表示されることを確認してください。
3. そのテキストが、どのフィールドが誤っており、何が誤っているかを示していることを確認してください。
4. ブラウザー自体の検証メッセージもテキストとみなしますが、その文言や画面に表示される時間はブラウザーによって異なります。テストする各ブラウザーで確認してください。
5. スクリーンリーダーで、エラーが読み上げられるか容易に到達できること、また誤った各フィールドが無効とされていることを確認してください。

合格の条件

ページが検出したすべての入力エラーが、フィールドと問題を示すテキストで表示されます。

不合格の条件

入力エラーが色やアイコンだけで示されている、まったく示されていない、またはどのフィールドが誤っているかを示していないため、WCAG 3.3.1 を満たしません。

これを検査するルール：invalid-field-error-message

入力を求めるフィールドに見えるラベルがあり、入力に必要な場合は指示がある

• ルールが一部を判定する
• 必要なもの：ブラウザーの開発者ツール

1. ページ上で入力を求めるすべてのフィールドとコントロールを見つけてください。
2. それぞれに、ホバーや入力をしなくても見えるラベルがあることを確認してください。入力すると消えるプレースホルダーや、ホバー時に表示される title だけではいけません。
3. 日付の形式、パスワードの要件、どのフィールドが必須かなど、入力が規則に従う必要がある場合は、利用者が送信する前にページがそれを示していることを確認してください。
4. この達成基準が求めるのは、ラベルと指示が表示されていることだけです。ラベルがマークアップでフィールドに関連付けられているかは、1.3.1 と 4.1.2 で確認します。

合格の条件

すべてのフィールドに見えるラベルがあり、ページが入力に必要な指示を送信前に示しています。

不合格の条件

フィールドに見えるラベルがなくプレースホルダーやホバー時の title しかないか、入力の規則がエラーの後にしか示されないため、WCAG 3.3.2 を満たしません。

これを検査するルール：form-control-programmatic-label-present, form-control-single-label, form-control-programmatic-label-quality

入力エラーの修正方法がわかっている場合、ページがその方法を示している

• 人だけが確認できる

これにはまだ手順がありません。

法的または金銭的な効力を持つ送信や、保存されたデータを変更する送信を、取り消し、確認、または見直して確定できる

• 人だけが確認できる

これにはまだ手順がありません。

プロセス内で利用者がすでに提供した情報が、再度求められるのではなく、自動入力されるか選択肢として提示される

• 人だけが確認できる

これにはまだ手順がありません。

回避する手段が提供されていない限り、サインインに何かを記憶する、書き写す、解くことが求められない

• 人だけが確認できる
• 必要なもの：ブラウザーのみ

1. テスト用アカウントで、サイトが提供するサインインや本人確認の方法をそれぞれ試してください。
2. 何かを記憶する (パスワード)、書き写す (別のデバイスに届いたコード)、解く (パズル、計算、画像の選択) ことを求める段階をすべて控えてください。
3. パスワードやコードについては、記憶したり入力し直したりしなくて済むように、貼り付けができ、パスワードマネージャーで入力できることを確認してください。
4. パスワードマネージャーが実際にフィールドに入力することを確認してください。ユーザー名とパスワードのフィールドには autocomplete="username" と autocomplete="current-password" (または new-password) が必要で、ワンタイムコードのフィールドは autocomplete="one-time-code" があると最もよく機能します。
5. コードが 1 桁ずつのボックスに分かれている場合は、最初のボックスにコード全体を貼り付け、すべてのボックスに入力されることを確認してください。貼り付けを禁止するボックスや、1 文字ずつしか受け付けないボックスは不合格です。
6. そのほかのテストについては、別の方法が提供されているか、テストが物体の認識、または利用者がサイトに提供したものの識別だけを求めていることを確認してください。
7. サインイン中に表示される CAPTCHA はサインインの一部として扱ってください。パスキー、メールで送られるサインイン用リンク、第三者を介したサインインなど、認知機能のテストを必要としないほかの方法は、有効な代替手段です。

合格の条件

何かを記憶する、書き写す、解くことを求めるサインインの各段階で、貼り付けとパスワードマネージャーが使えるか、別の方法が提供されているか、物体や利用者自身のコンテンツの認識だけが求められます。

不合格の条件

貼り付けを禁止するコードのフィールドなど、回避する手段がないまま、サインインに何かを記憶する、書き写す、解くことが求められるため、WCAG 3.3.8 を満たしません。

これを検査するルール：password-paste-enabled

すべてのリンク、コントロール、フレーム、ダイアログに、その目的を示す名前がある

• ルールが一部を判定する
• 必要なもの：ブラウザーの開発者ツール, スクリーンリーダー

1. Tab キーを押し、ウィジェットの中では矢印キーを使って、ページ上のすべてのリンク、ボタン、フィールド、フレーム、カスタムコントロールを順に移動してください。
2. それぞれについて、開発者ツールのアクセシビリティ ペインで Name を読むか、スクリーンリーダーが読み上げる内容を聞いてください。
3. ブラウザーとスクリーンリーダーの 2 つの組み合わせで名前を確認してください。aria-labelledby、コントロールを囲むラベル、CSS の content から作られる名前は、組み合わせによって異なることがあります。
4. アイコンだけのボタン、フレーム (「動画プレーヤー」「地図」)、ダイアログも含め、それぞれにその目的を示す名前があることを確認してください。
5. 同じ名前のフレームが同じものを表示していること、また点字用にだけ与えられた名前に音声で伝わる同等のものがあることを確認してください。

合格の条件

すべてのリンク、コントロール、フレーム、ダイアログに、その目的を示す名前があります。

不合格の条件

リンク、コントロール、フレーム、ダイアログに名前がないか、名前がその目的を示していないため、支援技術がロールしか読み上げず、WCAG 4.1.2 を満たしません。

これを検査するルール：form-control-programmatic-label-present, link-name-present, button-name-present, input-image-alt-present, binary-control-name-present, combobox-name-present, dialog-name-present, menuitem-name-present, tab-name-present, slider-name-present, textbox-name-present, searchbox-name-present, spinbutton-name-present, listbox-name-present, option-name-present, treeitem-name-present, aria-role-name-present, iframe-name-present, identical-iframes-same-purpose, iframe-title-unique, summary-name-present, tooltip-name-present, aria-braille-equivalent

すべてのコントロールのロールがその働きを示し、コントロールが互いに入れ子になっていない

• ルールが一部を判定する
• 必要なもの：ブラウザーの開発者ツール, スクリーンリーダー

1. ページ上の各コントロールについて、使ったときの働きを控えてください。ページを開く (リンク)、ページ上で何かを実行する (ボタン)、切り替える (チェックボックスやスイッチ)、リストを開く (メニューやコンボボックス) などです。
2. 開発者ツールのアクセシビリティ ペインで Role を読むか、スクリーンリーダーで聞き、ロールが働きと一致していることを確認してください。
3. div や span で作られたカスタムコントロール、ボタンとして使われているリンク、リンクとして使われているボタンに注意してください。
4. リンクの中のボタンのように、コントロールが別のコントロールを内部に含んでいないこと、またタブやボタンのように子要素がプレゼンテーション用となるコントロールが、フォーカス可能なものを含んでいないことを確認してください。

合格の条件

すべてのコントロールのロールがその働きを示し、ほかのコントロールの中に入れ子になったコントロールはありません。

不合格の条件

コントロールにロールがないか誤ったロールがある (ロールのないクリック可能な div、ボタンとして機能するリンク)、または内部に別のコントロールを含んでいるため、WCAG 4.1.2 を満たしません。

これを検査するルール：aria-roles-valid, aria-deprecated-role, nested-interactive-controls-absent, presentational-children-focusable-absent

すべてのコントロールの状態と値が公開され、画面上の表示に合わせて変わる

• ルールが一部を判定する
• 必要なもの：ブラウザーの開発者ツール, スクリーンリーダー, キーボード

1. チェックボックス、スイッチ、ラジオボタン、展開できるセクションやメニュー、タブ、スライダー、選択された項目、押された状態のボタンなど、状態や値を持つコントロールを見つけてください。
2. 開発者ツールのアクセシビリティ ペインでそれぞれの状態と値を読むか、スクリーンリーダーで聞いてください。checked、expanded、selected、pressed、現在の項目 (aria-current)、スライダーやスピンボタンの現在の値です。
3. それぞれをキーボードで変更し、読み上げられる状態や値が見た目に合わせて変わることを確認してください。
4. 展開できるコントロールについては、それが開くものが表示されている間だけ展開状態と伝えることを確認してください。

合格の条件

すべてのコントロールの状態と値が公開され、画面上の表示に合わせて変わります。

不合格の条件

常に未チェックと読み上げられるカスタムチェックボックスのように、コントロールの状態や値が公開されていないか、画面上で変わっても変わらないため、WCAG 4.1.2 を満たしません。

これを検査するルール：aria-required-attr, aria-conditional-attr, aria-checked-state-mismatch, aria-expanded-state-mismatch

ARIA 属性が実在し、有効で、その場所で許可されており、フォーカス可能なものが支援技術から隠されていない

• ルールが一部を判定する
• 必要なもの：ブラウザーの開発者ツール

1. 開発者ツールの [Elements] パネルで、マークアップから aria- と role= を検索し、それぞれの使われ方を確認してください。
2. 各 aria-* 属性が実在するものであり、有効な値を持ち、その要素のロールで許可されていることを確認してください。
3. aria-labelledby、aria-describedby、aria-controls などが指す id が、それぞれ 1 つずつ存在することを確認してください。
4. aria-hidden="true" を持つ要素の中にフォーカスを受け取るものがないこと、また <body> が隠されていないことを確認してください。

合格の条件

ARIA 属性が実在し、有効で、その場所で許可されており、参照される id は一意で、フォーカス可能なものは隠されていません。

不合格の条件

ARIA 属性のつづりが誤っている、値が無効である、またはそのロールで許可されていない、参照する id が存在しないか重複している、またはフォーカス可能なものが支援技術から隠されているため、WCAG 4.1.2 を満たしません。

これを検査するルール：aria-hidden-focus, aria-valid-attr, aria-valid-attr-value, aria-allowed-attr, aria-prohibited-attr, aria-hidden-body, duplicate-id-aria

ステータスメッセージが、フォーカスを移さずに支援技術によって読み上げられる

• 人だけが確認できる
• 必要なもの：スクリーンリーダー

1. 「カートに追加しました」、検索結果の件数、「保存しました」、進行状況、送信後に一覧表示されるフォームのエラーなど、ページがフォーカスを移さずに表示するメッセージを見つけてください。
2. スクリーンリーダーをオンにし、各メッセージを表示させる操作を行って、メッセージを発生させてください。
3. フォーカスがメッセージに移ることなく、スクリーンリーダーがメッセージを読み上げることを確認してください。
4. 2 つ目のブラウザーとスクリーンリーダーの組み合わせでも繰り返してください。ライブリージョンは、スクリーンリーダーのサポートの中でも特に一貫性の低い部分です。
5. 何も読み上げられない場合は、開発者ツールで、メッセージが role="status"、role="alert"、または aria-live を持つ要素の中にあり、その要素が隠されていないことを確認してください。role="status" や aria-live のリージョンは、メッセージが入れられる前から、空の状態でページ上に存在している必要があります。role="alert" を持つ要素は、メッセージと一緒に追加された場合でも、たいてい読み上げられます。
6. フォーカスを受け取るメッセージや、新しいページとともに表示されるメッセージは除外してください。それらはステータスメッセージではなく、ほかの達成基準で確認します。

合格の条件

すべてのステータスメッセージが、フォーカスがそれに移ることなく、スクリーンリーダーによって読み上げられます。

不合格の条件

ステータスメッセージが画面に表示されるのに、スクリーンリーダーがそれを読み上げないため、WCAG 4.1.3 を満たしません。

これを検査するルール：live-region-announcements