axe DevToolsのルールと当ガイドラインの対応

ここでは、チェックの際に利用するaxe DevToolsが出力する情報と、当ガイドラインの対応について記します。

なお、axe DevToolsについては、以下も合わせて参照してください：

• axe DevToolsを使用したアクセシビリティー・チェック

• axe DevToolsを用いたチェック実施方法の例

ここで掲載している情報は、axe-coreのGitHubリポジトリーの以下に示す時点におけるdevelopブランチの内容に基づいて自動的に生成したものです。axe DevToolsの内容とは一致していない場合もあることにご注意ください。

バージョン

4.2.3

更新日時

2021-07-02 18:07:21++0900

アクティブな<area>要素には代替テキストが存在しなければなりません

イメージマップの<area>要素に代替テキストが存在することを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

• 達成基準1.1.1

  • Non-text Content

  • 非テキストコンテンツ

• 達成基準2.4.4

  • Link Purpose (In Context)

  • リンクの目的 (コンテキスト内)

• 達成基準4.1.2

  • Name, Role, Value

  • 名前 (name) ・役割 (role) 及び値 (value)

関連するガイドラインとチェック内容

• フォーム：[MUST] 表示されているテキストをラベルとして用いる

  チェック内容

  デザイン（チェックID: 0931）

  • フォーム・コントロールについて、役割が分かり、画面上に表示されているテキストまたは代替テキストが付加された画像を、ラベルとして設計資料に定義している。または

  • aria-label属性値として指定すべき、フォーム・コントロールの役割を示すテキストを設計資料に定義している。

  コード（チェックID: 0941）

  • フォーム・コントロールは、ラベルとなるテキストまたは画像とlabel要素またはaria-labelledby属性で関連付けられている。または

  • aria-label属性で適切なラベルが付けられている。

  • 開発者ツールで確認するとフォーム・コントロールのaccessible nameに役割が分かるテキストが指定されている状態になっている。

  プロダクト（チェックID: 0951、axe DevToolsによるチェック実施方法の例）

  • フォーム・コントロールの役割が分かるテキストまたは代替テキストが付加された画像がラベルとして表示されていて、このテキストをクリックすると当該のフォーム・コントロールにフォーカスが移動する。または

  • スクリーン・リーダーでフォーム・コントロールとラベルの関連付けが分かるような読み上げがされる。

• フォーム：[MUST] 表示されているテキストをラベルにできない場合

  チェック内容

  デザイン（チェックID: 0931）

  • フォーム・コントロールについて、役割が分かり、画面上に表示されているテキストまたは代替テキストが付加された画像を、ラベルとして設計資料に定義している。または

  • aria-label属性値として指定すべき、フォーム・コントロールの役割を示すテキストを設計資料に定義している。

  コード（チェックID: 0941）

  • フォーム・コントロールは、ラベルとなるテキストまたは画像とlabel要素またはaria-labelledby属性で関連付けられている。または

  • aria-label属性で適切なラベルが付けられている。

  • 開発者ツールで確認するとフォーム・コントロールのaccessible nameに役割が分かるテキストが指定されている状態になっている。

  プロダクト（チェックID: 0951、axe DevToolsによるチェック実施方法の例）

  • フォーム・コントロールの役割が分かるテキストまたは代替テキストが付加された画像がラベルとして表示されていて、このテキストをクリックすると当該のフォーム・コントロールにフォーカスが移動する。または

  • スクリーン・リーダーでフォーム・コントロールとラベルの関連付けが分かるような読み上げがされる。

• アイコン：[MUST] テキスト情報の付与

  チェック内容

  デザイン（チェックID: 0391）

  • アイコンには、その役割や示している状態を表すテキスト・ラベルが併せて表示されている。または

  • テキスト・ラベルを表示できない場合、色の違いだけでアイコンの意味の違いを表さず、形状（モチーフ）やサイズでも違いを示している。かつ

  • 役割や意味がわかるalt属性の値を設計資料で明示している。

  コード（チェックID: 0401）

  • アイコンの役割や示している状態を表すテキストが表示されていて、aria-labelledby属性で関連付けられている。または

  • alt属性またはaria-label属性で、そのようなテキストが指定されている。

  • 開発者ツールで確認すると、Accessible Nameに適切なテキストが設定されている状態になっている。

  プロダクト（チェックID: 0411、NVDAによるチェック実施方法の例）

  • アイコンの役割や示している状態が分かるテキストが、スクリーン・リーダーで読み上げられる。

• 画像：[MUST] 画像の説明の提供

  チェック内容

  デザイン（チェックID: 0421）

  • 画像に関する簡潔で過不足ない説明（alt属性値）が、設計資料で明示されている。かつ

  • 短いテキストでは充分に説明できない場合には、詳細な説明のテキストが設計資料で明示されている。

  コード（チェックID: 0431）

  • 画像に関する簡潔で過不足ない説明がalt属性やaria-label属性で付加されている。かつ

  • 詳細な説明が必要な場合には、その説明が当該の画像の直前または直後に表示されている、またはaria-describedby属性で関連付けられている。

  プロダクト（チェックID: 0441、NVDAによるチェック実施方法の例、axe DevToolsによるチェック実施方法の例）

  • 画像の説明がスクリーン・リーダーで適切に読み上げられる。

• 画像：[MUST] 装飾目的の画像の無視

  チェック内容

  デザイン（チェックID: 0451）

  • 情報や機能性を一切持たない画像は、説明のテキストを付加してはならないことが設計資料で明示されている。

  コード（チェックID: 0461）

  • 情報や機能性を一切持たない画像には、空のalt属性（alt=""）やrole="presentation"が付与されていて、スクリーン・リーダーで読み上げられない。

  プロダクト（チェックID: 0471、NVDAによるチェック実施方法の例）

  • 情報や機能性を一切持たない画像は、スクリーン・リーダーで読み上げられない。

• 画像化されたテキスト：[MUST] テキスト情報の提供

  チェック内容

  コード（チェックID: 0521）

  • 画像化されているテキストと同じ内容がalt属性またはaria-label属性で示されていて、スクリーン・リーダーなどで確認できる。

  プロダクト（チェックID: 0531、NVDAによるチェック実施方法の例）

  • 画像化されているテキストと同じ内容がスクリーン・リーダーなどで確認できる。

• 音声・映像コンテンツ：[MUST] 音声・映像コンテンツの存在を明示する

  チェック内容

  プロダクト（チェックID: 1411）

  • ページ内に埋め込まれる音声/動画プレイヤーについて、適切なラベル付けがされていてそこにプレイヤーがあることが容易に認知できるようになっている。または

  • 前後のテキストから、そこにプレイヤーがあることが推測できる。

• リンク：[MUST] 適切なリンク・テキスト

  チェック内容

  デザイン（チェックID: 0241）

  • リンク・テキストは「こちら」などになっておらず、リンク・テキストの文言から遷移先をある程度推測できるようになっている。

  プロダクト（チェックID: 0261）

  • 「○○はこちら」の「こちら」の部分だけがリンクになっていない。（この場合は「○○はこちら」全体をリンクにする。）、または

  • リンク・テキストの意図がマークアップで明確になっている。

• マークアップ全般：[MUST] コンポーネントをアクセシブルにする

  チェック内容

  プロダクト（チェックID: 0591、NVDAによるチェック実施方法の例）

  • 静的なテキストではない部分（例：開閉するメニュー、タブ・パネル、日付選択UI）も、スクリーン・リーダーで問題なく操作できる。

要素には許可されているARIA属性のみを使用しなければなりません

要素のロールにARIA属性が許可されていることを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

• 達成基準4.1.2

  • Name, Role, Value

  • 名前 (name) ・役割 (role) 及び値 (value)

関連するガイドラインとチェック内容

• マークアップ全般：[MUST] コンポーネントをアクセシブルにする

  チェック内容

  プロダクト（チェックID: 0591、NVDAによるチェック実施方法の例）

  • 静的なテキストではない部分（例：開閉するメニュー、タブ・パネル、日付選択UI）も、スクリーン・リーダーで問題なく操作できる。

ARIAコマンドにはアクセシブルな名前がなければなりません

すべてのARIA button、link、menuitemにアクセシブルな名前があることを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

• 達成基準4.1.2

  • Name, Role, Value

  • 名前 (name) ・役割 (role) 及び値 (value)

関連するガイドラインとチェック内容

• マークアップ全般：[MUST] コンポーネントをアクセシブルにする

  チェック内容

  プロダクト（チェックID: 0591、NVDAによるチェック実施方法の例）

  • 静的なテキストではない部分（例：開閉するメニュー、タブ・パネル、日付選択UI）も、スクリーン・リーダーで問題なく操作できる。

ドキュメント本体にaria-hidden='true'が存在してはなりません

ドキュメント本体にaria-hidden='true'が存在していないことを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

• 達成基準4.1.2

  • Name, Role, Value

  • 名前 (name) ・役割 (role) 及び値 (value)

関連するガイドラインとチェック内容

• マークアップ全般：[MUST] コンポーネントをアクセシブルにする

  チェック内容

  プロダクト（チェックID: 0591、NVDAによるチェック実施方法の例）

  • 静的なテキストではない部分（例：開閉するメニュー、タブ・パネル、日付選択UI）も、スクリーン・リーダーで問題なく操作できる。

ARIA hidden要素にフォーカス可能な要素を含んではなりません

aria-hidden要素にフォーカス可能な要素が含まれていないことを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

• 達成基準4.1.2

  • Name, Role, Value

  • 名前 (name) ・役割 (role) 及び値 (value)

• 達成基準1.3.1

  • Info and Relationships

  • 情報及び関係性

関連するガイドラインとチェック内容

• マークアップ全般：[MUST] コンポーネントをアクセシブルにする

  チェック内容

  プロダクト（チェックID: 0591、NVDAによるチェック実施方法の例）

  • 静的なテキストではない部分（例：開閉するメニュー、タブ・パネル、日付選択UI）も、スクリーン・リーダーで問題なく操作できる。

• フォーム：[MUST] 表示されているテキストをラベルとして用いる

  チェック内容

  デザイン（チェックID: 0931）

  • フォーム・コントロールについて、役割が分かり、画面上に表示されているテキストまたは代替テキストが付加された画像を、ラベルとして設計資料に定義している。または

  • aria-label属性値として指定すべき、フォーム・コントロールの役割を示すテキストを設計資料に定義している。

  コード（チェックID: 0941）

  • フォーム・コントロールは、ラベルとなるテキストまたは画像とlabel要素またはaria-labelledby属性で関連付けられている。または

  • aria-label属性で適切なラベルが付けられている。

  • 開発者ツールで確認するとフォーム・コントロールのaccessible nameに役割が分かるテキストが指定されている状態になっている。

  プロダクト（チェックID: 0951、axe DevToolsによるチェック実施方法の例）

  • フォーム・コントロールの役割が分かるテキストまたは代替テキストが付加された画像がラベルとして表示されていて、このテキストをクリックすると当該のフォーム・コントロールにフォーカスが移動する。または

  • スクリーン・リーダーでフォーム・コントロールとラベルの関連付けが分かるような読み上げがされる。

• フォーム：[MUST] 表示されているテキストをラベルにできない場合

  チェック内容

  デザイン（チェックID: 0931）

  • フォーム・コントロールについて、役割が分かり、画面上に表示されているテキストまたは代替テキストが付加された画像を、ラベルとして設計資料に定義している。または

  • aria-label属性値として指定すべき、フォーム・コントロールの役割を示すテキストを設計資料に定義している。

  コード（チェックID: 0941）

  • フォーム・コントロールは、ラベルとなるテキストまたは画像とlabel要素またはaria-labelledby属性で関連付けられている。または

  • aria-label属性で適切なラベルが付けられている。

  • 開発者ツールで確認するとフォーム・コントロールのaccessible nameに役割が分かるテキストが指定されている状態になっている。

  プロダクト（チェックID: 0951、axe DevToolsによるチェック実施方法の例）

  • フォーム・コントロールの役割が分かるテキストまたは代替テキストが付加された画像がラベルとして表示されていて、このテキストをクリックすると当該のフォーム・コントロールにフォーカスが移動する。または

  • スクリーン・リーダーでフォーム・コントロールとラベルの関連付けが分かるような読み上げがされる。

• マークアップ全般：[MUST] 文書構造を適切にマークアップする

  チェック内容

  デザイン（チェックID: 0541）

  • 見出し（h1～h6）、箇条書き（ul, ol, dl）、表（table）など、HTMLのセマンティクスで表現できるものがそれらで表現されるよう、設計資料で明示されている。

  コード（チェックID: 0551）

  • 見出し（h1～h6）、箇条書き（ul, ol, dl）、表（table）などを用いてセマンティクスが適切にマークアップされている。

  プロダクト（チェックID: 0561、NVDAによるチェック実施方法の例、axe DevToolsによるチェック実施方法の例）

  • 設計資料で見出しとして示されているものを、スクリーン・リーダーが見出しとして認識している。

  プロダクト（チェックID: 0562、NVDAによるチェック実施方法の例）

  • スクリーン・リーダーが、表（table）を適切に認識していて、表中のセルも適切に認識している。

• ページ全体：[MUST] ページを構成する領域の明示

  チェック内容

  デザイン（チェックID: 0661）

  • ページのどの部分がそれぞれheader, nav, main, footer要素でマークアップされるべきかが、複数のページで一貫した形で設計資料に明示されている。

  コード（チェックID: 0671）

  • header, main, nav, footerの各要素が適切に用いられている。または

  • これらがrole属性で明示されている。

ARIA入力欄にアクセシブルな名前があります

すべてのARIA入力欄にアクセシブルな名前があることを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

• 達成基準4.1.2

  • Name, Role, Value

  • 名前 (name) ・役割 (role) 及び値 (value)

関連するガイドラインとチェック内容

• マークアップ全般：[MUST] コンポーネントをアクセシブルにする

  チェック内容

  プロダクト（チェックID: 0591、NVDAによるチェック実施方法の例）

  • 静的なテキストではない部分（例：開閉するメニュー、タブ・パネル、日付選択UI）も、スクリーン・リーダーで問題なく操作できる。

ARIA meterノードにはアクセシブルな名前がなければなりません

すべてのARIA meterノードにアクセシブルな名前があることを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

• 達成基準1.1.1

  • Non-text Content

  • 非テキストコンテンツ

関連するガイドラインとチェック内容

• フォーム：[MUST] 表示されているテキストをラベルとして用いる

  チェック内容

  デザイン（チェックID: 0931）

  • フォーム・コントロールについて、役割が分かり、画面上に表示されているテキストまたは代替テキストが付加された画像を、ラベルとして設計資料に定義している。または

  • aria-label属性値として指定すべき、フォーム・コントロールの役割を示すテキストを設計資料に定義している。

  コード（チェックID: 0941）

  • フォーム・コントロールは、ラベルとなるテキストまたは画像とlabel要素またはaria-labelledby属性で関連付けられている。または

  • aria-label属性で適切なラベルが付けられている。

  • 開発者ツールで確認するとフォーム・コントロールのaccessible nameに役割が分かるテキストが指定されている状態になっている。

  プロダクト（チェックID: 0951、axe DevToolsによるチェック実施方法の例）

  • フォーム・コントロールの役割が分かるテキストまたは代替テキストが付加された画像がラベルとして表示されていて、このテキストをクリックすると当該のフォーム・コントロールにフォーカスが移動する。または

  • スクリーン・リーダーでフォーム・コントロールとラベルの関連付けが分かるような読み上げがされる。

• フォーム：[MUST] 表示されているテキストをラベルにできない場合

  チェック内容

  デザイン（チェックID: 0931）

  • フォーム・コントロールについて、役割が分かり、画面上に表示されているテキストまたは代替テキストが付加された画像を、ラベルとして設計資料に定義している。または

  • aria-label属性値として指定すべき、フォーム・コントロールの役割を示すテキストを設計資料に定義している。

  コード（チェックID: 0941）

  • フォーム・コントロールは、ラベルとなるテキストまたは画像とlabel要素またはaria-labelledby属性で関連付けられている。または

  • aria-label属性で適切なラベルが付けられている。

  • 開発者ツールで確認するとフォーム・コントロールのaccessible nameに役割が分かるテキストが指定されている状態になっている。

  プロダクト（チェックID: 0951、axe DevToolsによるチェック実施方法の例）

  • フォーム・コントロールの役割が分かるテキストまたは代替テキストが付加された画像がラベルとして表示されていて、このテキストをクリックすると当該のフォーム・コントロールにフォーカスが移動する。または

  • スクリーン・リーダーでフォーム・コントロールとラベルの関連付けが分かるような読み上げがされる。

• アイコン：[MUST] テキスト情報の付与

  チェック内容

  デザイン（チェックID: 0391）

  • アイコンには、その役割や示している状態を表すテキスト・ラベルが併せて表示されている。または

  • テキスト・ラベルを表示できない場合、色の違いだけでアイコンの意味の違いを表さず、形状（モチーフ）やサイズでも違いを示している。かつ

  • 役割や意味がわかるalt属性の値を設計資料で明示している。

  コード（チェックID: 0401）

  • アイコンの役割や示している状態を表すテキストが表示されていて、aria-labelledby属性で関連付けられている。または

  • alt属性またはaria-label属性で、そのようなテキストが指定されている。

  • 開発者ツールで確認すると、Accessible Nameに適切なテキストが設定されている状態になっている。

  プロダクト（チェックID: 0411、NVDAによるチェック実施方法の例）

  • アイコンの役割や示している状態が分かるテキストが、スクリーン・リーダーで読み上げられる。

• 画像：[MUST] 画像の説明の提供

  チェック内容

  デザイン（チェックID: 0421）

  • 画像に関する簡潔で過不足ない説明（alt属性値）が、設計資料で明示されている。かつ

  • 短いテキストでは充分に説明できない場合には、詳細な説明のテキストが設計資料で明示されている。

  コード（チェックID: 0431）

  • 画像に関する簡潔で過不足ない説明がalt属性やaria-label属性で付加されている。かつ

  • 詳細な説明が必要な場合には、その説明が当該の画像の直前または直後に表示されている、またはaria-describedby属性で関連付けられている。

  プロダクト（チェックID: 0441、NVDAによるチェック実施方法の例、axe DevToolsによるチェック実施方法の例）

  • 画像の説明がスクリーン・リーダーで適切に読み上げられる。

• 画像：[MUST] 装飾目的の画像の無視

  チェック内容

  デザイン（チェックID: 0451）

  • 情報や機能性を一切持たない画像は、説明のテキストを付加してはならないことが設計資料で明示されている。

  コード（チェックID: 0461）

  • 情報や機能性を一切持たない画像には、空のalt属性（alt=""）やrole="presentation"が付与されていて、スクリーン・リーダーで読み上げられない。

  プロダクト（チェックID: 0471、NVDAによるチェック実施方法の例）

  • 情報や機能性を一切持たない画像は、スクリーン・リーダーで読み上げられない。

• 画像化されたテキスト：[MUST] テキスト情報の提供

  チェック内容

  コード（チェックID: 0521）

  • 画像化されているテキストと同じ内容がalt属性またはaria-label属性で示されていて、スクリーン・リーダーなどで確認できる。

  プロダクト（チェックID: 0531、NVDAによるチェック実施方法の例）

  • 画像化されているテキストと同じ内容がスクリーン・リーダーなどで確認できる。

• 音声・映像コンテンツ：[MUST] 音声・映像コンテンツの存在を明示する

  チェック内容

  プロダクト（チェックID: 1411）

  • ページ内に埋め込まれる音声/動画プレイヤーについて、適切なラベル付けがされていてそこにプレイヤーがあることが容易に認知できるようになっている。または

  • 前後のテキストから、そこにプレイヤーがあることが推測できる。

ARIA progressbarノードにはアクセシブルな名前がなければなりません

すべてのARIA progressbarノードにアクセシブルな名前があることを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

• 達成基準1.1.1

  • Non-text Content

  • 非テキストコンテンツ

関連するガイドラインとチェック内容

• フォーム：[MUST] 表示されているテキストをラベルとして用いる

  チェック内容

  デザイン（チェックID: 0931）

  • フォーム・コントロールについて、役割が分かり、画面上に表示されているテキストまたは代替テキストが付加された画像を、ラベルとして設計資料に定義している。または

  • aria-label属性値として指定すべき、フォーム・コントロールの役割を示すテキストを設計資料に定義している。

  コード（チェックID: 0941）

  • フォーム・コントロールは、ラベルとなるテキストまたは画像とlabel要素またはaria-labelledby属性で関連付けられている。または

  • aria-label属性で適切なラベルが付けられている。

  • 開発者ツールで確認するとフォーム・コントロールのaccessible nameに役割が分かるテキストが指定されている状態になっている。

  プロダクト（チェックID: 0951、axe DevToolsによるチェック実施方法の例）

  • フォーム・コントロールの役割が分かるテキストまたは代替テキストが付加された画像がラベルとして表示されていて、このテキストをクリックすると当該のフォーム・コントロールにフォーカスが移動する。または

  • スクリーン・リーダーでフォーム・コントロールとラベルの関連付けが分かるような読み上げがされる。

• フォーム：[MUST] 表示されているテキストをラベルにできない場合

  チェック内容

  デザイン（チェックID: 0931）

  • フォーム・コントロールについて、役割が分かり、画面上に表示されているテキストまたは代替テキストが付加された画像を、ラベルとして設計資料に定義している。または

  • aria-label属性値として指定すべき、フォーム・コントロールの役割を示すテキストを設計資料に定義している。

  コード（チェックID: 0941）

  • フォーム・コントロールは、ラベルとなるテキストまたは画像とlabel要素またはaria-labelledby属性で関連付けられている。または

  • aria-label属性で適切なラベルが付けられている。

  • 開発者ツールで確認するとフォーム・コントロールのaccessible nameに役割が分かるテキストが指定されている状態になっている。

  プロダクト（チェックID: 0951、axe DevToolsによるチェック実施方法の例）

  • フォーム・コントロールの役割が分かるテキストまたは代替テキストが付加された画像がラベルとして表示されていて、このテキストをクリックすると当該のフォーム・コントロールにフォーカスが移動する。または

  • スクリーン・リーダーでフォーム・コントロールとラベルの関連付けが分かるような読み上げがされる。

• アイコン：[MUST] テキスト情報の付与

  チェック内容

  デザイン（チェックID: 0391）

  • アイコンには、その役割や示している状態を表すテキスト・ラベルが併せて表示されている。または

  • テキスト・ラベルを表示できない場合、色の違いだけでアイコンの意味の違いを表さず、形状（モチーフ）やサイズでも違いを示している。かつ

  • 役割や意味がわかるalt属性の値を設計資料で明示している。

  コード（チェックID: 0401）

  • アイコンの役割や示している状態を表すテキストが表示されていて、aria-labelledby属性で関連付けられている。または

  • alt属性またはaria-label属性で、そのようなテキストが指定されている。

  • 開発者ツールで確認すると、Accessible Nameに適切なテキストが設定されている状態になっている。

  プロダクト（チェックID: 0411、NVDAによるチェック実施方法の例）

  • アイコンの役割や示している状態が分かるテキストが、スクリーン・リーダーで読み上げられる。

• 画像：[MUST] 画像の説明の提供

  チェック内容

  デザイン（チェックID: 0421）

  • 画像に関する簡潔で過不足ない説明（alt属性値）が、設計資料で明示されている。かつ

  • 短いテキストでは充分に説明できない場合には、詳細な説明のテキストが設計資料で明示されている。

  コード（チェックID: 0431）

  • 画像に関する簡潔で過不足ない説明がalt属性やaria-label属性で付加されている。かつ

  • 詳細な説明が必要な場合には、その説明が当該の画像の直前または直後に表示されている、またはaria-describedby属性で関連付けられている。

  プロダクト（チェックID: 0441、NVDAによるチェック実施方法の例、axe DevToolsによるチェック実施方法の例）

  • 画像の説明がスクリーン・リーダーで適切に読み上げられる。

• 画像：[MUST] 装飾目的の画像の無視

  チェック内容

  デザイン（チェックID: 0451）

  • 情報や機能性を一切持たない画像は、説明のテキストを付加してはならないことが設計資料で明示されている。

  コード（チェックID: 0461）

  • 情報や機能性を一切持たない画像には、空のalt属性（alt=""）やrole="presentation"が付与されていて、スクリーン・リーダーで読み上げられない。

  プロダクト（チェックID: 0471、NVDAによるチェック実施方法の例）

  • 情報や機能性を一切持たない画像は、スクリーン・リーダーで読み上げられない。

• 画像化されたテキスト：[MUST] テキスト情報の提供

  チェック内容

  コード（チェックID: 0521）

  • 画像化されているテキストと同じ内容がalt属性またはaria-label属性で示されていて、スクリーン・リーダーなどで確認できる。

  プロダクト（チェックID: 0531、NVDAによるチェック実施方法の例）

  • 画像化されているテキストと同じ内容がスクリーン・リーダーなどで確認できる。

• 音声・映像コンテンツ：[MUST] 音声・映像コンテンツの存在を明示する

  チェック内容

  プロダクト（チェックID: 1411）

  • ページ内に埋め込まれる音声/動画プレイヤーについて、適切なラベル付けがされていてそこにプレイヤーがあることが容易に認知できるようになっている。または

  • 前後のテキストから、そこにプレイヤーがあることが推測できる。

必須のARIA属性が提供されていなければなりません

ARIAロールのある要素にすべての必須ARIA属性が存在することを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

• 達成基準4.1.2

  • Name, Role, Value

  • 名前 (name) ・役割 (role) 及び値 (value)

関連するガイドラインとチェック内容

• マークアップ全般：[MUST] コンポーネントをアクセシブルにする

  チェック内容

  プロダクト（チェックID: 0591、NVDAによるチェック実施方法の例）

  • 静的なテキストではない部分（例：開閉するメニュー、タブ・パネル、日付選択UI）も、スクリーン・リーダーで問題なく操作できる。

特定のARIAロールには特定の子が含まれていなければなりません

子ロールを必須とするARIAロールが指定された要素に、それらが含まれていることを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

• 達成基準1.3.1

  • Info and Relationships

  • 情報及び関係性

関連するガイドラインとチェック内容

• フォーム：[MUST] 表示されているテキストをラベルとして用いる

  チェック内容

  デザイン（チェックID: 0931）

  • フォーム・コントロールについて、役割が分かり、画面上に表示されているテキストまたは代替テキストが付加された画像を、ラベルとして設計資料に定義している。または

  • aria-label属性値として指定すべき、フォーム・コントロールの役割を示すテキストを設計資料に定義している。

  コード（チェックID: 0941）

  • フォーム・コントロールは、ラベルとなるテキストまたは画像とlabel要素またはaria-labelledby属性で関連付けられている。または

  • aria-label属性で適切なラベルが付けられている。

  • 開発者ツールで確認するとフォーム・コントロールのaccessible nameに役割が分かるテキストが指定されている状態になっている。

  プロダクト（チェックID: 0951、axe DevToolsによるチェック実施方法の例）

  • フォーム・コントロールの役割が分かるテキストまたは代替テキストが付加された画像がラベルとして表示されていて、このテキストをクリックすると当該のフォーム・コントロールにフォーカスが移動する。または

  • スクリーン・リーダーでフォーム・コントロールとラベルの関連付けが分かるような読み上げがされる。

• フォーム：[MUST] 表示されているテキストをラベルにできない場合

  チェック内容

  デザイン（チェックID: 0931）

  • フォーム・コントロールについて、役割が分かり、画面上に表示されているテキストまたは代替テキストが付加された画像を、ラベルとして設計資料に定義している。または

  • aria-label属性値として指定すべき、フォーム・コントロールの役割を示すテキストを設計資料に定義している。

  コード（チェックID: 0941）

  • フォーム・コントロールは、ラベルとなるテキストまたは画像とlabel要素またはaria-labelledby属性で関連付けられている。または

  • aria-label属性で適切なラベルが付けられている。

  • 開発者ツールで確認するとフォーム・コントロールのaccessible nameに役割が分かるテキストが指定されている状態になっている。

  プロダクト（チェックID: 0951、axe DevToolsによるチェック実施方法の例）

  • フォーム・コントロールの役割が分かるテキストまたは代替テキストが付加された画像がラベルとして表示されていて、このテキストをクリックすると当該のフォーム・コントロールにフォーカスが移動する。または

  • スクリーン・リーダーでフォーム・コントロールとラベルの関連付けが分かるような読み上げがされる。

• マークアップ全般：[MUST] 文書構造を適切にマークアップする

  チェック内容

  デザイン（チェックID: 0541）

  • 見出し（h1～h6）、箇条書き（ul, ol, dl）、表（table）など、HTMLのセマンティクスで表現できるものがそれらで表現されるよう、設計資料で明示されている。

  コード（チェックID: 0551）

  • 見出し（h1～h6）、箇条書き（ul, ol, dl）、表（table）などを用いてセマンティクスが適切にマークアップされている。

  プロダクト（チェックID: 0561、NVDAによるチェック実施方法の例、axe DevToolsによるチェック実施方法の例）

  • 設計資料で見出しとして示されているものを、スクリーン・リーダーが見出しとして認識している。

  プロダクト（チェックID: 0562、NVDAによるチェック実施方法の例）

  • スクリーン・リーダーが、表（table）を適切に認識していて、表中のセルも適切に認識している。

• ページ全体：[MUST] ページを構成する領域の明示

  チェック内容

  デザイン（チェックID: 0661）

  • ページのどの部分がそれぞれheader, nav, main, footer要素でマークアップされるべきかが、複数のページで一貫した形で設計資料に明示されている。

  コード（チェックID: 0671）

  • header, main, nav, footerの各要素が適切に用いられている。または

  • これらがrole属性で明示されている。

特定のARIAロールは特定の親に含まれていなければなりません

親ロールを必須とするARIAロールが指定された要素に、それらが含まれていることを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

• 達成基準1.3.1

  • Info and Relationships

  • 情報及び関係性

関連するガイドラインとチェック内容

• フォーム：[MUST] 表示されているテキストをラベルとして用いる

  チェック内容

  デザイン（チェックID: 0931）

  • フォーム・コントロールについて、役割が分かり、画面上に表示されているテキストまたは代替テキストが付加された画像を、ラベルとして設計資料に定義している。または

  • aria-label属性値として指定すべき、フォーム・コントロールの役割を示すテキストを設計資料に定義している。

  コード（チェックID: 0941）

  • フォーム・コントロールは、ラベルとなるテキストまたは画像とlabel要素またはaria-labelledby属性で関連付けられている。または

  • aria-label属性で適切なラベルが付けられている。

  • 開発者ツールで確認するとフォーム・コントロールのaccessible nameに役割が分かるテキストが指定されている状態になっている。

  プロダクト（チェックID: 0951、axe DevToolsによるチェック実施方法の例）

  • フォーム・コントロールの役割が分かるテキストまたは代替テキストが付加された画像がラベルとして表示されていて、このテキストをクリックすると当該のフォーム・コントロールにフォーカスが移動する。または

  • スクリーン・リーダーでフォーム・コントロールとラベルの関連付けが分かるような読み上げがされる。

• フォーム：[MUST] 表示されているテキストをラベルにできない場合

  チェック内容

  デザイン（チェックID: 0931）

  • フォーム・コントロールについて、役割が分かり、画面上に表示されているテキストまたは代替テキストが付加された画像を、ラベルとして設計資料に定義している。または

  • aria-label属性値として指定すべき、フォーム・コントロールの役割を示すテキストを設計資料に定義している。

  コード（チェックID: 0941）

  • フォーム・コントロールは、ラベルとなるテキストまたは画像とlabel要素またはaria-labelledby属性で関連付けられている。または

  • aria-label属性で適切なラベルが付けられている。

  • 開発者ツールで確認するとフォーム・コントロールのaccessible nameに役割が分かるテキストが指定されている状態になっている。

  プロダクト（チェックID: 0951、axe DevToolsによるチェック実施方法の例）

  • フォーム・コントロールの役割が分かるテキストまたは代替テキストが付加された画像がラベルとして表示されていて、このテキストをクリックすると当該のフォーム・コントロールにフォーカスが移動する。または

  • スクリーン・リーダーでフォーム・コントロールとラベルの関連付けが分かるような読み上げがされる。

• マークアップ全般：[MUST] 文書構造を適切にマークアップする

  チェック内容

  デザイン（チェックID: 0541）

  • 見出し（h1～h6）、箇条書き（ul, ol, dl）、表（table）など、HTMLのセマンティクスで表現できるものがそれらで表現されるよう、設計資料で明示されている。

  コード（チェックID: 0551）

  • 見出し（h1～h6）、箇条書き（ul, ol, dl）、表（table）などを用いてセマンティクスが適切にマークアップされている。

  プロダクト（チェックID: 0561、NVDAによるチェック実施方法の例、axe DevToolsによるチェック実施方法の例）

  • 設計資料で見出しとして示されているものを、スクリーン・リーダーが見出しとして認識している。

  プロダクト（チェックID: 0562、NVDAによるチェック実施方法の例）

  • スクリーン・リーダーが、表（table）を適切に認識していて、表中のセルも適切に認識している。

• ページ全体：[MUST] ページを構成する領域の明示

  チェック内容

  デザイン（チェックID: 0661）

  • ページのどの部分がそれぞれheader, nav, main, footer要素でマークアップされるべきかが、複数のページで一貫した形で設計資料に明示されている。

  コード（チェックID: 0671）

  • header, main, nav, footerの各要素が適切に用いられている。または

  • これらがrole属性で明示されている。

aria-roledescriptionはセマンティックなロールを持った要素に使用します

aria-roledescriptionが暗黙的もしくは明示的なロールを持った要素に使用されていることを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

• 達成基準4.1.2

  • Name, Role, Value

  • 名前 (name) ・役割 (role) 及び値 (value)

関連するガイドラインとチェック内容

• マークアップ全般：[MUST] コンポーネントをアクセシブルにする

  チェック内容

  プロダクト（チェックID: 0591、NVDAによるチェック実施方法の例）

  • 静的なテキストではない部分（例：開閉するメニュー、タブ・パネル、日付選択UI）も、スクリーン・リーダーで問題なく操作できる。

使用されているARIAロールは有効な値に一致しなければなりません

すべてのロール属性が指定された要素で、有効な値が使用されていることを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

• 達成基準4.1.2

  • Name, Role, Value

  • 名前 (name) ・役割 (role) 及び値 (value)

関連するガイドラインとチェック内容

• マークアップ全般：[MUST] コンポーネントをアクセシブルにする

  チェック内容

  プロダクト（チェックID: 0591、NVDAによるチェック実施方法の例）

  • 静的なテキストではない部分（例：開閉するメニュー、タブ・パネル、日付選択UI）も、スクリーン・リーダーで問題なく操作できる。

ARIAトグル欄にアクセシブルな名前があります

すべてのARIAトグル欄にアクセシブルな名前があることを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

• 達成基準4.1.2

  • Name, Role, Value

  • 名前 (name) ・役割 (role) 及び値 (value)

関連するガイドラインとチェック内容

• マークアップ全般：[MUST] コンポーネントをアクセシブルにする

  チェック内容

  プロダクト（チェックID: 0591、NVDAによるチェック実施方法の例）

  • 静的なテキストではない部分（例：開閉するメニュー、タブ・パネル、日付選択UI）も、スクリーン・リーダーで問題なく操作できる。

ARIA tooltipノードにはアクセシブルな名前がなければなりません

すべてのARIA tooltipノードにはアクセシブルな名前があることを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

• 達成基準4.1.2

  • Name, Role, Value

  • 名前 (name) ・役割 (role) 及び値 (value)

関連するガイドラインとチェック内容

• マークアップ全般：[MUST] コンポーネントをアクセシブルにする

  チェック内容

  プロダクト（チェックID: 0591、NVDAによるチェック実施方法の例）

  • 静的なテキストではない部分（例：開閉するメニュー、タブ・パネル、日付選択UI）も、スクリーン・リーダーで問題なく操作できる。

ARIA属性は有効な名前に一致しなければなりません

aria-で始まる属性が有効なARIA属性であることを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

• 達成基準4.1.2

  • Name, Role, Value

  • 名前 (name) ・役割 (role) 及び値 (value)

関連するガイドラインとチェック内容

• マークアップ全般：[MUST] コンポーネントをアクセシブルにする

  チェック内容

  プロダクト（チェックID: 0591、NVDAによるチェック実施方法の例）

  • 静的なテキストではない部分（例：開閉するメニュー、タブ・パネル、日付選択UI）も、スクリーン・リーダーで問題なく操作できる。

ARIA属性は有効な値に一致しなければなりません

すべてのARIA属性に有効な値が存在することを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

• 達成基準4.1.2

  • Name, Role, Value

  • 名前 (name) ・役割 (role) 及び値 (value)

関連するガイドラインとチェック内容

• マークアップ全般：[MUST] コンポーネントをアクセシブルにする

  チェック内容

  プロダクト（チェックID: 0591、NVDAによるチェック実施方法の例）

  • 静的なテキストではない部分（例：開閉するメニュー、タブ・パネル、日付選択UI）も、スクリーン・リーダーで問題なく操作できる。

<audio>要素にはキャプショントラックが存在しなければなりません

<audio>要素にキャプションが存在することを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

• 達成基準1.2.1

  • Audio-only and Video-only (Prerecorded)

  • 音声のみ及び映像のみ (収録済)

関連するガイドラインとチェック内容

• 音声・映像コンテンツ：[MUST] テキスト情報と同等の内容にする

  チェック内容

  デザイン（チェックID: 1481）、プロダクト（チェックID: 1501）

  • 音声・映像コンテンツは、そのコンテンツがなくても不足なく情報が伝わるような内容で、そのコンテンツがテキスト情報の代替もしくは補助的な位置づけであることが明示されている。

• 音声・映像コンテンツ：[MUST] 書き起こしテキストの提供

  チェック内容

  プロダクト（チェックID: 1591）

  • 映像がない音声のみのコンテンツについて、音声を書き起こしたテキストが提供されている。

インラインのテキスト間隔設定はカスタムスタイルシートによって調整可能でなければなりません

style属性で指定されたテキストの間隔は、カスタムスタイルシートにより調整可能であることを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

• 達成基準1.4.12

  • Text Spacing

  • テキストの間隔

関連するガイドラインとチェック内容

• テキスト：[MUST] テキスト表示のカスタマイズ

  チェック内容

  プロダクト（チェックID: 0891）

  • line-heightを1.5em以上、段落間の空白を2em以上、letter-spacingを0.12em以上に変更するユーザーCSSを適用しても、表示順序が変わる、文章を途中で読めなくなるなど、コンテンツおよび機能に損失が生じない。

<blink>要素は廃止されており、使用するべきではありません

<blink>要素が使用されていないことを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

• 達成基準2.2.2

  • Pause, Stop, Hide

  • 一時停止、停止、非表示

関連するガイドラインとチェック内容

• 動的コンテンツ：[MUST] 点滅、スクロールを伴うコンテンツ

  チェック内容

  デザイン（チェックID: 1201）、プロダクト（チェックID: 1221）

  • 点滅、スクロールを伴うコンテンツがない。

• 動的コンテンツ：[MUST] 自動更新されるコンテンツ

  チェック内容

  デザイン（チェックID: 1231）、プロダクト（チェックID: 1251）

  • 自動更新されるコンテンツがない。または

  • ユーザーが自動更新の間隔やタイミングの変更、自動更新の停止をできる。

• 音声・映像コンテンツ：[MUST] 動きを伴うコンテンツ

  チェック内容

  デザイン（チェックID: 1451）、プロダクト（チェックID: 1471）

  • 自動的に開始し5秒以上続く動画、アニメーションがない。または

  • 動画やアニメーションを呈し、一時停止、または非表示にすることができる。

ボタンには認識可能なテキストが存在しなければなりません

ボタンに認識可能なテキストが存在することを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

• 達成基準4.1.2

  • Name, Role, Value

  • 名前 (name) ・役割 (role) 及び値 (value)

関連するガイドラインとチェック内容

• マークアップ全般：[MUST] コンポーネントをアクセシブルにする

  チェック内容

  プロダクト（チェックID: 0591、NVDAによるチェック実施方法の例）

  • 静的なテキストではない部分（例：開閉するメニュー、タブ・パネル、日付選択UI）も、スクリーン・リーダーで問題なく操作できる。

ページには繰り返されるブロックをスキップする手段が存在しなければなりません

各ページに少なくとも1つ、ユーザーがナビゲーション部分をスキップして直接本文へ移動できるメカニズムが存在することを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

• 達成基準2.4.1

  • Bypass Blocks

  • ブロックスキップ

関連するガイドラインとチェック内容

• ページ全体：[MUST] 本文の開始位置の明示

  チェック内容

  コード（チェックID: 0672）

  • main要素が本文の開始位置を反映している。または

  • 本文の先頭部分にh1要素やh2要素でマークアップされた見出しがある。

  プロダクト（チェックID: 0681、NVDAによるチェック実施方法の例）

  • スクリーン・リーダーの見出しジャンプ機能やARIAランドマークで示される領域間ジャンプ機能で本文の開始位置を見つけることができる。

要素には十分な色のコントラストがなければなりません

前景色と背景色のコントラストがWCAG 2のAAコントラスト比のしきい値を満たすことを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

• 達成基準1.4.3

  • Contrast (Minimum)

  • コントラスト (最低限)

関連するガイドラインとチェック内容

• 画像：[MUST] 画像内のテキストのコントラスト比

  チェック内容

  デザイン（チェックID: 0002）

  • テキストおよび画像化されたテキストの表示色と背景色には、充分なコントラスト比が確保されている。

    • 文字サイズが30px（22pt）以上の場合：3:1以上（[SHOULD] 4.5:1以上）

    • 文字サイズが22px（18pt）以上で太字の場合：3:1以上（[SHOULD] 4.5:1以上）

    • その他の場合：4.5:1以上（[SHOULD] 7:1以上）

• 画像化されたテキスト：[MUST] 画像内のテキストのコントラスト比

  チェック内容

  デザイン（チェックID: 0002）

  • テキストおよび画像化されたテキストの表示色と背景色には、充分なコントラスト比が確保されている。

    • 文字サイズが30px（22pt）以上の場合：3:1以上（[SHOULD] 4.5:1以上）

    • 文字サイズが22px（18pt）以上で太字の場合：3:1以上（[SHOULD] 4.5:1以上）

    • その他の場合：4.5:1以上（[SHOULD] 7:1以上）

• テキスト：[MUST] コントラスト比の確保

  チェック内容

  デザイン（チェックID: 0002）

  • テキストおよび画像化されたテキストの表示色と背景色には、充分なコントラスト比が確保されている。

    • 文字サイズが30px（22pt）以上の場合：3:1以上（[SHOULD] 4.5:1以上）

    • 文字サイズが22px（18pt）以上で太字の場合：3:1以上（[SHOULD] 4.5:1以上）

    • その他の場合：4.5:1以上（[SHOULD] 7:1以上）

  プロダクト（チェックID: 0021、axe DevToolsによるチェック実施方法の例）

  • テキストの表示色と背景色には、充分なコントラスト比が確保されている。

    • 文字サイズが30px（22pt）以上の場合：3:1以上（[SHOULD] 4.5:1以上）

    • 文字サイズが22px（18pt）以上で太字の場合：3:1以上（[SHOULD] 4.5:1以上）

    • その他の場合：4.5:1以上（[SHOULD] 7:1以上）

ディスプレイの向きを固定するためにCSSメディアクエリーは使用されていません

コンテンツが特定のディスプレイの向きに固定されていないこと、およびコンテンツがすべてのディスプレイの向きで操作可能なことを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

• 達成基準1.3.4

  • Orientation

  • 表示の向き

関連するガイドラインとチェック内容

• ページ全体：[MUST] 画面方向を固定しない

  チェック内容

  デザイン（チェックID: 0751）

  • 特定の画面方向に固定した使用を前提としたデザインになっていない。

  プロダクト（チェックID: 0771）

  • 画面方向を検知できる端末において、端末の方向を変えると適切に画面が回転する。

<dl>要素は、適切な順序で並べられた<dt>および<dd>グループ、<script>要素または<template>要素のみを直接含んでいなければなりません

<dl>要素の構造が正しいことを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

• 達成基準1.3.1

  • Info and Relationships

  • 情報及び関係性

関連するガイドラインとチェック内容

• フォーム：[MUST] 表示されているテキストをラベルとして用いる

  チェック内容

  デザイン（チェックID: 0931）

  • フォーム・コントロールについて、役割が分かり、画面上に表示されているテキストまたは代替テキストが付加された画像を、ラベルとして設計資料に定義している。または

  • aria-label属性値として指定すべき、フォーム・コントロールの役割を示すテキストを設計資料に定義している。

  コード（チェックID: 0941）

  • フォーム・コントロールは、ラベルとなるテキストまたは画像とlabel要素またはaria-labelledby属性で関連付けられている。または

  • aria-label属性で適切なラベルが付けられている。

  • 開発者ツールで確認するとフォーム・コントロールのaccessible nameに役割が分かるテキストが指定されている状態になっている。

  プロダクト（チェックID: 0951、axe DevToolsによるチェック実施方法の例）

  • フォーム・コントロールの役割が分かるテキストまたは代替テキストが付加された画像がラベルとして表示されていて、このテキストをクリックすると当該のフォーム・コントロールにフォーカスが移動する。または

  • スクリーン・リーダーでフォーム・コントロールとラベルの関連付けが分かるような読み上げがされる。

• フォーム：[MUST] 表示されているテキストをラベルにできない場合

  チェック内容

  デザイン（チェックID: 0931）

  • フォーム・コントロールについて、役割が分かり、画面上に表示されているテキストまたは代替テキストが付加された画像を、ラベルとして設計資料に定義している。または

  • aria-label属性値として指定すべき、フォーム・コントロールの役割を示すテキストを設計資料に定義している。

  コード（チェックID: 0941）

  • フォーム・コントロールは、ラベルとなるテキストまたは画像とlabel要素またはaria-labelledby属性で関連付けられている。または

  • aria-label属性で適切なラベルが付けられている。

  • 開発者ツールで確認するとフォーム・コントロールのaccessible nameに役割が分かるテキストが指定されている状態になっている。

  プロダクト（チェックID: 0951、axe DevToolsによるチェック実施方法の例）

  • フォーム・コントロールの役割が分かるテキストまたは代替テキストが付加された画像がラベルとして表示されていて、このテキストをクリックすると当該のフォーム・コントロールにフォーカスが移動する。または

  • スクリーン・リーダーでフォーム・コントロールとラベルの関連付けが分かるような読み上げがされる。

• マークアップ全般：[MUST] 文書構造を適切にマークアップする

  チェック内容

  デザイン（チェックID: 0541）

  • 見出し（h1～h6）、箇条書き（ul, ol, dl）、表（table）など、HTMLのセマンティクスで表現できるものがそれらで表現されるよう、設計資料で明示されている。

  コード（チェックID: 0551）

  • 見出し（h1～h6）、箇条書き（ul, ol, dl）、表（table）などを用いてセマンティクスが適切にマークアップされている。

  プロダクト（チェックID: 0561、NVDAによるチェック実施方法の例、axe DevToolsによるチェック実施方法の例）

  • 設計資料で見出しとして示されているものを、スクリーン・リーダーが見出しとして認識している。

  プロダクト（チェックID: 0562、NVDAによるチェック実施方法の例）

  • スクリーン・リーダーが、表（table）を適切に認識していて、表中のセルも適切に認識している。

• ページ全体：[MUST] ページを構成する領域の明示

  チェック内容

  デザイン（チェックID: 0661）

  • ページのどの部分がそれぞれheader, nav, main, footer要素でマークアップされるべきかが、複数のページで一貫した形で設計資料に明示されている。

  コード（チェックID: 0671）

  • header, main, nav, footerの各要素が適切に用いられている。または

  • これらがrole属性で明示されている。

<dt>および<dd>要素は<dl>に含まれていなければなりません

<dt>および<dd>要素が<dl>に含まれていることを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

• 達成基準1.3.1

  • Info and Relationships

  • 情報及び関係性

関連するガイドラインとチェック内容

• フォーム：[MUST] 表示されているテキストをラベルとして用いる

  チェック内容

  デザイン（チェックID: 0931）

  • フォーム・コントロールについて、役割が分かり、画面上に表示されているテキストまたは代替テキストが付加された画像を、ラベルとして設計資料に定義している。または

  • aria-label属性値として指定すべき、フォーム・コントロールの役割を示すテキストを設計資料に定義している。

  コード（チェックID: 0941）

  • フォーム・コントロールは、ラベルとなるテキストまたは画像とlabel要素またはaria-labelledby属性で関連付けられている。または

  • aria-label属性で適切なラベルが付けられている。

  • 開発者ツールで確認するとフォーム・コントロールのaccessible nameに役割が分かるテキストが指定されている状態になっている。

  プロダクト（チェックID: 0951、axe DevToolsによるチェック実施方法の例）

  • フォーム・コントロールの役割が分かるテキストまたは代替テキストが付加された画像がラベルとして表示されていて、このテキストをクリックすると当該のフォーム・コントロールにフォーカスが移動する。または

  • スクリーン・リーダーでフォーム・コントロールとラベルの関連付けが分かるような読み上げがされる。

• フォーム：[MUST] 表示されているテキストをラベルにできない場合

  チェック内容

  デザイン（チェックID: 0931）

  • フォーム・コントロールについて、役割が分かり、画面上に表示されているテキストまたは代替テキストが付加された画像を、ラベルとして設計資料に定義している。または

  • aria-label属性値として指定すべき、フォーム・コントロールの役割を示すテキストを設計資料に定義している。

  コード（チェックID: 0941）

  • フォーム・コントロールは、ラベルとなるテキストまたは画像とlabel要素またはaria-labelledby属性で関連付けられている。または

  • aria-label属性で適切なラベルが付けられている。

  • 開発者ツールで確認するとフォーム・コントロールのaccessible nameに役割が分かるテキストが指定されている状態になっている。

  プロダクト（チェックID: 0951、axe DevToolsによるチェック実施方法の例）

  • フォーム・コントロールの役割が分かるテキストまたは代替テキストが付加された画像がラベルとして表示されていて、このテキストをクリックすると当該のフォーム・コントロールにフォーカスが移動する。または

  • スクリーン・リーダーでフォーム・コントロールとラベルの関連付けが分かるような読み上げがされる。

• マークアップ全般：[MUST] 文書構造を適切にマークアップする

  チェック内容

  デザイン（チェックID: 0541）

  • 見出し（h1～h6）、箇条書き（ul, ol, dl）、表（table）など、HTMLのセマンティクスで表現できるものがそれらで表現されるよう、設計資料で明示されている。

  コード（チェックID: 0551）

  • 見出し（h1～h6）、箇条書き（ul, ol, dl）、表（table）などを用いてセマンティクスが適切にマークアップされている。

  プロダクト（チェックID: 0561、NVDAによるチェック実施方法の例、axe DevToolsによるチェック実施方法の例）

  • 設計資料で見出しとして示されているものを、スクリーン・リーダーが見出しとして認識している。

  プロダクト（チェックID: 0562、NVDAによるチェック実施方法の例）

  • スクリーン・リーダーが、表（table）を適切に認識していて、表中のセルも適切に認識している。

• ページ全体：[MUST] ページを構成する領域の明示

  チェック内容

  デザイン（チェックID: 0661）

  • ページのどの部分がそれぞれheader, nav, main, footer要素でマークアップされるべきかが、複数のページで一貫した形で設計資料に明示されている。

  コード（チェックID: 0671）

  • header, main, nav, footerの各要素が適切に用いられている。または

  • これらがrole属性で明示されている。

ドキュメントにはナビゲーションを補助するために<title>要素がなければなりません

各HTMLドキュメントに空ではない<title>要素が含まれていることを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

• 達成基準2.4.2

  • Page Titled

  • ページタイトル

関連するガイドラインとチェック内容

• ページ全体：[MUST] タイトルの指定

  チェック内容

  デザイン（チェックID: 0631）

  • そのページの目的を示し、かつ他のページとは異なるページ・タイトル（title要素）が設計資料で定義されている。

  プロダクト（チェックID: 0651）

  • そのページの目的を示し、かつ他のページとは異なるページ・タイトルが付けられている。（ブラウザーのタイトルバー/タブバーに表示されている。）

id属性値は一意でなければなりません

すべてのid属性値が一意であることを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

• 達成基準4.1.1

  • Parsing

  • 構文解析

関連するガイドラインとチェック内容

• マークアップ全般：[MUST] 文法的に正しいマークアップ

  チェック内容

  コード（チェックID: 0571）

  • validatorやlinterでチェックが通る。

活性要素のIDは一意でなければなりません

活性要素のid属性値が一意であることを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

• 達成基準4.1.1

  • Parsing

  • 構文解析

関連するガイドラインとチェック内容

• マークアップ全般：[MUST] 文法的に正しいマークアップ

  チェック内容

  コード（チェックID: 0571）

  • validatorやlinterでチェックが通る。

ARIAおよびラベルに使用されているIDは一意でなければなりません

ARIAおよびラベルに使用されているすべてのid属性値が一意であることを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

• 達成基準4.1.1

  • Parsing

  • 構文解析

関連するガイドラインとチェック内容

• マークアップ全般：[MUST] 文法的に正しいマークアップ

  チェック内容

  コード（チェックID: 0571）

  • validatorやlinterでチェックが通る。

テーブルのヘッダーは空にしてはなりません

テーブルのヘッダーに認識可能なテキストが存在することを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

• 達成基準1.3.1

  • Info and Relationships

  • 情報及び関係性

関連するガイドラインとチェック内容

• フォーム：[MUST] 表示されているテキストをラベルとして用いる

  チェック内容

  デザイン（チェックID: 0931）

  • フォーム・コントロールについて、役割が分かり、画面上に表示されているテキストまたは代替テキストが付加された画像を、ラベルとして設計資料に定義している。または

  • aria-label属性値として指定すべき、フォーム・コントロールの役割を示すテキストを設計資料に定義している。

  コード（チェックID: 0941）

  • フォーム・コントロールは、ラベルとなるテキストまたは画像とlabel要素またはaria-labelledby属性で関連付けられている。または

  • aria-label属性で適切なラベルが付けられている。

  • 開発者ツールで確認するとフォーム・コントロールのaccessible nameに役割が分かるテキストが指定されている状態になっている。

  プロダクト（チェックID: 0951、axe DevToolsによるチェック実施方法の例）

  • フォーム・コントロールの役割が分かるテキストまたは代替テキストが付加された画像がラベルとして表示されていて、このテキストをクリックすると当該のフォーム・コントロールにフォーカスが移動する。または

  • スクリーン・リーダーでフォーム・コントロールとラベルの関連付けが分かるような読み上げがされる。

• フォーム：[MUST] 表示されているテキストをラベルにできない場合

  チェック内容

  デザイン（チェックID: 0931）

  • フォーム・コントロールについて、役割が分かり、画面上に表示されているテキストまたは代替テキストが付加された画像を、ラベルとして設計資料に定義している。または

  • aria-label属性値として指定すべき、フォーム・コントロールの役割を示すテキストを設計資料に定義している。

  コード（チェックID: 0941）

  • フォーム・コントロールは、ラベルとなるテキストまたは画像とlabel要素またはaria-labelledby属性で関連付けられている。または

  • aria-label属性で適切なラベルが付けられている。

  • 開発者ツールで確認するとフォーム・コントロールのaccessible nameに役割が分かるテキストが指定されている状態になっている。

  プロダクト（チェックID: 0951、axe DevToolsによるチェック実施方法の例）

  • フォーム・コントロールの役割が分かるテキストまたは代替テキストが付加された画像がラベルとして表示されていて、このテキストをクリックすると当該のフォーム・コントロールにフォーカスが移動する。または

  • スクリーン・リーダーでフォーム・コントロールとラベルの関連付けが分かるような読み上げがされる。

• マークアップ全般：[MUST] 文書構造を適切にマークアップする

  チェック内容

  デザイン（チェックID: 0541）

  • 見出し（h1～h6）、箇条書き（ul, ol, dl）、表（table）など、HTMLのセマンティクスで表現できるものがそれらで表現されるよう、設計資料で明示されている。

  コード（チェックID: 0551）

  • 見出し（h1～h6）、箇条書き（ul, ol, dl）、表（table）などを用いてセマンティクスが適切にマークアップされている。

  プロダクト（チェックID: 0561、NVDAによるチェック実施方法の例、axe DevToolsによるチェック実施方法の例）

  • 設計資料で見出しとして示されているものを、スクリーン・リーダーが見出しとして認識している。

  プロダクト（チェックID: 0562、NVDAによるチェック実施方法の例）

  • スクリーン・リーダーが、表（table）を適切に認識していて、表中のセルも適切に認識している。

• ページ全体：[MUST] ページを構成する領域の明示

  チェック内容

  デザイン（チェックID: 0661）

  • ページのどの部分がそれぞれheader, nav, main, footer要素でマークアップされるべきかが、複数のページで一貫した形で設計資料に明示されている。

  コード（チェックID: 0671）

  • header, main, nav, footerの各要素が適切に用いられている。または

  • これらがrole属性で明示されている。

複数のlabel要素をフォームフィールドに付与するべきではありません

フォームフィールドに複数のlabel要素が存在しないことを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

• 達成基準3.3.2

  • Labels or Instructions

  • ラベル又は説明

関連するガイドラインとチェック内容

• フォーム：[MUST] 表示されているテキストをラベルとして用いる

  チェック内容

  デザイン（チェックID: 0931）

  • フォーム・コントロールについて、役割が分かり、画面上に表示されているテキストまたは代替テキストが付加された画像を、ラベルとして設計資料に定義している。または

  • aria-label属性値として指定すべき、フォーム・コントロールの役割を示すテキストを設計資料に定義している。

  コード（チェックID: 0941）

  • フォーム・コントロールは、ラベルとなるテキストまたは画像とlabel要素またはaria-labelledby属性で関連付けられている。または

  • aria-label属性で適切なラベルが付けられている。

  • 開発者ツールで確認するとフォーム・コントロールのaccessible nameに役割が分かるテキストが指定されている状態になっている。

  プロダクト（チェックID: 0951、axe DevToolsによるチェック実施方法の例）

  • フォーム・コントロールの役割が分かるテキストまたは代替テキストが付加された画像がラベルとして表示されていて、このテキストをクリックすると当該のフォーム・コントロールにフォーカスが移動する。または

  • スクリーン・リーダーでフォーム・コントロールとラベルの関連付けが分かるような読み上げがされる。

• フォーム：[MUST] 表示されているテキストをラベルにできない場合

  チェック内容

  デザイン（チェックID: 0931）

  • フォーム・コントロールについて、役割が分かり、画面上に表示されているテキストまたは代替テキストが付加された画像を、ラベルとして設計資料に定義している。または

  • aria-label属性値として指定すべき、フォーム・コントロールの役割を示すテキストを設計資料に定義している。

  コード（チェックID: 0941）

  • フォーム・コントロールは、ラベルとなるテキストまたは画像とlabel要素またはaria-labelledby属性で関連付けられている。または

  • aria-label属性で適切なラベルが付けられている。

  • 開発者ツールで確認するとフォーム・コントロールのaccessible nameに役割が分かるテキストが指定されている状態になっている。

  プロダクト（チェックID: 0951、axe DevToolsによるチェック実施方法の例）

  • フォーム・コントロールの役割が分かるテキストまたは代替テキストが付加された画像がラベルとして表示されていて、このテキストをクリックすると当該のフォーム・コントロールにフォーカスが移動する。または

  • スクリーン・リーダーでフォーム・コントロールとラベルの関連付けが分かるような読み上げがされる。

tabindex=-1が指定されているフレームには、フォーカス可能なコンテンツが含まれていてはなりません

tabindex=-1が指定されている<frame>と<iframe>要素が、フォーカス可能なコンテンツを含まないことを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

• 達成基準2.1.1

  • Keyboard

  • キーボード

関連するガイドラインとチェック内容

• 入力ディバイス：[MUST] キーボード操作を可能にする

  チェック内容

  プロダクト（チェックID: 0172）

  • Tab/Shift+Tabキーを使ったフォーカスの移動時、文脈、レイアウト、操作手順に即した自然な順序でフォーカスが移動する。

    • リンクとボタン

    • フォーム・コントロール

    • その他、マウスやキーボードによる操作を受け付けるすべてのもの

  デザイン（チェックID: 0211）

  • クリックやホバーなどのマウス操作を受け付けるものは、キーボードのみでも操作できるように設計されている。

  プロダクト（チェックID: 0231）

  • クリックやホバーなどのマウス操作を受け付けるものは、キーボードのみでも操作できる。

フレームにはtitle属性がなければなりません

<iframe>および<frame>要素に空ではないtitle属性が存在することを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

• 達成基準2.4.1

  • Bypass Blocks

  • ブロックスキップ

• 達成基準4.1.2

  • Name, Role, Value

  • 名前 (name) ・役割 (role) 及び値 (value)

関連するガイドラインとチェック内容

• ページ全体：[MUST] 本文の開始位置の明示

  チェック内容

  コード（チェックID: 0672）

  • main要素が本文の開始位置を反映している。または

  • 本文の先頭部分にh1要素やh2要素でマークアップされた見出しがある。

  プロダクト（チェックID: 0681、NVDAによるチェック実施方法の例）

  • スクリーン・リーダーの見出しジャンプ機能やARIAランドマークで示される領域間ジャンプ機能で本文の開始位置を見つけることができる。

• マークアップ全般：[MUST] コンポーネントをアクセシブルにする

  チェック内容

  プロダクト（チェックID: 0591、NVDAによるチェック実施方法の例）

  • 静的なテキストではない部分（例：開閉するメニュー、タブ・パネル、日付選択UI）も、スクリーン・リーダーで問題なく操作できる。

<html>要素にはlang属性がなければなりません

すべてのHTMLドキュメントにlang属性が存在することを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

• 達成基準3.1.1

  • Language of Page

  • ページの言語

関連するガイドラインとチェック内容

• テキスト：[MUST] ページの主たる言語の指定

  チェック内容

  コード（チェックID: 0611）

  • 日本語のページには、<html lang="ja">の記述がある。

  プロダクト（チェックID: 0621、NVDAによるチェック実施方法の例）

  • 多言語対応している読み上げ環境を用いて読み上げさせたとき、適切な言語の音声エンジンで読み上げられる。

<html>要素のlang属性には有効な値がなければなりません

<html>要素のlang属性に有効な値があることを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

• 達成基準3.1.1

  • Language of Page

  • ページの言語

関連するガイドラインとチェック内容

• テキスト：[MUST] ページの主たる言語の指定

  チェック内容

  コード（チェックID: 0611）

  • 日本語のページには、<html lang="ja">の記述がある。

  プロダクト（チェックID: 0621、NVDAによるチェック実施方法の例）

  • 多言語対応している読み上げ環境を用いて読み上げさせたとき、適切な言語の音声エンジンで読み上げられる。

HTML要素に指定されたlangおよびxml:lang属性は同じ基本言語を持たなければなりません

HTML要素に指定された有効なlangおよびxml:lang属性の両方がページの基本言語と一致することを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

• 達成基準3.1.1

  • Language of Page

  • ページの言語

関連するガイドラインとチェック内容

• テキスト：[MUST] ページの主たる言語の指定

  チェック内容

  コード（チェックID: 0611）

  • 日本語のページには、<html lang="ja">の記述がある。

  プロダクト（チェックID: 0621、NVDAによるチェック実施方法の例）

  • 多言語対応している読み上げ環境を用いて読み上げさせたとき、適切な言語の音声エンジンで読み上げられる。

画像には代替テキストがなければなりません

<img>要素に代替テキストが存在する、またはnoneまたはpresentationのロールが存在することを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

• 達成基準1.1.1

  • Non-text Content

  • 非テキストコンテンツ

関連するガイドラインとチェック内容

• フォーム：[MUST] 表示されているテキストをラベルとして用いる

  チェック内容

  デザイン（チェックID: 0931）

  • フォーム・コントロールについて、役割が分かり、画面上に表示されているテキストまたは代替テキストが付加された画像を、ラベルとして設計資料に定義している。または

  • aria-label属性値として指定すべき、フォーム・コントロールの役割を示すテキストを設計資料に定義している。

  コード（チェックID: 0941）

  • フォーム・コントロールは、ラベルとなるテキストまたは画像とlabel要素またはaria-labelledby属性で関連付けられている。または

  • aria-label属性で適切なラベルが付けられている。

  • 開発者ツールで確認するとフォーム・コントロールのaccessible nameに役割が分かるテキストが指定されている状態になっている。

  プロダクト（チェックID: 0951、axe DevToolsによるチェック実施方法の例）

  • フォーム・コントロールの役割が分かるテキストまたは代替テキストが付加された画像がラベルとして表示されていて、このテキストをクリックすると当該のフォーム・コントロールにフォーカスが移動する。または

  • スクリーン・リーダーでフォーム・コントロールとラベルの関連付けが分かるような読み上げがされる。

• フォーム：[MUST] 表示されているテキストをラベルにできない場合

  チェック内容

  デザイン（チェックID: 0931）

  • フォーム・コントロールについて、役割が分かり、画面上に表示されているテキストまたは代替テキストが付加された画像を、ラベルとして設計資料に定義している。または

  • aria-label属性値として指定すべき、フォーム・コントロールの役割を示すテキストを設計資料に定義している。

  コード（チェックID: 0941）

  • フォーム・コントロールは、ラベルとなるテキストまたは画像とlabel要素またはaria-labelledby属性で関連付けられている。または

  • aria-label属性で適切なラベルが付けられている。

  • 開発者ツールで確認するとフォーム・コントロールのaccessible nameに役割が分かるテキストが指定されている状態になっている。

  プロダクト（チェックID: 0951、axe DevToolsによるチェック実施方法の例）

  • フォーム・コントロールの役割が分かるテキストまたは代替テキストが付加された画像がラベルとして表示されていて、このテキストをクリックすると当該のフォーム・コントロールにフォーカスが移動する。または

  • スクリーン・リーダーでフォーム・コントロールとラベルの関連付けが分かるような読み上げがされる。

• アイコン：[MUST] テキスト情報の付与

  チェック内容

  デザイン（チェックID: 0391）

  • アイコンには、その役割や示している状態を表すテキスト・ラベルが併せて表示されている。または

  • テキスト・ラベルを表示できない場合、色の違いだけでアイコンの意味の違いを表さず、形状（モチーフ）やサイズでも違いを示している。かつ

  • 役割や意味がわかるalt属性の値を設計資料で明示している。

  コード（チェックID: 0401）

  • アイコンの役割や示している状態を表すテキストが表示されていて、aria-labelledby属性で関連付けられている。または

  • alt属性またはaria-label属性で、そのようなテキストが指定されている。

  • 開発者ツールで確認すると、Accessible Nameに適切なテキストが設定されている状態になっている。

  プロダクト（チェックID: 0411、NVDAによるチェック実施方法の例）

  • アイコンの役割や示している状態が分かるテキストが、スクリーン・リーダーで読み上げられる。

• 画像：[MUST] 画像の説明の提供

  チェック内容

  デザイン（チェックID: 0421）

  • 画像に関する簡潔で過不足ない説明（alt属性値）が、設計資料で明示されている。かつ

  • 短いテキストでは充分に説明できない場合には、詳細な説明のテキストが設計資料で明示されている。

  コード（チェックID: 0431）

  • 画像に関する簡潔で過不足ない説明がalt属性やaria-label属性で付加されている。かつ

  • 詳細な説明が必要な場合には、その説明が当該の画像の直前または直後に表示されている、またはaria-describedby属性で関連付けられている。

  プロダクト（チェックID: 0441、NVDAによるチェック実施方法の例、axe DevToolsによるチェック実施方法の例）

  • 画像の説明がスクリーン・リーダーで適切に読み上げられる。

• 画像：[MUST] 装飾目的の画像の無視

  チェック内容

  デザイン（チェックID: 0451）

  • 情報や機能性を一切持たない画像は、説明のテキストを付加してはならないことが設計資料で明示されている。

  コード（チェックID: 0461）

  • 情報や機能性を一切持たない画像には、空のalt属性（alt=""）やrole="presentation"が付与されていて、スクリーン・リーダーで読み上げられない。

  プロダクト（チェックID: 0471、NVDAによるチェック実施方法の例）

  • 情報や機能性を一切持たない画像は、スクリーン・リーダーで読み上げられない。

• 画像化されたテキスト：[MUST] テキスト情報の提供

  チェック内容

  コード（チェックID: 0521）

  • 画像化されているテキストと同じ内容がalt属性またはaria-label属性で示されていて、スクリーン・リーダーなどで確認できる。

  プロダクト（チェックID: 0531、NVDAによるチェック実施方法の例）

  • 画像化されているテキストと同じ内容がスクリーン・リーダーなどで確認できる。

• 音声・映像コンテンツ：[MUST] 音声・映像コンテンツの存在を明示する

  チェック内容

  プロダクト（チェックID: 1411）

  • ページ内に埋め込まれる音声/動画プレイヤーについて、適切なラベル付けがされていてそこにプレイヤーがあることが容易に認知できるようになっている。または

  • 前後のテキストから、そこにプレイヤーがあることが推測できる。

入力ボタンには認識可能なテキストが存在しなければなりません

入力ボタンに認識可能なテキストが存在することを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

• 達成基準4.1.2

  • Name, Role, Value

  • 名前 (name) ・役割 (role) 及び値 (value)

関連するガイドラインとチェック内容

• マークアップ全般：[MUST] コンポーネントをアクセシブルにする

  チェック内容

  プロダクト（チェックID: 0591、NVDAによるチェック実施方法の例）

  • 静的なテキストではない部分（例：開閉するメニュー、タブ・パネル、日付選択UI）も、スクリーン・リーダーで問題なく操作できる。

画像ボタンには代替テキストがなければなりません

<input type="image">要素に代替テキストが存在することを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

• 達成基準1.1.1

  • Non-text Content

  • 非テキストコンテンツ

関連するガイドラインとチェック内容

• フォーム：[MUST] 表示されているテキストをラベルとして用いる

  チェック内容

  デザイン（チェックID: 0931）

  • フォーム・コントロールについて、役割が分かり、画面上に表示されているテキストまたは代替テキストが付加された画像を、ラベルとして設計資料に定義している。または

  • aria-label属性値として指定すべき、フォーム・コントロールの役割を示すテキストを設計資料に定義している。

  コード（チェックID: 0941）

  • フォーム・コントロールは、ラベルとなるテキストまたは画像とlabel要素またはaria-labelledby属性で関連付けられている。または

  • aria-label属性で適切なラベルが付けられている。

  • 開発者ツールで確認するとフォーム・コントロールのaccessible nameに役割が分かるテキストが指定されている状態になっている。

  プロダクト（チェックID: 0951、axe DevToolsによるチェック実施方法の例）

  • フォーム・コントロールの役割が分かるテキストまたは代替テキストが付加された画像がラベルとして表示されていて、このテキストをクリックすると当該のフォーム・コントロールにフォーカスが移動する。または

  • スクリーン・リーダーでフォーム・コントロールとラベルの関連付けが分かるような読み上げがされる。

• フォーム：[MUST] 表示されているテキストをラベルにできない場合

  チェック内容

  デザイン（チェックID: 0931）

  • フォーム・コントロールについて、役割が分かり、画面上に表示されているテキストまたは代替テキストが付加された画像を、ラベルとして設計資料に定義している。または

  • aria-label属性値として指定すべき、フォーム・コントロールの役割を示すテキストを設計資料に定義している。

  コード（チェックID: 0941）

  • フォーム・コントロールは、ラベルとなるテキストまたは画像とlabel要素またはaria-labelledby属性で関連付けられている。または

  • aria-label属性で適切なラベルが付けられている。

  • 開発者ツールで確認するとフォーム・コントロールのaccessible nameに役割が分かるテキストが指定されている状態になっている。

  プロダクト（チェックID: 0951、axe DevToolsによるチェック実施方法の例）

  • フォーム・コントロールの役割が分かるテキストまたは代替テキストが付加された画像がラベルとして表示されていて、このテキストをクリックすると当該のフォーム・コントロールにフォーカスが移動する。または

  • スクリーン・リーダーでフォーム・コントロールとラベルの関連付けが分かるような読み上げがされる。

• アイコン：[MUST] テキスト情報の付与

  チェック内容

  デザイン（チェックID: 0391）

  • アイコンには、その役割や示している状態を表すテキスト・ラベルが併せて表示されている。または

  • テキスト・ラベルを表示できない場合、色の違いだけでアイコンの意味の違いを表さず、形状（モチーフ）やサイズでも違いを示している。かつ

  • 役割や意味がわかるalt属性の値を設計資料で明示している。

  コード（チェックID: 0401）

  • アイコンの役割や示している状態を表すテキストが表示されていて、aria-labelledby属性で関連付けられている。または

  • alt属性またはaria-label属性で、そのようなテキストが指定されている。

  • 開発者ツールで確認すると、Accessible Nameに適切なテキストが設定されている状態になっている。

  プロダクト（チェックID: 0411、NVDAによるチェック実施方法の例）

  • アイコンの役割や示している状態が分かるテキストが、スクリーン・リーダーで読み上げられる。

• 画像：[MUST] 画像の説明の提供

  チェック内容

  デザイン（チェックID: 0421）

  • 画像に関する簡潔で過不足ない説明（alt属性値）が、設計資料で明示されている。かつ

  • 短いテキストでは充分に説明できない場合には、詳細な説明のテキストが設計資料で明示されている。

  コード（チェックID: 0431）

  • 画像に関する簡潔で過不足ない説明がalt属性やaria-label属性で付加されている。かつ

  • 詳細な説明が必要な場合には、その説明が当該の画像の直前または直後に表示されている、またはaria-describedby属性で関連付けられている。

  プロダクト（チェックID: 0441、NVDAによるチェック実施方法の例、axe DevToolsによるチェック実施方法の例）

  • 画像の説明がスクリーン・リーダーで適切に読み上げられる。

• 画像：[MUST] 装飾目的の画像の無視

  チェック内容

  デザイン（チェックID: 0451）

  • 情報や機能性を一切持たない画像は、説明のテキストを付加してはならないことが設計資料で明示されている。

  コード（チェックID: 0461）

  • 情報や機能性を一切持たない画像には、空のalt属性（alt=""）やrole="presentation"が付与されていて、スクリーン・リーダーで読み上げられない。

  プロダクト（チェックID: 0471、NVDAによるチェック実施方法の例）

  • 情報や機能性を一切持たない画像は、スクリーン・リーダーで読み上げられない。

• 画像化されたテキスト：[MUST] テキスト情報の提供

  チェック内容

  コード（チェックID: 0521）

  • 画像化されているテキストと同じ内容がalt属性またはaria-label属性で示されていて、スクリーン・リーダーなどで確認できる。

  プロダクト（チェックID: 0531、NVDAによるチェック実施方法の例）

  • 画像化されているテキストと同じ内容がスクリーン・リーダーなどで確認できる。

• 音声・映像コンテンツ：[MUST] 音声・映像コンテンツの存在を明示する

  チェック内容

  プロダクト（チェックID: 1411）

  • ページ内に埋め込まれる音声/動画プレイヤーについて、適切なラベル付けがされていてそこにプレイヤーがあることが容易に認知できるようになっている。または

  • 前後のテキストから、そこにプレイヤーがあることが推測できる。

フォーム要素にはラベルがなければなりません

すべてのフォーム要素にラベルが存在することを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

• 達成基準4.1.2

  • Name, Role, Value

  • 名前 (name) ・役割 (role) 及び値 (value)

• 達成基準1.3.1

  • Info and Relationships

  • 情報及び関係性

関連するガイドラインとチェック内容

• マークアップ全般：[MUST] コンポーネントをアクセシブルにする

  チェック内容

  プロダクト（チェックID: 0591、NVDAによるチェック実施方法の例）

  • 静的なテキストではない部分（例：開閉するメニュー、タブ・パネル、日付選択UI）も、スクリーン・リーダーで問題なく操作できる。

• フォーム：[MUST] 表示されているテキストをラベルとして用いる

  チェック内容

  デザイン（チェックID: 0931）

  • フォーム・コントロールについて、役割が分かり、画面上に表示されているテキストまたは代替テキストが付加された画像を、ラベルとして設計資料に定義している。または

  • aria-label属性値として指定すべき、フォーム・コントロールの役割を示すテキストを設計資料に定義している。

  コード（チェックID: 0941）

  • フォーム・コントロールは、ラベルとなるテキストまたは画像とlabel要素またはaria-labelledby属性で関連付けられている。または

  • aria-label属性で適切なラベルが付けられている。

  • 開発者ツールで確認するとフォーム・コントロールのaccessible nameに役割が分かるテキストが指定されている状態になっている。

  プロダクト（チェックID: 0951、axe DevToolsによるチェック実施方法の例）

  • フォーム・コントロールの役割が分かるテキストまたは代替テキストが付加された画像がラベルとして表示されていて、このテキストをクリックすると当該のフォーム・コントロールにフォーカスが移動する。または

  • スクリーン・リーダーでフォーム・コントロールとラベルの関連付けが分かるような読み上げがされる。

• フォーム：[MUST] 表示されているテキストをラベルにできない場合

  チェック内容

  デザイン（チェックID: 0931）

  • フォーム・コントロールについて、役割が分かり、画面上に表示されているテキストまたは代替テキストが付加された画像を、ラベルとして設計資料に定義している。または

  • aria-label属性値として指定すべき、フォーム・コントロールの役割を示すテキストを設計資料に定義している。

  コード（チェックID: 0941）

  • フォーム・コントロールは、ラベルとなるテキストまたは画像とlabel要素またはaria-labelledby属性で関連付けられている。または

  • aria-label属性で適切なラベルが付けられている。

  • 開発者ツールで確認するとフォーム・コントロールのaccessible nameに役割が分かるテキストが指定されている状態になっている。

  プロダクト（チェックID: 0951、axe DevToolsによるチェック実施方法の例）

  • フォーム・コントロールの役割が分かるテキストまたは代替テキストが付加された画像がラベルとして表示されていて、このテキストをクリックすると当該のフォーム・コントロールにフォーカスが移動する。または

  • スクリーン・リーダーでフォーム・コントロールとラベルの関連付けが分かるような読み上げがされる。

• マークアップ全般：[MUST] 文書構造を適切にマークアップする

  チェック内容

  デザイン（チェックID: 0541）

  • 見出し（h1～h6）、箇条書き（ul, ol, dl）、表（table）など、HTMLのセマンティクスで表現できるものがそれらで表現されるよう、設計資料で明示されている。

  コード（チェックID: 0551）

  • 見出し（h1～h6）、箇条書き（ul, ol, dl）、表（table）などを用いてセマンティクスが適切にマークアップされている。

  プロダクト（チェックID: 0561、NVDAによるチェック実施方法の例、axe DevToolsによるチェック実施方法の例）

  • 設計資料で見出しとして示されているものを、スクリーン・リーダーが見出しとして認識している。

  プロダクト（チェックID: 0562、NVDAによるチェック実施方法の例）

  • スクリーン・リーダーが、表（table）を適切に認識していて、表中のセルも適切に認識している。

• ページ全体：[MUST] ページを構成する領域の明示

  チェック内容

  デザイン（チェックID: 0661）

  • ページのどの部分がそれぞれheader, nav, main, footer要素でマークアップされるべきかが、複数のページで一貫した形で設計資料に明示されている。

  コード（チェックID: 0671）

  • header, main, nav, footerの各要素が適切に用いられている。または

  • これらがrole属性で明示されている。

要素の視認できるテキストはそれらのアクセシブルな名前の一部でなければなりません

コンテンツによってラベル付けされた要素は、それらの視認できるテキストがアクセシブルな名前の一部になっていることを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

• 達成基準2.5.3

  • Label in Name

  • 名前 (name) のラベル

関連するガイドラインとチェック内容

• フォーム：[MUST] 表示されているテキストをラベルとして用いる

  チェック内容

  デザイン（チェックID: 0931）

  • フォーム・コントロールについて、役割が分かり、画面上に表示されているテキストまたは代替テキストが付加された画像を、ラベルとして設計資料に定義している。または

  • aria-label属性値として指定すべき、フォーム・コントロールの役割を示すテキストを設計資料に定義している。

  コード（チェックID: 0941）

  • フォーム・コントロールは、ラベルとなるテキストまたは画像とlabel要素またはaria-labelledby属性で関連付けられている。または

  • aria-label属性で適切なラベルが付けられている。

  • 開発者ツールで確認するとフォーム・コントロールのaccessible nameに役割が分かるテキストが指定されている状態になっている。

  プロダクト（チェックID: 0951、axe DevToolsによるチェック実施方法の例）

  • フォーム・コントロールの役割が分かるテキストまたは代替テキストが付加された画像がラベルとして表示されていて、このテキストをクリックすると当該のフォーム・コントロールにフォーカスが移動する。または

  • スクリーン・リーダーでフォーム・コントロールとラベルの関連付けが分かるような読み上げがされる。

リンクは色に依存しない方法で周囲のテキストと区別できなければなりません

色に依存することなくリンクを区別できます

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

• 達成基準1.4.1

  • Use of Color

  • 色の使用

関連するガイドラインとチェック内容

• フォーム：[MUST] 複数の視覚的要素を用いた表現

  チェック内容

  デザイン（チェックID: 0031）、プロダクト（チェックID: 0051）

  • グレイスケール表示でも利用に支障が出ない:

    • リンク箇所を判別できる

    • 画像、テキストの意図が伝わる

    • 入力フォームの必須項目、エラーを認知できる

• アイコン：[MUST] 複数の視覚的要素を用いた表現

  チェック内容

  デザイン（チェックID: 0391）

  • アイコンには、その役割や示している状態を表すテキスト・ラベルが併せて表示されている。または

  • テキスト・ラベルを表示できない場合、色の違いだけでアイコンの意味の違いを表さず、形状（モチーフ）やサイズでも違いを示している。かつ

  • 役割や意味がわかるalt属性の値を設計資料で明示している。

  プロダクト（チェックID: 0412）

  • テキストのラベルが併せて表示されていないアイコンで、形状とサイズが同じで色だけが違うものがない。（例：異なる状態を表す複数のアイコンが、色の違いだけで状態の違いを表していない。）

• 画像：[MUST] 複数の視覚的要素を用いた表現

  チェック内容

  デザイン（チェックID: 0031）、プロダクト（チェックID: 0051）

  • グレイスケール表示でも利用に支障が出ない:

    • リンク箇所を判別できる

    • 画像、テキストの意図が伝わる

    • 入力フォームの必須項目、エラーを認知できる

• リンク：[MUST] 複数の視覚的要素を用いた表現

  チェック内容

  デザイン（チェックID: 0031）、プロダクト（チェックID: 0051）

  • グレイスケール表示でも利用に支障が出ない:

    • リンク箇所を判別できる

    • 画像、テキストの意図が伝わる

    • 入力フォームの必須項目、エラーを認知できる

• テキスト：[MUST] 複数の視覚的要素を用いた表現

  チェック内容

  デザイン（チェックID: 0031）、プロダクト（チェックID: 0051）

  • グレイスケール表示でも利用に支障が出ない:

    • リンク箇所を判別できる

    • 画像、テキストの意図が伝わる

    • 入力フォームの必須項目、エラーを認知できる

リンクには認識可能なテキストがなければなりません

リンクに認識可能なテキストが存在することを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

• 達成基準4.1.2

  • Name, Role, Value

  • 名前 (name) ・役割 (role) 及び値 (value)

• 達成基準2.4.4

  • Link Purpose (In Context)

  • リンクの目的 (コンテキスト内)

関連するガイドラインとチェック内容

• マークアップ全般：[MUST] コンポーネントをアクセシブルにする

  チェック内容

  プロダクト（チェックID: 0591、NVDAによるチェック実施方法の例）

  • 静的なテキストではない部分（例：開閉するメニュー、タブ・パネル、日付選択UI）も、スクリーン・リーダーで問題なく操作できる。

• リンク：[MUST] 適切なリンク・テキスト

  チェック内容

  デザイン（チェックID: 0241）

  • リンク・テキストは「こちら」などになっておらず、リンク・テキストの文言から遷移先をある程度推測できるようになっている。

  プロダクト（チェックID: 0261）

  • 「○○はこちら」の「こちら」の部分だけがリンクになっていない。（この場合は「○○はこちら」全体をリンクにする。）、または

  • リンク・テキストの意図がマークアップで明確になっている。

<ul>および<ol>の直下には<li>、<script>または<template>要素のみを含まなければなりません

リストが正しく構造化されていることを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

• 達成基準1.3.1

  • Info and Relationships

  • 情報及び関係性

関連するガイドラインとチェック内容

• フォーム：[MUST] 表示されているテキストをラベルとして用いる

  チェック内容

  デザイン（チェックID: 0931）

  • フォーム・コントロールについて、役割が分かり、画面上に表示されているテキストまたは代替テキストが付加された画像を、ラベルとして設計資料に定義している。または

  • aria-label属性値として指定すべき、フォーム・コントロールの役割を示すテキストを設計資料に定義している。

  コード（チェックID: 0941）

  • フォーム・コントロールは、ラベルとなるテキストまたは画像とlabel要素またはaria-labelledby属性で関連付けられている。または

  • aria-label属性で適切なラベルが付けられている。

  • 開発者ツールで確認するとフォーム・コントロールのaccessible nameに役割が分かるテキストが指定されている状態になっている。

  プロダクト（チェックID: 0951、axe DevToolsによるチェック実施方法の例）

  • フォーム・コントロールの役割が分かるテキストまたは代替テキストが付加された画像がラベルとして表示されていて、このテキストをクリックすると当該のフォーム・コントロールにフォーカスが移動する。または

  • スクリーン・リーダーでフォーム・コントロールとラベルの関連付けが分かるような読み上げがされる。

• フォーム：[MUST] 表示されているテキストをラベルにできない場合

  チェック内容

  デザイン（チェックID: 0931）

  • フォーム・コントロールについて、役割が分かり、画面上に表示されているテキストまたは代替テキストが付加された画像を、ラベルとして設計資料に定義している。または

  • aria-label属性値として指定すべき、フォーム・コントロールの役割を示すテキストを設計資料に定義している。

  コード（チェックID: 0941）

  • フォーム・コントロールは、ラベルとなるテキストまたは画像とlabel要素またはaria-labelledby属性で関連付けられている。または

  • aria-label属性で適切なラベルが付けられている。

  • 開発者ツールで確認するとフォーム・コントロールのaccessible nameに役割が分かるテキストが指定されている状態になっている。

  プロダクト（チェックID: 0951、axe DevToolsによるチェック実施方法の例）

  • フォーム・コントロールの役割が分かるテキストまたは代替テキストが付加された画像がラベルとして表示されていて、このテキストをクリックすると当該のフォーム・コントロールにフォーカスが移動する。または

  • スクリーン・リーダーでフォーム・コントロールとラベルの関連付けが分かるような読み上げがされる。

• マークアップ全般：[MUST] 文書構造を適切にマークアップする

  チェック内容

  デザイン（チェックID: 0541）

  • 見出し（h1～h6）、箇条書き（ul, ol, dl）、表（table）など、HTMLのセマンティクスで表現できるものがそれらで表現されるよう、設計資料で明示されている。

  コード（チェックID: 0551）

  • 見出し（h1～h6）、箇条書き（ul, ol, dl）、表（table）などを用いてセマンティクスが適切にマークアップされている。

  プロダクト（チェックID: 0561、NVDAによるチェック実施方法の例、axe DevToolsによるチェック実施方法の例）

  • 設計資料で見出しとして示されているものを、スクリーン・リーダーが見出しとして認識している。

  プロダクト（チェックID: 0562、NVDAによるチェック実施方法の例）

  • スクリーン・リーダーが、表（table）を適切に認識していて、表中のセルも適切に認識している。

• ページ全体：[MUST] ページを構成する領域の明示

  チェック内容

  デザイン（チェックID: 0661）

  • ページのどの部分がそれぞれheader, nav, main, footer要素でマークアップされるべきかが、複数のページで一貫した形で設計資料に明示されている。

  コード（チェックID: 0671）

  • header, main, nav, footerの各要素が適切に用いられている。または

  • これらがrole属性で明示されている。

<li>要素は<ul>または<ol>内に含まれていなければなりません

<li>要素がセマンティックに使用されていることを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

• 達成基準1.3.1

  • Info and Relationships

  • 情報及び関係性

関連するガイドラインとチェック内容

• フォーム：[MUST] 表示されているテキストをラベルとして用いる

  チェック内容

  デザイン（チェックID: 0931）

  • フォーム・コントロールについて、役割が分かり、画面上に表示されているテキストまたは代替テキストが付加された画像を、ラベルとして設計資料に定義している。または

  • aria-label属性値として指定すべき、フォーム・コントロールの役割を示すテキストを設計資料に定義している。

  コード（チェックID: 0941）

  • フォーム・コントロールは、ラベルとなるテキストまたは画像とlabel要素またはaria-labelledby属性で関連付けられている。または

  • aria-label属性で適切なラベルが付けられている。

  • 開発者ツールで確認するとフォーム・コントロールのaccessible nameに役割が分かるテキストが指定されている状態になっている。

  プロダクト（チェックID: 0951、axe DevToolsによるチェック実施方法の例）

  • フォーム・コントロールの役割が分かるテキストまたは代替テキストが付加された画像がラベルとして表示されていて、このテキストをクリックすると当該のフォーム・コントロールにフォーカスが移動する。または

  • スクリーン・リーダーでフォーム・コントロールとラベルの関連付けが分かるような読み上げがされる。

• フォーム：[MUST] 表示されているテキストをラベルにできない場合

  チェック内容

  デザイン（チェックID: 0931）

  • フォーム・コントロールについて、役割が分かり、画面上に表示されているテキストまたは代替テキストが付加された画像を、ラベルとして設計資料に定義している。または

  • aria-label属性値として指定すべき、フォーム・コントロールの役割を示すテキストを設計資料に定義している。

  コード（チェックID: 0941）

  • フォーム・コントロールは、ラベルとなるテキストまたは画像とlabel要素またはaria-labelledby属性で関連付けられている。または

  • aria-label属性で適切なラベルが付けられている。

  • 開発者ツールで確認するとフォーム・コントロールのaccessible nameに役割が分かるテキストが指定されている状態になっている。

  プロダクト（チェックID: 0951、axe DevToolsによるチェック実施方法の例）

  • フォーム・コントロールの役割が分かるテキストまたは代替テキストが付加された画像がラベルとして表示されていて、このテキストをクリックすると当該のフォーム・コントロールにフォーカスが移動する。または

  • スクリーン・リーダーでフォーム・コントロールとラベルの関連付けが分かるような読み上げがされる。

• マークアップ全般：[MUST] 文書構造を適切にマークアップする

  チェック内容

  デザイン（チェックID: 0541）

  • 見出し（h1～h6）、箇条書き（ul, ol, dl）、表（table）など、HTMLのセマンティクスで表現できるものがそれらで表現されるよう、設計資料で明示されている。

  コード（チェックID: 0551）

  • 見出し（h1～h6）、箇条書き（ul, ol, dl）、表（table）などを用いてセマンティクスが適切にマークアップされている。

  プロダクト（チェックID: 0561、NVDAによるチェック実施方法の例、axe DevToolsによるチェック実施方法の例）

  • 設計資料で見出しとして示されているものを、スクリーン・リーダーが見出しとして認識している。

  プロダクト（チェックID: 0562、NVDAによるチェック実施方法の例）

  • スクリーン・リーダーが、表（table）を適切に認識していて、表中のセルも適切に認識している。

• ページ全体：[MUST] ページを構成する領域の明示

  チェック内容

  デザイン（チェックID: 0661）

  • ページのどの部分がそれぞれheader, nav, main, footer要素でマークアップされるべきかが、複数のページで一貫した形で設計資料に明示されている。

  コード（チェックID: 0671）

  • header, main, nav, footerの各要素が適切に用いられている。または

  • これらがrole属性で明示されている。

<marquee>要素は非推奨のため、使用してはなりません

<marquee>要素が使用されていないことを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

• 達成基準2.2.2

  • Pause, Stop, Hide

  • 一時停止、停止、非表示

関連するガイドラインとチェック内容

• 動的コンテンツ：[MUST] 点滅、スクロールを伴うコンテンツ

  チェック内容

  デザイン（チェックID: 1201）、プロダクト（チェックID: 1221）

  • 点滅、スクロールを伴うコンテンツがない。

• 動的コンテンツ：[MUST] 自動更新されるコンテンツ

  チェック内容

  デザイン（チェックID: 1231）、プロダクト（チェックID: 1251）

  • 自動更新されるコンテンツがない。または

  • ユーザーが自動更新の間隔やタイミングの変更、自動更新の停止をできる。

• 音声・映像コンテンツ：[MUST] 動きを伴うコンテンツ

  チェック内容

  デザイン（チェックID: 1451）、プロダクト（チェックID: 1471）

  • 自動的に開始し5秒以上続く動画、アニメーションがない。または

  • 動画やアニメーションを呈し、一時停止、または非表示にすることができる。

制限時間のある更新が存在してはなりません

<meta http-equiv="refresh">が使用されていないことを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

• 達成基準2.2.1

  • Timing Adjustable

  • タイミング調整可能

• 達成基準2.2.4

  • Interruptions

  • 割り込み

• 達成基準3.2.5

  • Change on Request

  • 要求による変化

関連するガイドラインとチェック内容

• フォーム：[MUST] フォームの入力に制限時間を設ける場合

  チェック内容

  デザイン（チェックID: 0961）

  • フォームの入力に制限時間を設ける場合：

    • 事前にユーザーがその制限時間を解除することができる。又は、

    • 事前にユーザーが少なくともデフォルト設定の10倍を超える、大幅な制限時間の調整をすることができる。又は、

    • 時間切れになる前にユーザーに警告し、かつ少なくとも20秒間の猶予をもって、例えば「スペースキーを押す」などの簡単な操作により、ユーザーが制限時間を10回以上延長することができる。又は、

    • リアルタイムのイベント（例えば、オークション）において制限時間が必須の要素で、その制限時間に代わる手段が存在しない。又は、

    • 制限時間が必要不可欠なもので、制限時間を延長することがフォームを無効にすることになる。又は、

    • 制限時間が20時間よりも長い。

• ログイン・セッション：[MUST] ログイン・セッションにタイムアウトを設ける場合

  チェック内容

  デザイン（チェックID: 1321）

  • ログイン・セッションにタイムアウトを設ける場合：

    • ログイン時などに、ユーザーがセッション・タイムアウトの設定を解除することができる。又は、

    • ログイン時などに、ユーザーが少なくともデフォルト設定の10倍を超える、大幅なタイムアウト設定値の調整をすることができる。又は、

    • 時間切れになる前にユーザーに警告し、かつ少なくとも20秒間の猶予をもって、例えば「スペースキーを押す」などの簡単な操作により、ユーザーがタイムアウトを10回以上延長することができる。又は、

    • タイムアウトが必要不可欠なもので、タイムアウトを延長することがコンテンツの動作を無効にすることになる。又は、

    • タイムアウトが20時間よりも長い。

• 動的コンテンツ：[SHOULD] 割り込み表示

  チェック内容

  デザイン（チェックID: 1291）、プロダクト（チェックID: 1311）

  • ユーザーの入力操作や情報の閲覧を妨げるようなタイミングで表示される、画面の内容を大きく変更するような通知や自動的に表示されるモーダル・ダイアログがない。

対話的なコントロールがネストされていないことを確認します

ネストされた対話的なコントロールはスクリーン・リーダーで読み上げられません

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

• 達成基準4.1.2

  • Name, Role, Value

  • 名前 (name) ・役割 (role) 及び値 (value)

関連するガイドラインとチェック内容

• マークアップ全般：[MUST] コンポーネントをアクセシブルにする

  チェック内容

  プロダクト（チェックID: 0591、NVDAによるチェック実施方法の例）

  • 静的なテキストではない部分（例：開閉するメニュー、タブ・パネル、日付選択UI）も、スクリーン・リーダーで問題なく操作できる。

<video>または<audio>要素は音声を自動再生しません

<video>または<audio>要素が音声を停止またはミュートするコントロールなしに音声を3秒より長く自動再生しないことを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

• 達成基準1.4.2

  • Audio Control

  • 音声の制御

関連するガイドラインとチェック内容

• 音声・映像コンテンツ：[MUST] 音声の自動再生

  チェック内容

  デザイン（チェックID: 1421）、プロダクト（チェックID: 1441）

  • 3秒以上の長さの自動再生される音声コンテンツがない。

<object>要素には代替テキストがなければなりません

<object>要素に代替テキストが存在することを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

• 達成基準1.1.1

  • Non-text Content

  • 非テキストコンテンツ

関連するガイドラインとチェック内容

• フォーム：[MUST] 表示されているテキストをラベルとして用いる

  チェック内容

  デザイン（チェックID: 0931）

  • フォーム・コントロールについて、役割が分かり、画面上に表示されているテキストまたは代替テキストが付加された画像を、ラベルとして設計資料に定義している。または

  • aria-label属性値として指定すべき、フォーム・コントロールの役割を示すテキストを設計資料に定義している。

  コード（チェックID: 0941）

  • フォーム・コントロールは、ラベルとなるテキストまたは画像とlabel要素またはaria-labelledby属性で関連付けられている。または

  • aria-label属性で適切なラベルが付けられている。

  • 開発者ツールで確認するとフォーム・コントロールのaccessible nameに役割が分かるテキストが指定されている状態になっている。

  プロダクト（チェックID: 0951、axe DevToolsによるチェック実施方法の例）

  • フォーム・コントロールの役割が分かるテキストまたは代替テキストが付加された画像がラベルとして表示されていて、このテキストをクリックすると当該のフォーム・コントロールにフォーカスが移動する。または

  • スクリーン・リーダーでフォーム・コントロールとラベルの関連付けが分かるような読み上げがされる。

• フォーム：[MUST] 表示されているテキストをラベルにできない場合

  チェック内容

  デザイン（チェックID: 0931）

  • フォーム・コントロールについて、役割が分かり、画面上に表示されているテキストまたは代替テキストが付加された画像を、ラベルとして設計資料に定義している。または

  • aria-label属性値として指定すべき、フォーム・コントロールの役割を示すテキストを設計資料に定義している。

  コード（チェックID: 0941）

  • フォーム・コントロールは、ラベルとなるテキストまたは画像とlabel要素またはaria-labelledby属性で関連付けられている。または

  • aria-label属性で適切なラベルが付けられている。

  • 開発者ツールで確認するとフォーム・コントロールのaccessible nameに役割が分かるテキストが指定されている状態になっている。

  プロダクト（チェックID: 0951、axe DevToolsによるチェック実施方法の例）

  • フォーム・コントロールの役割が分かるテキストまたは代替テキストが付加された画像がラベルとして表示されていて、このテキストをクリックすると当該のフォーム・コントロールにフォーカスが移動する。または

  • スクリーン・リーダーでフォーム・コントロールとラベルの関連付けが分かるような読み上げがされる。

• アイコン：[MUST] テキスト情報の付与

  チェック内容

  デザイン（チェックID: 0391）

  • アイコンには、その役割や示している状態を表すテキスト・ラベルが併せて表示されている。または

  • テキスト・ラベルを表示できない場合、色の違いだけでアイコンの意味の違いを表さず、形状（モチーフ）やサイズでも違いを示している。かつ

  • 役割や意味がわかるalt属性の値を設計資料で明示している。

  コード（チェックID: 0401）

  • アイコンの役割や示している状態を表すテキストが表示されていて、aria-labelledby属性で関連付けられている。または

  • alt属性またはaria-label属性で、そのようなテキストが指定されている。

  • 開発者ツールで確認すると、Accessible Nameに適切なテキストが設定されている状態になっている。

  プロダクト（チェックID: 0411、NVDAによるチェック実施方法の例）

  • アイコンの役割や示している状態が分かるテキストが、スクリーン・リーダーで読み上げられる。

• 画像：[MUST] 画像の説明の提供

  チェック内容

  デザイン（チェックID: 0421）

  • 画像に関する簡潔で過不足ない説明（alt属性値）が、設計資料で明示されている。かつ

  • 短いテキストでは充分に説明できない場合には、詳細な説明のテキストが設計資料で明示されている。

  コード（チェックID: 0431）

  • 画像に関する簡潔で過不足ない説明がalt属性やaria-label属性で付加されている。かつ

  • 詳細な説明が必要な場合には、その説明が当該の画像の直前または直後に表示されている、またはaria-describedby属性で関連付けられている。

  プロダクト（チェックID: 0441、NVDAによるチェック実施方法の例、axe DevToolsによるチェック実施方法の例）

  • 画像の説明がスクリーン・リーダーで適切に読み上げられる。

• 画像：[MUST] 装飾目的の画像の無視

  チェック内容

  デザイン（チェックID: 0451）

  • 情報や機能性を一切持たない画像は、説明のテキストを付加してはならないことが設計資料で明示されている。

  コード（チェックID: 0461）

  • 情報や機能性を一切持たない画像には、空のalt属性（alt=""）やrole="presentation"が付与されていて、スクリーン・リーダーで読み上げられない。

  プロダクト（チェックID: 0471、NVDAによるチェック実施方法の例）

  • 情報や機能性を一切持たない画像は、スクリーン・リーダーで読み上げられない。

• 画像化されたテキスト：[MUST] テキスト情報の提供

  チェック内容

  コード（チェックID: 0521）

  • 画像化されているテキストと同じ内容がalt属性またはaria-label属性で示されていて、スクリーン・リーダーなどで確認できる。

  プロダクト（チェックID: 0531、NVDAによるチェック実施方法の例）

  • 画像化されているテキストと同じ内容がスクリーン・リーダーなどで確認できる。

• 音声・映像コンテンツ：[MUST] 音声・映像コンテンツの存在を明示する

  チェック内容

  プロダクト（チェックID: 1411）

  • ページ内に埋め込まれる音声/動画プレイヤーについて、適切なラベル付けがされていてそこにプレイヤーがあることが容易に認知できるようになっている。または

  • 前後のテキストから、そこにプレイヤーがあることが推測できる。

p要素を見出しとしてスタイル付けするために太字、イタリック体、およびフォントサイズを使用しません

見出しのスタイル調整のためにp要素が使用されていないことを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

• 達成基準1.3.1

  • Info and Relationships

  • 情報及び関係性

関連するガイドラインとチェック内容

• フォーム：[MUST] 表示されているテキストをラベルとして用いる

  チェック内容

  デザイン（チェックID: 0931）

  • フォーム・コントロールについて、役割が分かり、画面上に表示されているテキストまたは代替テキストが付加された画像を、ラベルとして設計資料に定義している。または

  • aria-label属性値として指定すべき、フォーム・コントロールの役割を示すテキストを設計資料に定義している。

  コード（チェックID: 0941）

  • フォーム・コントロールは、ラベルとなるテキストまたは画像とlabel要素またはaria-labelledby属性で関連付けられている。または

  • aria-label属性で適切なラベルが付けられている。

  • 開発者ツールで確認するとフォーム・コントロールのaccessible nameに役割が分かるテキストが指定されている状態になっている。

  プロダクト（チェックID: 0951、axe DevToolsによるチェック実施方法の例）

  • フォーム・コントロールの役割が分かるテキストまたは代替テキストが付加された画像がラベルとして表示されていて、このテキストをクリックすると当該のフォーム・コントロールにフォーカスが移動する。または

  • スクリーン・リーダーでフォーム・コントロールとラベルの関連付けが分かるような読み上げがされる。

• フォーム：[MUST] 表示されているテキストをラベルにできない場合

  チェック内容

  デザイン（チェックID: 0931）

  • フォーム・コントロールについて、役割が分かり、画面上に表示されているテキストまたは代替テキストが付加された画像を、ラベルとして設計資料に定義している。または

  • aria-label属性値として指定すべき、フォーム・コントロールの役割を示すテキストを設計資料に定義している。

  コード（チェックID: 0941）

  • フォーム・コントロールは、ラベルとなるテキストまたは画像とlabel要素またはaria-labelledby属性で関連付けられている。または

  • aria-label属性で適切なラベルが付けられている。

  • 開発者ツールで確認するとフォーム・コントロールのaccessible nameに役割が分かるテキストが指定されている状態になっている。

  プロダクト（チェックID: 0951、axe DevToolsによるチェック実施方法の例）

  • フォーム・コントロールの役割が分かるテキストまたは代替テキストが付加された画像がラベルとして表示されていて、このテキストをクリックすると当該のフォーム・コントロールにフォーカスが移動する。または

  • スクリーン・リーダーでフォーム・コントロールとラベルの関連付けが分かるような読み上げがされる。

• マークアップ全般：[MUST] 文書構造を適切にマークアップする

  チェック内容

  デザイン（チェックID: 0541）

  • 見出し（h1～h6）、箇条書き（ul, ol, dl）、表（table）など、HTMLのセマンティクスで表現できるものがそれらで表現されるよう、設計資料で明示されている。

  コード（チェックID: 0551）

  • 見出し（h1～h6）、箇条書き（ul, ol, dl）、表（table）などを用いてセマンティクスが適切にマークアップされている。

  プロダクト（チェックID: 0561、NVDAによるチェック実施方法の例、axe DevToolsによるチェック実施方法の例）

  • 設計資料で見出しとして示されているものを、スクリーン・リーダーが見出しとして認識している。

  プロダクト（チェックID: 0562、NVDAによるチェック実施方法の例）

  • スクリーン・リーダーが、表（table）を適切に認識していて、表中のセルも適切に認識している。

• ページ全体：[MUST] ページを構成する領域の明示

  チェック内容

  デザイン（チェックID: 0661）

  • ページのどの部分がそれぞれheader, nav, main, footer要素でマークアップされるべきかが、複数のページで一貫した形で設計資料に明示されている。

  コード（チェックID: 0671）

  • header, main, nav, footerの各要素が適切に用いられている。または

  • これらがrole属性で明示されている。

[role='img']要素に代替テキストが必要です

[role='img']要素に代替テキストが存在することを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

• 達成基準1.1.1

  • Non-text Content

  • 非テキストコンテンツ

関連するガイドラインとチェック内容

• フォーム：[MUST] 表示されているテキストをラベルとして用いる

  チェック内容

  デザイン（チェックID: 0931）

  • フォーム・コントロールについて、役割が分かり、画面上に表示されているテキストまたは代替テキストが付加された画像を、ラベルとして設計資料に定義している。または

  • aria-label属性値として指定すべき、フォーム・コントロールの役割を示すテキストを設計資料に定義している。

  コード（チェックID: 0941）

  • フォーム・コントロールは、ラベルとなるテキストまたは画像とlabel要素またはaria-labelledby属性で関連付けられている。または

  • aria-label属性で適切なラベルが付けられている。

  • 開発者ツールで確認するとフォーム・コントロールのaccessible nameに役割が分かるテキストが指定されている状態になっている。

  プロダクト（チェックID: 0951、axe DevToolsによるチェック実施方法の例）

  • フォーム・コントロールの役割が分かるテキストまたは代替テキストが付加された画像がラベルとして表示されていて、このテキストをクリックすると当該のフォーム・コントロールにフォーカスが移動する。または

  • スクリーン・リーダーでフォーム・コントロールとラベルの関連付けが分かるような読み上げがされる。

• フォーム：[MUST] 表示されているテキストをラベルにできない場合

  チェック内容

  デザイン（チェックID: 0931）

  • フォーム・コントロールについて、役割が分かり、画面上に表示されているテキストまたは代替テキストが付加された画像を、ラベルとして設計資料に定義している。または

  • aria-label属性値として指定すべき、フォーム・コントロールの役割を示すテキストを設計資料に定義している。

  コード（チェックID: 0941）

  • フォーム・コントロールは、ラベルとなるテキストまたは画像とlabel要素またはaria-labelledby属性で関連付けられている。または

  • aria-label属性で適切なラベルが付けられている。

  • 開発者ツールで確認するとフォーム・コントロールのaccessible nameに役割が分かるテキストが指定されている状態になっている。

  プロダクト（チェックID: 0951、axe DevToolsによるチェック実施方法の例）

  • フォーム・コントロールの役割が分かるテキストまたは代替テキストが付加された画像がラベルとして表示されていて、このテキストをクリックすると当該のフォーム・コントロールにフォーカスが移動する。または

  • スクリーン・リーダーでフォーム・コントロールとラベルの関連付けが分かるような読み上げがされる。

• アイコン：[MUST] テキスト情報の付与

  チェック内容

  デザイン（チェックID: 0391）

  • アイコンには、その役割や示している状態を表すテキスト・ラベルが併せて表示されている。または

  • テキスト・ラベルを表示できない場合、色の違いだけでアイコンの意味の違いを表さず、形状（モチーフ）やサイズでも違いを示している。かつ

  • 役割や意味がわかるalt属性の値を設計資料で明示している。

  コード（チェックID: 0401）

  • アイコンの役割や示している状態を表すテキストが表示されていて、aria-labelledby属性で関連付けられている。または

  • alt属性またはaria-label属性で、そのようなテキストが指定されている。

  • 開発者ツールで確認すると、Accessible Nameに適切なテキストが設定されている状態になっている。

  プロダクト（チェックID: 0411、NVDAによるチェック実施方法の例）

  • アイコンの役割や示している状態が分かるテキストが、スクリーン・リーダーで読み上げられる。

• 画像：[MUST] 画像の説明の提供

  チェック内容

  デザイン（チェックID: 0421）

  • 画像に関する簡潔で過不足ない説明（alt属性値）が、設計資料で明示されている。かつ

  • 短いテキストでは充分に説明できない場合には、詳細な説明のテキストが設計資料で明示されている。

  コード（チェックID: 0431）

  • 画像に関する簡潔で過不足ない説明がalt属性やaria-label属性で付加されている。かつ

  • 詳細な説明が必要な場合には、その説明が当該の画像の直前または直後に表示されている、またはaria-describedby属性で関連付けられている。

  プロダクト（チェックID: 0441、NVDAによるチェック実施方法の例、axe DevToolsによるチェック実施方法の例）

  • 画像の説明がスクリーン・リーダーで適切に読み上げられる。

• 画像：[MUST] 装飾目的の画像の無視

  チェック内容

  デザイン（チェックID: 0451）

  • 情報や機能性を一切持たない画像は、説明のテキストを付加してはならないことが設計資料で明示されている。

  コード（チェックID: 0461）

  • 情報や機能性を一切持たない画像には、空のalt属性（alt=""）やrole="presentation"が付与されていて、スクリーン・リーダーで読み上げられない。

  プロダクト（チェックID: 0471、NVDAによるチェック実施方法の例）

  • 情報や機能性を一切持たない画像は、スクリーン・リーダーで読み上げられない。

• 画像化されたテキスト：[MUST] テキスト情報の提供

  チェック内容

  コード（チェックID: 0521）

  • 画像化されているテキストと同じ内容がalt属性またはaria-label属性で示されていて、スクリーン・リーダーなどで確認できる。

  プロダクト（チェックID: 0531、NVDAによるチェック実施方法の例）

  • 画像化されているテキストと同じ内容がスクリーン・リーダーなどで確認できる。

• 音声・映像コンテンツ：[MUST] 音声・映像コンテンツの存在を明示する

  チェック内容

  プロダクト（チェックID: 1411）

  • ページ内に埋め込まれる音声/動画プレイヤーについて、適切なラベル付けがされていてそこにプレイヤーがあることが容易に認知できるようになっている。または

  • 前後のテキストから、そこにプレイヤーがあることが推測できる。

スクロール可能な領域にキーボードでアクセスできるようにします

スクロール可能なコンテンツを持つ要素はキーボードでアクセスできるようにするべきです

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

• 達成基準2.1.1

  • Keyboard

  • キーボード

関連するガイドラインとチェック内容

• 入力ディバイス：[MUST] キーボード操作を可能にする

  チェック内容

  プロダクト（チェックID: 0172）

  • Tab/Shift+Tabキーを使ったフォーカスの移動時、文脈、レイアウト、操作手順に即した自然な順序でフォーカスが移動する。

    • リンクとボタン

    • フォーム・コントロール

    • その他、マウスやキーボードによる操作を受け付けるすべてのもの

  デザイン（チェックID: 0211）

  • クリックやホバーなどのマウス操作を受け付けるものは、キーボードのみでも操作できるように設計されている。

  プロダクト（チェックID: 0231）

  • クリックやホバーなどのマウス操作を受け付けるものは、キーボードのみでも操作できる。

select要素にはアクセシブルな名前がなければなりません

select要素にはアクセシブルな名前があることを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

• 達成基準4.1.2

  • Name, Role, Value

  • 名前 (name) ・役割 (role) 及び値 (value)

• 達成基準1.3.1

  • Info and Relationships

  • 情報及び関係性

関連するガイドラインとチェック内容

• マークアップ全般：[MUST] コンポーネントをアクセシブルにする

  チェック内容

  プロダクト（チェックID: 0591、NVDAによるチェック実施方法の例）

  • 静的なテキストではない部分（例：開閉するメニュー、タブ・パネル、日付選択UI）も、スクリーン・リーダーで問題なく操作できる。

• フォーム：[MUST] 表示されているテキストをラベルとして用いる

  チェック内容

  デザイン（チェックID: 0931）

  • フォーム・コントロールについて、役割が分かり、画面上に表示されているテキストまたは代替テキストが付加された画像を、ラベルとして設計資料に定義している。または

  • aria-label属性値として指定すべき、フォーム・コントロールの役割を示すテキストを設計資料に定義している。

  コード（チェックID: 0941）

  • フォーム・コントロールは、ラベルとなるテキストまたは画像とlabel要素またはaria-labelledby属性で関連付けられている。または

  • aria-label属性で適切なラベルが付けられている。

  • 開発者ツールで確認するとフォーム・コントロールのaccessible nameに役割が分かるテキストが指定されている状態になっている。

  プロダクト（チェックID: 0951、axe DevToolsによるチェック実施方法の例）

  • フォーム・コントロールの役割が分かるテキストまたは代替テキストが付加された画像がラベルとして表示されていて、このテキストをクリックすると当該のフォーム・コントロールにフォーカスが移動する。または

  • スクリーン・リーダーでフォーム・コントロールとラベルの関連付けが分かるような読み上げがされる。

• フォーム：[MUST] 表示されているテキストをラベルにできない場合

  チェック内容

  デザイン（チェックID: 0931）

  • フォーム・コントロールについて、役割が分かり、画面上に表示されているテキストまたは代替テキストが付加された画像を、ラベルとして設計資料に定義している。または

  • aria-label属性値として指定すべき、フォーム・コントロールの役割を示すテキストを設計資料に定義している。

  コード（チェックID: 0941）

  • フォーム・コントロールは、ラベルとなるテキストまたは画像とlabel要素またはaria-labelledby属性で関連付けられている。または

  • aria-label属性で適切なラベルが付けられている。

  • 開発者ツールで確認するとフォーム・コントロールのaccessible nameに役割が分かるテキストが指定されている状態になっている。

  プロダクト（チェックID: 0951、axe DevToolsによるチェック実施方法の例）

  • フォーム・コントロールの役割が分かるテキストまたは代替テキストが付加された画像がラベルとして表示されていて、このテキストをクリックすると当該のフォーム・コントロールにフォーカスが移動する。または

  • スクリーン・リーダーでフォーム・コントロールとラベルの関連付けが分かるような読み上げがされる。

• マークアップ全般：[MUST] 文書構造を適切にマークアップする

  チェック内容

  デザイン（チェックID: 0541）

  • 見出し（h1～h6）、箇条書き（ul, ol, dl）、表（table）など、HTMLのセマンティクスで表現できるものがそれらで表現されるよう、設計資料で明示されている。

  コード（チェックID: 0551）

  • 見出し（h1～h6）、箇条書き（ul, ol, dl）、表（table）などを用いてセマンティクスが適切にマークアップされている。

  プロダクト（チェックID: 0561、NVDAによるチェック実施方法の例、axe DevToolsによるチェック実施方法の例）

  • 設計資料で見出しとして示されているものを、スクリーン・リーダーが見出しとして認識している。

  プロダクト（チェックID: 0562、NVDAによるチェック実施方法の例）

  • スクリーン・リーダーが、表（table）を適切に認識していて、表中のセルも適切に認識している。

• ページ全体：[MUST] ページを構成する領域の明示

  チェック内容

  デザイン（チェックID: 0661）

  • ページのどの部分がそれぞれheader, nav, main, footer要素でマークアップされるべきかが、複数のページで一貫した形で設計資料に明示されている。

  コード（チェックID: 0671）

  • header, main, nav, footerの各要素が適切に用いられている。または

  • これらがrole属性で明示されている。

サーバーサイドのイメージマップを使用してはなりません

サーバーサイドのイメージマップが使用されていないことを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

• 達成基準2.1.1

  • Keyboard

  • キーボード

関連するガイドラインとチェック内容

• 入力ディバイス：[MUST] キーボード操作を可能にする

  チェック内容

  プロダクト（チェックID: 0172）

  • Tab/Shift+Tabキーを使ったフォーカスの移動時、文脈、レイアウト、操作手順に即した自然な順序でフォーカスが移動する。

    • リンクとボタン

    • フォーム・コントロール

    • その他、マウスやキーボードによる操作を受け付けるすべてのもの

  デザイン（チェックID: 0211）

  • クリックやホバーなどのマウス操作を受け付けるものは、キーボードのみでも操作できるように設計されている。

  プロダクト（チェックID: 0231）

  • クリックやホバーなどのマウス操作を受け付けるものは、キーボードのみでも操作できる。

imgロールを持つsvg要素に代替テキストが存在します

img、graphics-documentまたはgraphics-symbolロールを持つsvg要素にアクセシブルなテキストがあることを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

• 達成基準1.1.1

  • Non-text Content

  • 非テキストコンテンツ

関連するガイドラインとチェック内容

• フォーム：[MUST] 表示されているテキストをラベルとして用いる

  チェック内容

  デザイン（チェックID: 0931）

  • フォーム・コントロールについて、役割が分かり、画面上に表示されているテキストまたは代替テキストが付加された画像を、ラベルとして設計資料に定義している。または

  • aria-label属性値として指定すべき、フォーム・コントロールの役割を示すテキストを設計資料に定義している。

  コード（チェックID: 0941）

  • フォーム・コントロールは、ラベルとなるテキストまたは画像とlabel要素またはaria-labelledby属性で関連付けられている。または

  • aria-label属性で適切なラベルが付けられている。

  • 開発者ツールで確認するとフォーム・コントロールのaccessible nameに役割が分かるテキストが指定されている状態になっている。

  プロダクト（チェックID: 0951、axe DevToolsによるチェック実施方法の例）

  • フォーム・コントロールの役割が分かるテキストまたは代替テキストが付加された画像がラベルとして表示されていて、このテキストをクリックすると当該のフォーム・コントロールにフォーカスが移動する。または

  • スクリーン・リーダーでフォーム・コントロールとラベルの関連付けが分かるような読み上げがされる。

• フォーム：[MUST] 表示されているテキストをラベルにできない場合

  チェック内容

  デザイン（チェックID: 0931）

  • フォーム・コントロールについて、役割が分かり、画面上に表示されているテキストまたは代替テキストが付加された画像を、ラベルとして設計資料に定義している。または

  • aria-label属性値として指定すべき、フォーム・コントロールの役割を示すテキストを設計資料に定義している。

  コード（チェックID: 0941）

  • フォーム・コントロールは、ラベルとなるテキストまたは画像とlabel要素またはaria-labelledby属性で関連付けられている。または

  • aria-label属性で適切なラベルが付けられている。

  • 開発者ツールで確認するとフォーム・コントロールのaccessible nameに役割が分かるテキストが指定されている状態になっている。

  プロダクト（チェックID: 0951、axe DevToolsによるチェック実施方法の例）

  • フォーム・コントロールの役割が分かるテキストまたは代替テキストが付加された画像がラベルとして表示されていて、このテキストをクリックすると当該のフォーム・コントロールにフォーカスが移動する。または

  • スクリーン・リーダーでフォーム・コントロールとラベルの関連付けが分かるような読み上げがされる。

• アイコン：[MUST] テキスト情報の付与

  チェック内容

  デザイン（チェックID: 0391）

  • アイコンには、その役割や示している状態を表すテキスト・ラベルが併せて表示されている。または

  • テキスト・ラベルを表示できない場合、色の違いだけでアイコンの意味の違いを表さず、形状（モチーフ）やサイズでも違いを示している。かつ

  • 役割や意味がわかるalt属性の値を設計資料で明示している。

  コード（チェックID: 0401）

  • アイコンの役割や示している状態を表すテキストが表示されていて、aria-labelledby属性で関連付けられている。または

  • alt属性またはaria-label属性で、そのようなテキストが指定されている。

  • 開発者ツールで確認すると、Accessible Nameに適切なテキストが設定されている状態になっている。

  プロダクト（チェックID: 0411、NVDAによるチェック実施方法の例）

  • アイコンの役割や示している状態が分かるテキストが、スクリーン・リーダーで読み上げられる。

• 画像：[MUST] 画像の説明の提供

  チェック内容

  デザイン（チェックID: 0421）

  • 画像に関する簡潔で過不足ない説明（alt属性値）が、設計資料で明示されている。かつ

  • 短いテキストでは充分に説明できない場合には、詳細な説明のテキストが設計資料で明示されている。

  コード（チェックID: 0431）

  • 画像に関する簡潔で過不足ない説明がalt属性やaria-label属性で付加されている。かつ

  • 詳細な説明が必要な場合には、その説明が当該の画像の直前または直後に表示されている、またはaria-describedby属性で関連付けられている。

  プロダクト（チェックID: 0441、NVDAによるチェック実施方法の例、axe DevToolsによるチェック実施方法の例）

  • 画像の説明がスクリーン・リーダーで適切に読み上げられる。

• 画像：[MUST] 装飾目的の画像の無視

  チェック内容

  デザイン（チェックID: 0451）

  • 情報や機能性を一切持たない画像は、説明のテキストを付加してはならないことが設計資料で明示されている。

  コード（チェックID: 0461）

  • 情報や機能性を一切持たない画像には、空のalt属性（alt=""）やrole="presentation"が付与されていて、スクリーン・リーダーで読み上げられない。

  プロダクト（チェックID: 0471、NVDAによるチェック実施方法の例）

  • 情報や機能性を一切持たない画像は、スクリーン・リーダーで読み上げられない。

• 画像化されたテキスト：[MUST] テキスト情報の提供

  チェック内容

  コード（チェックID: 0521）

  • 画像化されているテキストと同じ内容がalt属性またはaria-label属性で示されていて、スクリーン・リーダーなどで確認できる。

  プロダクト（チェックID: 0531、NVDAによるチェック実施方法の例）

  • 画像化されているテキストと同じ内容がスクリーン・リーダーなどで確認できる。

• 音声・映像コンテンツ：[MUST] 音声・映像コンテンツの存在を明示する

  チェック内容

  プロダクト（チェックID: 1411）

  • ページ内に埋め込まれる音声/動画プレイヤーについて、適切なラベル付けがされていてそこにプレイヤーがあることが容易に認知できるようになっている。または

  • 前後のテキストから、そこにプレイヤーがあることが推測できる。

データテーブルにキャプションをつけるためにデータまたはヘッダーセルを用いるべきではありません

キャプション付きのテーブルが<caption>要素を用いていることを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

• 達成基準1.3.1

  • Info and Relationships

  • 情報及び関係性

関連するガイドラインとチェック内容

• フォーム：[MUST] 表示されているテキストをラベルとして用いる

  チェック内容

  デザイン（チェックID: 0931）

  • フォーム・コントロールについて、役割が分かり、画面上に表示されているテキストまたは代替テキストが付加された画像を、ラベルとして設計資料に定義している。または

  • aria-label属性値として指定すべき、フォーム・コントロールの役割を示すテキストを設計資料に定義している。

  コード（チェックID: 0941）

  • フォーム・コントロールは、ラベルとなるテキストまたは画像とlabel要素またはaria-labelledby属性で関連付けられている。または

  • aria-label属性で適切なラベルが付けられている。

  • 開発者ツールで確認するとフォーム・コントロールのaccessible nameに役割が分かるテキストが指定されている状態になっている。

  プロダクト（チェックID: 0951、axe DevToolsによるチェック実施方法の例）

  • フォーム・コントロールの役割が分かるテキストまたは代替テキストが付加された画像がラベルとして表示されていて、このテキストをクリックすると当該のフォーム・コントロールにフォーカスが移動する。または

  • スクリーン・リーダーでフォーム・コントロールとラベルの関連付けが分かるような読み上げがされる。

• フォーム：[MUST] 表示されているテキストをラベルにできない場合

  チェック内容

  デザイン（チェックID: 0931）

  • フォーム・コントロールについて、役割が分かり、画面上に表示されているテキストまたは代替テキストが付加された画像を、ラベルとして設計資料に定義している。または

  • aria-label属性値として指定すべき、フォーム・コントロールの役割を示すテキストを設計資料に定義している。

  コード（チェックID: 0941）

  • フォーム・コントロールは、ラベルとなるテキストまたは画像とlabel要素またはaria-labelledby属性で関連付けられている。または

  • aria-label属性で適切なラベルが付けられている。

  • 開発者ツールで確認するとフォーム・コントロールのaccessible nameに役割が分かるテキストが指定されている状態になっている。

  プロダクト（チェックID: 0951、axe DevToolsによるチェック実施方法の例）

  • フォーム・コントロールの役割が分かるテキストまたは代替テキストが付加された画像がラベルとして表示されていて、このテキストをクリックすると当該のフォーム・コントロールにフォーカスが移動する。または

  • スクリーン・リーダーでフォーム・コントロールとラベルの関連付けが分かるような読み上げがされる。

• マークアップ全般：[MUST] 文書構造を適切にマークアップする

  チェック内容

  デザイン（チェックID: 0541）

  • 見出し（h1～h6）、箇条書き（ul, ol, dl）、表（table）など、HTMLのセマンティクスで表現できるものがそれらで表現されるよう、設計資料で明示されている。

  コード（チェックID: 0551）

  • 見出し（h1～h6）、箇条書き（ul, ol, dl）、表（table）などを用いてセマンティクスが適切にマークアップされている。

  プロダクト（チェックID: 0561、NVDAによるチェック実施方法の例、axe DevToolsによるチェック実施方法の例）

  • 設計資料で見出しとして示されているものを、スクリーン・リーダーが見出しとして認識している。

  プロダクト（チェックID: 0562、NVDAによるチェック実施方法の例）

  • スクリーン・リーダーが、表（table）を適切に認識していて、表中のセルも適切に認識している。

• ページ全体：[MUST] ページを構成する領域の明示

  チェック内容

  デザイン（チェックID: 0661）

  • ページのどの部分がそれぞれheader, nav, main, footer要素でマークアップされるべきかが、複数のページで一貫した形で設計資料に明示されている。

  コード（チェックID: 0671）

  • header, main, nav, footerの各要素が適切に用いられている。または

  • これらがrole属性で明示されている。

3×3より大きいテーブルの空ではないtd要素はテーブルヘッダーと関連づいていなければなりません

大きなテーブルの空ではないデータセルに1つかそれ以上のテーブルヘッダーが存在することを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

• 達成基準1.3.1

  • Info and Relationships

  • 情報及び関係性

関連するガイドラインとチェック内容

• フォーム：[MUST] 表示されているテキストをラベルとして用いる

  チェック内容

  デザイン（チェックID: 0931）

  • フォーム・コントロールについて、役割が分かり、画面上に表示されているテキストまたは代替テキストが付加された画像を、ラベルとして設計資料に定義している。または

  • aria-label属性値として指定すべき、フォーム・コントロールの役割を示すテキストを設計資料に定義している。

  コード（チェックID: 0941）

  • フォーム・コントロールは、ラベルとなるテキストまたは画像とlabel要素またはaria-labelledby属性で関連付けられている。または

  • aria-label属性で適切なラベルが付けられている。

  • 開発者ツールで確認するとフォーム・コントロールのaccessible nameに役割が分かるテキストが指定されている状態になっている。

  プロダクト（チェックID: 0951、axe DevToolsによるチェック実施方法の例）

  • フォーム・コントロールの役割が分かるテキストまたは代替テキストが付加された画像がラベルとして表示されていて、このテキストをクリックすると当該のフォーム・コントロールにフォーカスが移動する。または

  • スクリーン・リーダーでフォーム・コントロールとラベルの関連付けが分かるような読み上げがされる。

• フォーム：[MUST] 表示されているテキストをラベルにできない場合

  チェック内容

  デザイン（チェックID: 0931）

  • フォーム・コントロールについて、役割が分かり、画面上に表示されているテキストまたは代替テキストが付加された画像を、ラベルとして設計資料に定義している。または

  • aria-label属性値として指定すべき、フォーム・コントロールの役割を示すテキストを設計資料に定義している。

  コード（チェックID: 0941）

  • フォーム・コントロールは、ラベルとなるテキストまたは画像とlabel要素またはaria-labelledby属性で関連付けられている。または

  • aria-label属性で適切なラベルが付けられている。

  • 開発者ツールで確認するとフォーム・コントロールのaccessible nameに役割が分かるテキストが指定されている状態になっている。

  プロダクト（チェックID: 0951、axe DevToolsによるチェック実施方法の例）

  • フォーム・コントロールの役割が分かるテキストまたは代替テキストが付加された画像がラベルとして表示されていて、このテキストをクリックすると当該のフォーム・コントロールにフォーカスが移動する。または

  • スクリーン・リーダーでフォーム・コントロールとラベルの関連付けが分かるような読み上げがされる。

• マークアップ全般：[MUST] 文書構造を適切にマークアップする

  チェック内容

  デザイン（チェックID: 0541）

  • 見出し（h1～h6）、箇条書き（ul, ol, dl）、表（table）など、HTMLのセマンティクスで表現できるものがそれらで表現されるよう、設計資料で明示されている。

  コード（チェックID: 0551）

  • 見出し（h1～h6）、箇条書き（ul, ol, dl）、表（table）などを用いてセマンティクスが適切にマークアップされている。

  プロダクト（チェックID: 0561、NVDAによるチェック実施方法の例、axe DevToolsによるチェック実施方法の例）

  • 設計資料で見出しとして示されているものを、スクリーン・リーダーが見出しとして認識している。

  プロダクト（チェックID: 0562、NVDAによるチェック実施方法の例）

  • スクリーン・リーダーが、表（table）を適切に認識していて、表中のセルも適切に認識している。

• ページ全体：[MUST] ページを構成する領域の明示

  チェック内容

  デザイン（チェックID: 0661）

  • ページのどの部分がそれぞれheader, nav, main, footer要素でマークアップされるべきかが、複数のページで一貫した形で設計資料に明示されている。

  コード（チェックID: 0671）

  • header, main, nav, footerの各要素が適切に用いられている。または

  • これらがrole属性で明示されている。

table要素内のheaders属性を使用するすべてのセルは同じ表内の他のセルのみを参照しなければなりません

ヘッダーを使用しているテーブル内の各セルが、そのテーブル内の他のセルを参照していることを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

• 達成基準1.3.1

  • Info and Relationships

  • 情報及び関係性

関連するガイドラインとチェック内容

• フォーム：[MUST] 表示されているテキストをラベルとして用いる

  チェック内容

  デザイン（チェックID: 0931）

  • フォーム・コントロールについて、役割が分かり、画面上に表示されているテキストまたは代替テキストが付加された画像を、ラベルとして設計資料に定義している。または

  • aria-label属性値として指定すべき、フォーム・コントロールの役割を示すテキストを設計資料に定義している。

  コード（チェックID: 0941）

  • フォーム・コントロールは、ラベルとなるテキストまたは画像とlabel要素またはaria-labelledby属性で関連付けられている。または

  • aria-label属性で適切なラベルが付けられている。

  • 開発者ツールで確認するとフォーム・コントロールのaccessible nameに役割が分かるテキストが指定されている状態になっている。

  プロダクト（チェックID: 0951、axe DevToolsによるチェック実施方法の例）

  • フォーム・コントロールの役割が分かるテキストまたは代替テキストが付加された画像がラベルとして表示されていて、このテキストをクリックすると当該のフォーム・コントロールにフォーカスが移動する。または

  • スクリーン・リーダーでフォーム・コントロールとラベルの関連付けが分かるような読み上げがされる。

• フォーム：[MUST] 表示されているテキストをラベルにできない場合

  チェック内容

  デザイン（チェックID: 0931）

  • フォーム・コントロールについて、役割が分かり、画面上に表示されているテキストまたは代替テキストが付加された画像を、ラベルとして設計資料に定義している。または

  • aria-label属性値として指定すべき、フォーム・コントロールの役割を示すテキストを設計資料に定義している。

  コード（チェックID: 0941）

  • フォーム・コントロールは、ラベルとなるテキストまたは画像とlabel要素またはaria-labelledby属性で関連付けられている。または

  • aria-label属性で適切なラベルが付けられている。

  • 開発者ツールで確認するとフォーム・コントロールのaccessible nameに役割が分かるテキストが指定されている状態になっている。

  プロダクト（チェックID: 0951、axe DevToolsによるチェック実施方法の例）

  • フォーム・コントロールの役割が分かるテキストまたは代替テキストが付加された画像がラベルとして表示されていて、このテキストをクリックすると当該のフォーム・コントロールにフォーカスが移動する。または

  • スクリーン・リーダーでフォーム・コントロールとラベルの関連付けが分かるような読み上げがされる。

• マークアップ全般：[MUST] 文書構造を適切にマークアップする

  チェック内容

  デザイン（チェックID: 0541）

  • 見出し（h1～h6）、箇条書き（ul, ol, dl）、表（table）など、HTMLのセマンティクスで表現できるものがそれらで表現されるよう、設計資料で明示されている。

  コード（チェックID: 0551）

  • 見出し（h1～h6）、箇条書き（ul, ol, dl）、表（table）などを用いてセマンティクスが適切にマークアップされている。

  プロダクト（チェックID: 0561、NVDAによるチェック実施方法の例、axe DevToolsによるチェック実施方法の例）

  • 設計資料で見出しとして示されているものを、スクリーン・リーダーが見出しとして認識している。

  プロダクト（チェックID: 0562、NVDAによるチェック実施方法の例）

  • スクリーン・リーダーが、表（table）を適切に認識していて、表中のセルも適切に認識している。

• ページ全体：[MUST] ページを構成する領域の明示

  チェック内容

  デザイン（チェックID: 0661）

  • ページのどの部分がそれぞれheader, nav, main, footer要素でマークアップされるべきかが、複数のページで一貫した形で設計資料に明示されている。

  コード（チェックID: 0671）

  • header, main, nav, footerの各要素が適切に用いられている。または

  • これらがrole属性で明示されている。

すべてのth要素およびrole=columnheader/rowheaderを持つ要素にはそれらが説明するデータセルがなければなりません

データテーブルのテーブルヘッダーがデータセルを参照していることを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

• 達成基準1.3.1

  • Info and Relationships

  • 情報及び関係性

関連するガイドラインとチェック内容

• フォーム：[MUST] 表示されているテキストをラベルとして用いる

  チェック内容

  デザイン（チェックID: 0931）

  • フォーム・コントロールについて、役割が分かり、画面上に表示されているテキストまたは代替テキストが付加された画像を、ラベルとして設計資料に定義している。または

  • aria-label属性値として指定すべき、フォーム・コントロールの役割を示すテキストを設計資料に定義している。

  コード（チェックID: 0941）

  • フォーム・コントロールは、ラベルとなるテキストまたは画像とlabel要素またはaria-labelledby属性で関連付けられている。または

  • aria-label属性で適切なラベルが付けられている。

  • 開発者ツールで確認するとフォーム・コントロールのaccessible nameに役割が分かるテキストが指定されている状態になっている。

  プロダクト（チェックID: 0951、axe DevToolsによるチェック実施方法の例）

  • フォーム・コントロールの役割が分かるテキストまたは代替テキストが付加された画像がラベルとして表示されていて、このテキストをクリックすると当該のフォーム・コントロールにフォーカスが移動する。または

  • スクリーン・リーダーでフォーム・コントロールとラベルの関連付けが分かるような読み上げがされる。

• フォーム：[MUST] 表示されているテキストをラベルにできない場合

  チェック内容

  デザイン（チェックID: 0931）

  • フォーム・コントロールについて、役割が分かり、画面上に表示されているテキストまたは代替テキストが付加された画像を、ラベルとして設計資料に定義している。または

  • aria-label属性値として指定すべき、フォーム・コントロールの役割を示すテキストを設計資料に定義している。

  コード（チェックID: 0941）

  • フォーム・コントロールは、ラベルとなるテキストまたは画像とlabel要素またはaria-labelledby属性で関連付けられている。または

  • aria-label属性で適切なラベルが付けられている。

  • 開発者ツールで確認するとフォーム・コントロールのaccessible nameに役割が分かるテキストが指定されている状態になっている。

  プロダクト（チェックID: 0951、axe DevToolsによるチェック実施方法の例）

  • フォーム・コントロールの役割が分かるテキストまたは代替テキストが付加された画像がラベルとして表示されていて、このテキストをクリックすると当該のフォーム・コントロールにフォーカスが移動する。または

  • スクリーン・リーダーでフォーム・コントロールとラベルの関連付けが分かるような読み上げがされる。

• マークアップ全般：[MUST] 文書構造を適切にマークアップする

  チェック内容

  デザイン（チェックID: 0541）

  • 見出し（h1～h6）、箇条書き（ul, ol, dl）、表（table）など、HTMLのセマンティクスで表現できるものがそれらで表現されるよう、設計資料で明示されている。

  コード（チェックID: 0551）

  • 見出し（h1～h6）、箇条書き（ul, ol, dl）、表（table）などを用いてセマンティクスが適切にマークアップされている。

  プロダクト（チェックID: 0561、NVDAによるチェック実施方法の例、axe DevToolsによるチェック実施方法の例）

  • 設計資料で見出しとして示されているものを、スクリーン・リーダーが見出しとして認識している。

  プロダクト（チェックID: 0562、NVDAによるチェック実施方法の例）

  • スクリーン・リーダーが、表（table）を適切に認識していて、表中のセルも適切に認識している。

• ページ全体：[MUST] ページを構成する領域の明示

  チェック内容

  デザイン（チェックID: 0661）

  • ページのどの部分がそれぞれheader, nav, main, footer要素でマークアップされるべきかが、複数のページで一貫した形で設計資料に明示されている。

  コード（チェックID: 0671）

  • header, main, nav, footerの各要素が適切に用いられている。または

  • これらがrole属性で明示されている。

lang属性には有効な値がなければなりません

lang属性に有効な値が存在することを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

• 達成基準3.1.2

  • Language of Parts

  • 一部分の言語

関連するガイドラインとチェック内容

• テキスト：[SHOULD] 部分的に使用される言語の明示

  チェック内容

  コード（チェックID: 0911）

  • 複数の言語が含まれているテキストについて、適切にlang属性が指定されている。

  プロダクト（チェックID: 0921、NVDAによるチェック実施方法の例）

  • 複数の言語が含まれているテキストについて、多言語対応している読み上げ環境を用いて読み上げさせたとき、適切な言語の音声エンジンで読み上げられる。

<video>要素にはキャプションがなければなりません

<video>要素にキャプションが存在することを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

• 達成基準1.2.2

  • Captions (Prerecorded)

  • キャプション (収録済)

関連するガイドラインとチェック内容

• 音声・映像コンテンツ：[MUST] テキスト情報と同等の内容にする

  チェック内容

  デザイン（チェックID: 1481）、プロダクト（チェックID: 1501）

  • 音声・映像コンテンツは、そのコンテンツがなくても不足なく情報が伝わるような内容で、そのコンテンツがテキスト情報の代替もしくは補助的な位置づけであることが明示されている。

• 音声・映像コンテンツ：[MUST] キャプションの提供

  チェック内容

  プロダクト（チェックID: 1531）

  • 音声を含むコンテンツには、同期したキャプションが提供されている。

autocomplete属性は正しく使用しなければなりません

autocomplete属性が正しく、かつフォームフィールドに対して適切であることを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

• 達成基準1.3.5

  • Identify Input Purpose

  • 入力目的の特定

同じ名前を持つ複数のリンクは同様の目的を持っています

同じアクセシブルな名前を持つ複数のリンクが同様の目的を果たすことを確認します

参考：Deque Universityの解説（英語）

関連するWCAG 2.1の達成基準

• 達成基準2.4.9

  • Link Purpose (Link Only)

  • リンクの目的 (リンクのみ)

accesskey属性値は一意でなければなりません

すべてのaccesskey属性値が一意であることを確認します

参考：Deque Universityの解説（英語）

ARIAロールは要素に対して適切でなければなりません

role属性の値が要素に対して適切であることを確認します

参考：Deque Universityの解説（英語）

ARIA dialogとalertdialogノードにはアクセシブルな名前がなければなりません

すべてのARIA dialog、alertdialogノードにアクセシブルな名前があることを確認します

参考：Deque Universityの解説（英語）

"role=text"が指定されている要素には、フォーカス可能な子孫が含まれていてはなりません

role="text"が指定されている要素にフォーカス可能な子孫がないことを確認します

参考：Deque Universityの解説（英語）

ARIA treeitemノードにはアクセシブルな名前がなければなりません

すべてのARIA treeitemノードにはアクセシブルな名前があることを確認します

参考：Deque Universityの解説（英語）

見出しは空にしてはなりません

見出しに認識可能なテキストが存在することを確認します

参考：Deque Universityの解説（英語）

フォーカス順序に含まれる要素には、インタラクティブコンテンツに適したロールが必要です

フォーカス順序に含まれる要素に適切なロールがあることを確認します

参考：Deque Universityの解説（英語）

フレームはaxe-coreでテストする必要があります

<iframe>および<frame>要素にaxe-coreスクリプトが含まれていることを確認します

参考：Deque Universityの解説（英語）

フレームには一意のtitle属性がなければなりません

<iframe>および<frame>要素に一意のtitle属性が含まれていることを確認します

参考：Deque Universityの解説（英語）

見出しのレベルは1つずつ増加させなければなりません

見出しの順序が意味的に正しいことを確認します

参考：Deque Universityの解説（英語）

ページ上の隠れているコンテンツは分析できません

隠れているコンテンツについてユーザーに通知します

参考：Deque Universityの解説（英語）

画像の代替テキストはテキストとして繰り返されるべきではありません

画像の代替がテキストとして繰り返されていないことを確認します

参考：Deque Universityの解説（英語）

フォーム要素には視認できるラベルがなければなりません

すべてのフォーム要素がtitleまたはaria-describedby属性を使用して単独でラベル付けされていないことを確認します

参考：Deque Universityの解説（英語）

bannerランドマークは他のランドマークに含まれるべきではありません

bannerランドマークがトップレベルにあることを確認します

参考：Deque Universityの解説（英語）

他の要素にasideを含んではなりません

complementaryランドマークあるいはasideがトップレベルにあることを確認します

参考：Deque Universityの解説（英語）

contentinfoランドマークは他のランドマークに含まれるべきではありません

contentinfoランドマークがトップレベルにあることを確認します

参考：Deque Universityの解説（英語）

mainランドマークは他のランドマークに含まれるべきではありません

mainランドマークがトップレベルにあることを確認します

参考：Deque Universityの解説（英語）

ドキュメントに複数のbannerランドマークが存在してはなりません

ドキュメント内のbannerランドマークが最大で1つのみであることを確認します

参考：Deque Universityの解説（英語）

ドキュメントに複数のcontentinfoランドマークが存在してはなりません

ドキュメント内のcontentinfoランドマークが最大で1つのみであることを確認します

参考：Deque Universityの解説（英語）

ドキュメントに複数のmainランドマークが存在してはなりません

ドキュメント内のmainランドマークが最大で1つのみであることを確認します

参考：Deque Universityの解説（英語）

ドキュメントにはmainランドマークが1つ含まれていなければなりません

ドキュメントのランドマークが1つのみであること、およびページ内の各iframeのランドマークが最大で1つであることを確認します

参考：Deque Universityの解説（英語）

ランドマークが一意であることを確認します

ランドマークは一意のロール又はロール／ラベル／タイトル (例: アクセシブルな名前) の組み合わせがなければなりません

参考：Deque Universityの解説（英語）

ズーミングや拡大縮小は無効にしてはなりません

<meta name="viewport">がテキストの拡大縮小およびズーミングを無効化しないことを確認します

参考：Deque Universityの解説（英語）

ユーザーがズームをしてテキストを最大500％まで拡大できるようにするべきです

<meta name="viewport">で大幅に拡大縮小できることを確認します

参考：Deque Universityの解説（英語）

ページにはレベル1の見出しが含まれていなければなりません

ページ、またはそのフレームの少なくとも1つにはレベル1の見出しが含まれていることを確認します

参考：Deque Universityの解説（英語）

roleがnoneまたはpresentationの要素をマークしなければなりません

roleがnoneまたはpresentationで、roleの競合の解決が必要な要素をマークします

参考：Deque Universityの解説（英語）

ページのすべてのコンテンツはlandmarkに含まれていなければなりません

ページのすべてのコンテンツがlandmarkに含まれていることを確認します

参考：Deque Universityの解説（英語）

scope属性は正しく使用されなければなりません

scope属性がテーブルで正しく使用されていることを確認します

参考：Deque Universityの解説（英語）

スキップリンクのターゲットが存在し、フォーカス可能でなければなりません

すべてのスキップリンクにフォーカス可能なターゲットがあることを確認します

参考：Deque Universityの解説（英語）

要素に0より大きいtabindex属性を指定するべきではありません

tabindex属性値が0より大きくないことを確認します

参考：Deque Universityの解説（英語）

<caption>要素にsummary属性と同じテキストを含んではなりません

テーブルのサマリーとキャプションが同一ではないことを確認します

参考：Deque Universityの解説（英語）