マークアップと実装
これらのガイドライン項目は、マークアップと実装全般に関するもので、すべてのコンテンツが対象です。
文書構造を適切に示すマークアップ、実装を行う
静的なテキスト・コンテンツは、文書構造などのセマンティクスを適切に表現するHTMLの要素やコンポーネントで実装する。
- 対象プラットフォーム
Web、モバイル
- 意図
スクリーン・リーダーなどの支援技術がコンテンツを正しく認識し、ユーザーに適切な形で提示できるようにする。
適切なマークアップにより、スクリーン・リーダーで見出しや箇条書きの項目を探しやすくなる。
スクリーン・リーダーなどの支援技術には、見出しやリンクの一覧表示機能など、適切なマークアップを前提に実装されている機能がある。
- 対応するWCAG 2.1の達成基準
達成基準1.3.1(レベルA)：
- 参考情報
- 関連FAQ
チェック内容
チェックID：0541
見出しとして表現されるべきものが、設計資料で明示されている。
- 対象
デザイン
- 対象プラットフォーム
Web、モバイル
- 重篤度
[NORMAL]
チェックID：0542
箇条書き、表などとして表現されるべきものが、使用するべきHTMLの要素やデザイン・システムのコンポーネントと共に、設計資料で明示されている。
- 対象
デザイン
- 対象プラットフォーム
Web
- 重篤度
[MAJOR]
チェックID：0543
見出しには適切な見出しレベルが指定されている：
文書の階層構造を反映した見出しレベルが指定されている
ページ全体では、見出しレベルは1から始まっている
見出しレベルは、1の下位は2、2の下位は3のように1ずつ増加していて、抜けがない状態になっている
- 対象
デザイン
- 対象プラットフォーム
Web
- 重篤度
[NORMAL]
チェックID：0551
見出しが、設計資料に従って適切に実装されている。
- 対象
コード
- 対象プラットフォーム
Web、モバイル
- 重篤度
[NORMAL]
実装方法の例：見出しの実装
- Web
h1～h6でマークアップする。- iOS
UIAccessibilityTraits.headerをセットする。- Android
当該テキストに対して
android:accessiblityHeadingをtrueに設定する（Android 9以降）
チェックID：0552
箇条書き、表などのセマンティクスが、設計資料に従って適切に実装されている。
- 対象
コード
- 対象プラットフォーム
Web
- 重篤度
[MAJOR]
実装方法の例：セマンティクスに応じた実装
- Web
箇条書き（
ul、ol、dl）、表（table）などを使用するデザイン・システムの適切なコンポーネントを使用する
チェックID：0561
見出しは、設計資料で示されている見出しレベルの見出しとしてスクリーン・リーダーに認識されている。
- 対象
プロダクト
- 対象プラットフォーム
Web、モバイル
- 重篤度
[NORMAL]
チェック手順：Web
以下の0561-axe-01がOK、かつ0561-nvda-01または0561-macvo-01がOKであることを確認する。
0561-axe-01：axe DevToolsによるチェック方法の例
axe DevToolsで以下のいずれの問題も出ないことを確認する。
0561-nvda-01：NVDAによるチェック方法の例
NVDAで以下の操作をして見出しリストを表示して、ページ中の見出しが過不足なく表示されていることを確認する。
ブラウズ・モードで要素リストを表示（NVDA+F7）
「種別」を「見出し」に設定（Alt+H）
0561-macvo-01：macOS VoiceOverによるチェック方法の例
macOS VoiceOverで以下の操作をして見出しリストを表示して、ページ中の見出しが過不足なく表示されていることを確認する。
VO + Uを押下してローターのメニューを表示
「見出し」を選択
チェックID：0562
スクリーン・リーダーが、表を適切に認識していて、表中のセルも適切に認識している。
- 対象
プロダクト
- 対象プラットフォーム
Web、モバイル
- 重篤度
[MAJOR]
チェック手順：Web
以下の0562-nvda-01がOKであることを確認する。
0562-nvda-01：NVDAによるチェック方法の例
以下のすべてを満たしていることをNVDAで確認する。
以下の手順で表を発見できる：
ブラウズ・モードでページの先頭に移動（Ctrl+Home）
前後の表への移動（TまたはShift+Tキー）で、表に移動
以下の手順で、表中のセル間を移動して、セルの内容が適切に読み上げられる：
ブラウズ・モードで表の先頭部分を探す
以下のキー操作でセル間を移動：
Ctrl+Alt+←：左のセル
Ctrl+Alt+→：右のセル
Ctrl+Alt+↓：下のセル
Ctrl+Alt+↑：上のセル
セル移動時に読み上げられる内容：
上記のセル間移動の操作を行った場合、以下の内容が読み上げられます。
左右の移動：移動先のセルの列見出し、列の番号、セルの内容
上下の移動：移動先のセルの行見出し、行の番号、セルの内容
ブラウズ・モードで単に矢印キーを操作した場合は、以下のような内容が読み上げられます。
上下矢印：前後のセルへ移動して読み上げ。ただしセル内で改行がある場合などは、セルの1部分だけが読み上げられることもある。
左右矢印：1文字ずつ移動して読み上げ。空のセルでは、1つだけスペースがあるような挙動になる。
文法的に正しいマークアップ
文法的に正しい、仕様に準拠したマークアップを行う。
- 対象プラットフォーム
Web
- 意図
スクリーン・リーダーなどの支援技術が、Webページを正確に解析できるようにする。
HTML要素の開始タグと終了タグが適切に記述されていること、適切な入れ子構造になっていることで、様々なユーザー・エージェントや支援技術が期待した動作をする。
- 対応するWCAG 2.1の達成基準
- 参考情報
チェック内容
チェックID：0571
validatorやlinterでチェックが通る。
- 対象
コード
- 対象プラットフォーム
Web
- 重篤度
[MAJOR]
対話的なUIコンポーネントの実装
リンクやボタン、フォーム・コントロールなど、ユーザーの操作を受け付けるUIコンポーネントは、なるべくHTMLの適切な要素、または使用している開発フレームワークの標準的なコンポーネントを用いて実装する。
- 対象プラットフォーム
Web、モバイル
- 意図
スクリーン・リーダーなどの支援技術がコンテンツを正しく認識し、ユーザーに適切な形で提示できるようにする。
支援技術のユーザーが適切に操作することができるようにする。
キーボードによる操作を可能にする。
- 対応するWCAG 2.1の達成基準
達成基準1.3.1(レベルA)：
- 参考情報
チェック内容
チェックID：0553
ボタンはbutton要素で、リンクはhref属性があるa要素で、エディット・ボックス、チェックボックス、ラジオボタンなど、各種フォーム・コントロールはHTMLの適切な要素で実装されている
- 対象
コード
- 対象プラットフォーム
Web
- 重篤度
[MAJOR]
チェックID：0554
UIコンポーネントは、OSや開発フレームワークの標準コンポーネントを用いて実装されている。
- 対象
コード
- 対象プラットフォーム
Web、モバイル
- 重篤度
[MAJOR]
コンポーネントをアクセシブルにする
ユーザーの操作を受け付けるUIコンポーネントは、以下を満たす実装をする。
支援技術を含むユーザー・エージェントが取得できる形で、適切にAccessibleNameとroleを定義する。
支援技術を含むユーザー・エージェントが、コンポーネントの状態、プロパティー、ユーザーが設定可能な値を設定でき、これらの変更を認知できるようにする。
- 対象プラットフォーム
Web、モバイル
- 意図
支援技術が、例えばJavaScriptで実装されているような独自のコンポーネントを問題なく扱えるようにする。
例えば開閉できるメニュー、タブなど、標準的なHTMLだけでは実装できないようなコンポーネントについて、スクリーン・リーダーがそれはどのようなコンポーネントで、どのような状態にあのかを正確にユーザーに伝え、かつユーザーの操作を可能にする。
ユーザーの操作によってコンポーネントの状態が変化する場合は、その変化が認知できるようにする。
- 対応するWCAG 2.1の達成基準
達成基準4.1.2(レベルA)：
- 参考情報
チェック内容
チェックID：0581
独自実装が必要なUIコンポーネントについて、スクリーン・リーダー利用時の挙動およびキーボードによる操作時の挙動が設計資料で明示されている。
- 対象
デザイン
- 対象プラットフォーム
Web、モバイル
- 重篤度
[CRITICAL]
チェックID：0586
独自実装のUIコンポーネントは、スクリーン・リーダーなどの支援技術に適切にその役割や状態が伝わるようになっている。
- 対象
コード
- 対象プラットフォーム
Web、モバイル
- 重篤度
[CRITICAL]
実装方法の例：スクリーン・リーダーに役割を伝える
- Web
role属性を適切に指定する。- iOS
適切な
accessibilityTraitsを指定する。
- Android
jetpack composeを使用している場合：
role属性を適切に指定するjetpack composeを使用していない場合：viewの
getAccessibilityClassName()メソッドを、適切な値が返るもので上書きする。
チェックID：0587
複数の状態を持つコンポーネントは、その状態が視覚的にもスクリーン・リーダーでも分かるようになっている。（例：タブUIの現在選択されているタブ、状態に応じて変化するアイコンなど）
- 対象
コード
- 対象プラットフォーム
Web、モバイル
- 重篤度
[CRITICAL]
チェックID：0591
静的なテキストではない部分（例：開閉するメニュー、タブ・パネル、日付選択UI）も、スクリーン・リーダーで問題なく操作できる。
- 対象
プロダクト
- 対象プラットフォーム
Web、モバイル
- 重篤度
[CRITICAL]
チェック手順：Web
以下の0591-nvda-01がOKであることを確認する。
0591-nvda-01：NVDAによるチェック方法の例
以下のすべてを満たしていることをNVDAで確認する：
ブラウズ・モードでその部分を読み上げさせたとき、何らかの操作を受け付けるものであることが分かる
その部分で提供されているすべての機能を、最低限フォーカス・モードにおいてキーボードで操作できる
操作の結果表示が変わる場合、そのことが読み上げられる内容から理解できる
操作の結果表示が変わる場合、ブラウズ・モードで変更後の表示内容を読み上げさせて確認できる
チェックID：0592
複数の状態を持つコンポーネントは、スクリーン・リーダー利用時にもその状態が分かるようになっている。（例：タブUIの現在選択されているタブ、状態に応じて変化するアイコンなど）
- 対象
プロダクト
- 対象プラットフォーム
Web、モバイル
- 重篤度
[CRITICAL]