マークアップと実装

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

文書構造を適切に示すマークアップ、実装を行う

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

対象プラットフォーム

Web、モバイル

意図

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

• 適切なマークアップにより、スクリーン・リーダーで見出しや箇条書きの項目を探しやすくなる。

• スクリーン・リーダーなどの支援技術には、見出しやリンクの一覧表示機能など、適切なマークアップを前提に実装されている機能がある。

対応するWCAG 2.1の達成基準

• 達成基準1.3.1(レベルA)：

  • Info and Relationships

  • 情報及び関係性

参考情報

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

関連FAQ

• 見出しレベルの指定

• hr 要素はスクリーン・リーダーにどのように読み上げられるべきか

チェック内容

チェック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

以下のaxe DevToolsによるチェックを満たしていて、かつNVDAによるチェックまたはmacOS VoiceOverによるチェックのいずれかを満たしていることを確認する。

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

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

• 見出しは空にしてはなりません (Headings should not be empty)

• 見出しのレベルは1つずつ増加させなければなりません (Heading levels should only increase by one)

• ページにはレベル1の見出しが含まれていなければなりません (Page should contain a level-one heading)

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

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

1. ブラウズ・モードで要素リストを表示（NVDA+F7）

2. 「種別」を「見出し」に設定（Alt+H）

参考動画：見出し【NVDAでアクセシビリティー チェック】

macOS VoiceOverによるチェック方法の例

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

1. VO + Uを押下してローターのメニューを表示

2. 「見出し」を選択

チェック手順：モバイル

以下のiOS VoiceOverおよびAndroid TalkBackによるチェックを満たしていることを確認する。

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

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

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

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

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

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

チェックID：0562

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

チェック手順：Web

以下のNVDAによるチェックを満たしていることを確認する。

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

以下のすべてを満たしていることを確認する。

• 以下の手順で表を発見できる：

  1. ブラウズ・モードでページの先頭に移動（Ctrl+Home）

  2. 前後の表への移動（TまたはShift+Tキー）で、表に移動

• 以下の手順で、表中のセル間を移動して、セルの内容が適切に読み上げられる：

  1. ブラウズ・モードで表の先頭部分を探す

  2. 以下のキー操作でセル間を移動：

     • Ctrl+Alt+←：左のセル

     • Ctrl+Alt+→：右のセル

     • Ctrl+Alt+↓：下のセル

     • Ctrl+Alt+↑：上のセル

セル移動時に読み上げられる内容：

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

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

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

ブラウズ・モードで単に矢印キーを操作した場合は、以下のような内容が読み上げられます。

• 上下矢印：前後のセルへ移動して読み上げ。ただしセル内で改行がある場合などは、セルの1部分だけが読み上げられることもある。

• 左右矢印：1文字ずつ移動して読み上げ。空のセルでは、1つだけスペースがあるような挙動になる。

参考動画：表【NVDAでアクセシビリティー チェック】

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

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

対象プラットフォーム

Web

意図

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

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

対応するWCAG 2.1の達成基準

• 達成基準4.1.1(レベルA)：

  • Parsing

  • 構文解析

参考情報

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

チェック内容

チェックID：0571

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

対象

コード

対象プラットフォーム

Web

重篤度

[MAJOR]

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

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

対象プラットフォーム

Web、モバイル

意図

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

• 支援技術のユーザーが適切に操作することができるようにする。

• キーボードによる操作を可能にする。

対応するWCAG 2.1の達成基準

• 達成基準1.3.1(レベルA)：

  • Info and Relationships

  • 情報及び関係性

参考情報

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

チェック内容

チェック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)：

  • Name, Role, Value

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

参考情報

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

チェック内容

チェック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

以下のNVDAによるチェックを満たしていることを確認する。

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

以下のすべてを満たしていることを確認する：

• ブラウズ・モードでその部分を読み上げさせたとき、何らかの操作を受け付けるものであることが分かる

• その部分で提供されているすべての機能を、最低限フォーカス・モードにおいてキーボードで操作できる

• 操作の結果表示が変わる場合、そのことが読み上げられる内容から理解できる

• 操作の結果表示が変わる場合、ブラウズ・モードで変更後の表示内容を読み上げさせて確認できる

参考動画：開閉するボタン【NVDAでアクセシビリティー チェック】

チェックID：0592

複数の状態を持つコンポーネントは、スクリーン・リーダー利用時にもその状態が分かるようになっている。（例：タブUIの現在選択されているタブ、状態に応じて変化するアイコンなど）

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]