マークアップと実装

これらのガイドラインは、マークアップと実装全般に関するもので、すべてのコンテンツが対象です。

これらのガイドラインは、すべての項目が[MUST]です。

[MUST]文書構造を適切にマークアップする
[MUST]文法的に正しいマークアップ
[MUST]対話的なUIコンポーネントの実装
[MUST]コンポーネントをアクセシブルにする

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

静的なテキスト・コンテンツは、文書構造などのセマンティクスを適切に表現するHTMLの要素やコンポーネントで実装する。

意図

スクリーン・リーダーなどの支援技術がコンテンツを正しく認識し、ユーザーに適切な形で提示できるようにする。

適切なマークアップにより、スクリーン・リーダーで見出しや箇条書きの項目を探しやすくなる。
スクリーン・リーダーなどの支援技術には、見出しやリンクの一覧表示機能など、適切なマークアップを前提に実装されている機能がある。

対応するWCAG 2.1の達成基準

SC 1.3.1：

参考情報

セマンティクスを適切にマークアップする重要性

チェック内容

チェックID：0541

対象: デザイン
対象プラットフォーム: Web、モバイル
重篤度: [NORMAL]

見出しとして表現されるべきものが、設計資料で明示されている。

チェックID：0542

対象: デザイン
対象プラットフォーム: Web、モバイル
重篤度: [MAJOR]

箇条書き、表などとして表現されるべきものが、使用するべきHTMLの要素やデザイン・システムのコンポーネントと共に、設計資料で明示されている。

チェックID：0551

対象: コード
対象プラットフォーム: Web、モバイル
重篤度: [NORMAL]

見出しが、設計資料に従って適切に実装されている。

実装方法の例：見出しの実装

Web: h1～h6でマークアップする。
iOS: UIAccessibilityTraits.headerをセットする。

チェックID：0552

対象: コード
対象プラットフォーム: Web
重篤度: [MAJOR]

箇条書き、表などのセマンティクスが、設計資料に従って適切に実装されている。

実装方法の例：セマンティクスに応じた実装

Web

箇条書き（ul、ol、dl）、表（table）などを使用する
デザイン・システムの適切なコンポーネントを使用する

チェックID：0561

対象: プロダクト
対象プラットフォーム: Web、モバイル
重篤度: [NORMAL]

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

NVDAによるチェック実施方法の例

以下の手順で見出しリストを表示して、ページ中の見出しが過不足なく表示されていることを確認する。

ブラウズ・モードで要素リストを表示（NVDA+F7）
「種別」を「見出し」に設定（Alt+H）

axe DevToolsによるチェック実施方法の例

以下のいずれの問題も出ないことを確認する。

iOS VoiceOverによるチェック実施方法の例

ローター・ゼスチャーで「見出し」を選んだ上で、1本指の下および上方向のフリックですべての見出しに到達できることを確認する。

参考：1本指による上および下方向へのフリック

Android TalkBackによるチェック実施方法の例

読み上げコントロールの設定で「見出し」を選んだ上で、1本指の下および上方向のフリックですべての見出しに到達できることを確認する。

参考：1本指による上および下方向へのフリック

チェックID：0562

対象: プロダクト
対象プラットフォーム: Web、モバイル
重篤度: [MAJOR]

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

NVDAによるチェック実施方法の例

以下の手順で表を発見可能：
1. ブラウズ・モードでページの先頭に移動（Ctrl+Home）
2. 前後の表への移動（TまたはShift+Tキー）で、表に移動
以下の手順で、表中のセル間を移動しながら読み上げが可能：
1. ブラウズ・モードで表の先頭部分を探す
2. 以下のキー操作でセル間を移動し、移動先のセルの内容が読み上げられることを確認する：
  - Ctrl+Alt+←：左のセル
  - Ctrl+Alt+→：右のセル
  - Ctrl+Alt+↓：下のセル
  - Ctrl+Alt+↑：上のセル

読み上げられる内容：

上記のセル間移動の操作を行った場合、以下の内容が読み上げられます。

左右の移動：移動先のセルの列見出し、列の番号、セルの内容
上下の移動：移動先のセルの行見出し、行の番号、セルの内容

単にカーソルキーを操作した場合は、以下のような内容が読み上げられます。

上下矢印：前後のセルへ移動して読み上げ。ただしセル内で開業がある場合などは、セルの1部分だけが読み上げられることもある。
左右矢印：1文字ずつ移動して読み上げ。空のセルでは、1つだけスペースがあるような挙動になる。

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

文法的に正しい、仕様に準拠したマークアップを行う。

意図

スクリーン・リーダーなどの支援技術が、Webページを正確に解析できるようにする。

HTML要素の開始タグと終了タグが適切に記述されていること、適切な入れ子構造になっていることで、様々なユーザー・エージェントや支援技術が期待した動作をする。

対応するWCAG 2.1の達成基準

SC 4.1.1：

参考情報

The Nu Html Checkerを用いたHTMLのバリデーション

チェック内容

チェックID：0571

対象: コード
対象プラットフォーム: Web
重篤度: [MAJOR]

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

[MUST]対話的なUIコンポーネントの実装

リンクやボタン、フォーム・コントロールなど、ユーザーの操作を受け付けるUIコンポーネントは、なるべくHTMLの適切な要素、または使用している開発フレームワークの標準的なコンポーネントを用いて実装する。

意図

スクリーン・リーダーなどの支援技術がコンテンツを正しく認識し、ユーザーに適切な形で提示できるようにする。
支援技術のユーザーが適切に操作することができるようにする。
キーボードによる操作を可能にする。

対応するWCAG 2.1の達成基準

SC 1.3.1：

参考情報

UIコンポーネントのアクセシビリティー

チェック内容

チェックID：0553

対象: コード
対象プラットフォーム: Web
重篤度: [MAJOR]

ボタンはbutton要素で、リンクはhref属性があるa要素で、各種フォーム・コントロールはHTMLの適切な要素で実装されている

[MUST]コンポーネントをアクセシブルにする

ユーザーの操作を受け付けるUIコンポーネントは、以下を満たす実装をする。

支援技術を含むユーザー・エージェントが取得できる形で、適切にAccessibleNameとroleを定義する。
支援技術を含むユーザー・エージェントが、コンポーネントの状態、プロパティー、ユーザーが設定可能な値を設定でき、これらの変更を認知できるようにする。

意図

支援技術が、例えばJavaScriptで実装されているような独自のコンポーネントを問題なく扱えるようにする。

例えば開閉できるメニュー、タブなど、標準的なHTMLだけでは実装できないようなコンポーネントについて、スクリーン・リーダーがそれはどのようなコンポーネントで、どのような状態にあのかを正確にユーザーに伝え、かつユーザーの操作を可能にする。
ユーザーの操作によってコンポーネントの状態が変化する場合は、その変化が認知できるようにする。