動的コンテンツ

これらのガイドライン項目は、動的コンテンツに関するものです。

動的コンテンツとは、自動的、またはユーザーの操作を受けて変化するものです。そのような変化には、表示されているものの変更に加えて、ページ遷移なども含まれる場合があります。

支援技術への適切な情報提供の維持

ユーザーの操作によってコンテンツが増減するようなページでは、ページがどの状態にあってもスクリーン・リーダーが適切に情報を取得できる状態を維持する。

スクリーン・リーダーで最初から読み進めた場合に、コンテンツの意味が正しく伝わるコンテンツの順序
視覚的に提供されている情報と過不足のない情報が支援技術に伝わる状態

対象プラットフォーム

Web、モバイル

意図

スクリーン・リーダーなどの支援技術のユーザーが、コンテンツを正しく理解できるようにする。

Webの場合、動的に追加されるコンテンツが、DOMツリーの適切な位置に挿入されることで、スクリーン・リーダーのユーザーがそのコンテンツの存在を認知し、内容を理解することができる。
モーダル・ダイアログ、開閉するメニュー、アコーディオンなどで注意が必要。

対応するWCAG 2.1の達成基準

達成基準1.3.1(レベルA)：
- Info and Relationships
- 情報及び関係性
達成基準1.3.2(レベルA)：
- Meaningful Sequence
- 意味のある順序

参考情報

DOMツリーとスクリーン・リーダー

チェック内容

チェックID：0711

ページ/画面の状態が変化したときも含めて、スクリーン・リーダーで読み上げさせた時、内容的、および視覚的に自然な順序で読み上げられる。

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

チェック手順：Web

以下の0711-nvda-01または0711-macvo-01を満たしていることを確認する。

0711-nvda-01：NVDAによるチェック方法の例

NVDAが起動している状態の操作で、以下を満たしている：

ブラウズ・モードでページ先頭から矢印キーの操作で読み上げさせたとき、自然な、意味の理解を阻害しない順序で読み上げられる。
別の画面への遷移を伴わずに表示内容を変更するような仕組みがある場合は、すべての状態において適切な順序で読み上げられる。

0711-macvo-01：macOS VoiceOverによるチェック方法の例

macOS VoiceOverが起動している状態の操作で、以下を満たしている：

VOキーと左右矢印キーによるVoiceOverカーソルの操作でページ先頭から読み上げさせたとき、自然な、意味の理解を阻害しない順序で読み上げられる。
別の画面への遷移を伴わずに表示内容を変更するような仕組みがある場合は、すべての状態において適切な順序で読み上げられる。

チェックID：1313

モーダル・ダイアログが表示される場合：

ユーザーの入力操作や情報の閲覧を妨げるようなタイミングで自動表示されない
モーダル・ダイアログ外に表示されているものに対して、スクリーン・リーダーのフォーカスの移動、その内容の読み上げ、ボタンなどのコントロールに対する操作ができないようになっている

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

OnFocus/OffFocus時の挙動

OnFocus, OffFocusが以下のような変化を発生させないようにする。

ページ遷移
フォーム送信
モーダル・ダイアログの表示

対象プラットフォーム

Web、モバイル

意図

視覚障害、認知障害があるユーザーにとって予期できない挙動を発生させない。

対応するWCAG 2.1の達成基準

達成基準3.2.1(レベルA)：
- On Focus
- フォーカス時

参考情報

Tab / Shift+Tab キーを用いたチェック

関連FAQ

Safariでのみ、Tabキーによるフォーカス移動の挙動がおかしい

チェック内容

チェックID：0152

Tab / Shift+Tabキーでフォーカスを移動しているときに、以下のような変化を発生させる機能が設計資料にない：

フォームの送信
レイアウトの変更
ページの遷移
モーダル・ダイアログの表示
表示内容の大幅な変更、など

対象: デザイン
対象プラットフォーム: Web
重篤度: [CRITICAL]

チェックID：0173

キーボード操作時に、ユーザーが予期しない、またはユーザーの混乱を招くような表示の変化が自動的に発生しない。

対象: プロダクト
対象プラットフォーム: Web
重篤度: [CRITICAL]

チェック手順：Web

以下の0173-keyboard-01を満たしていることを確認する。

0173-keyboard-01：キーボード操作によるチェック方法の例

Tab / Shift+Tabキーによるフォーカス移動時に、自動的に次のような挙動が発生しない：

フォームの送信
レイアウトの変更
ページの遷移
モーダル・ダイアログの表示
表示内容の大幅な変更

マウスオーバー（ホバー）で表示されるコンテンツの拡大

マウスオーバー（ホバー）で表示されるコンテンツについて、マウスオーバーで表示されたコンテンツ上にポインターを移動しても、コンテンツが消えないようにすることで、そのコンテンツを拡大表示して利用することを可能にする。

対象プラットフォーム

Web

意図

拡大表示を利用しているロービジョン者が、マウスオーバーで表示される内容を利用できるようにする。

対応するWCAG 2.1の達成基準

達成基準1.4.13(レベルAA)：
- Content on Hover or Focus
- ホバー又はフォーカスで表示されるコンテンツ

参考情報

マウスオーバー（ホバー）で表示されるコンテンツと拡大表示

チェック内容

チェックID：0092

マウスオーバーで表示されるコンテンツは、拡大表示が可能な設計になっている。

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

チェック手順：Web

以下の0092-content-00または0092-content-01を満たしていることを確認する。

0092-content-00：その他の手段によるチェック方法の例

チェック対象の画面に、マウスオーバーで表示されるコンテンツが存在しない。

0092-content-01：その他の手段によるチェック方法の例

マウスオーバーで表示されるコンテンツは、マウス・ポインターをそのコンテンツ上に移動しても、コンテンツが消えない設計になっている。

チェックID：0112

マウスオーバーで表示されるコンテンツは、拡大表示が可能。

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

チェック手順：Web

以下の0112-content-00または0112-mouse-01を満たしていることを確認する。

0112-content-00：その他の手段によるチェック方法の例

チェック対象の画面に、マウスオーバーで表示されるコンテンツが存在しない。

0112-mouse-01：mouseによるチェック方法の例

マウスオーバーで表示されるコンテンツは、マウス・ポインターをそのコンテンツ上に移動しても、コンテンツが消えない。

マウスオーバー（ホバー）で表示されるコンテンツの非表示

マウスオーバー（ホバー）で表示されるコンテンツについて、以下のすべてを満たす。

ポインターを移動させることなく、マウスオーバーで表示されたコンテンツを非表示にできる。（Escキーで消える、など）
マウスオーバー状態ではなくなった場合、ユーザーが非表示にする操作を行った場合、内容が無効になった場合にのみ、マウスオーバーで表示されたコンテンツを非表示にする。

対象プラットフォーム

Web

意図

拡大表示を利用しているロービジョン者が、マウスオーバーで表示される内容を利用できるようにする。

対応するWCAG 2.1の達成基準

達成基準1.4.13(レベルAA)：
- Content on Hover or Focus
- ホバー又はフォーカスで表示されるコンテンツ

参考情報

マウスオーバー（ホバー）で表示されるコンテンツと拡大表示

チェック内容

チェックID：0091

マウスオーバーで表示されるすべてのコンテンツは、拡大表示利用時にもユーザーの意図に反して消えない設計になっている。

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

チェック手順：Web

以下の0091-content-00を満たしている、または(0091-content-01と0091-content-02を満たしている)ことを確認する。

0091-content-00：その他の手段によるチェック方法の例

チェック対象の画面に、マウスオーバーで表示されるコンテンツが存在しない。

0091-content-01：その他の手段によるチェック方法の例

マウス・ポインターを移動させることなく、マウスオーバーで表示されたコンテンツを非表示にできる機能が定義されている。（例：ESCキーの押下や表示されたコンテンツ上でのマウス・クリックなど）

0091-content-02：その他の手段によるチェック方法の例

マウスオーバーで表示されたコンテンツが非表示になるのは、マウスオーバー状態ではなくなった場合、ユーザーが非表示にする操作を行った場合、内容が無効になった場合のみであることが設計資料に明記されている。

チェックID：0111

マウスオーバーで表示されるすべてのコンテンツは、拡大表示利用時にもユーザーの意図に反して消えない。

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

チェック手順：Web

以下の0111-content-00を満たしている、または(0111-mouse-01と0111-mouse-02を満たしている)ことを確認する。

0111-content-00：その他の手段によるチェック方法の例

チェック対象の画面に、マウスオーバーで表示されるコンテンツが存在しない。

0111-mouse-01：mouseによるチェック方法の例

マウス・ポインターを移動させることなく、マウスオーバーで表示されたコンテンツを非表示にできる。（ESCキーの押下や表示されたコンテンツ上でのマウス・クリックなど）

0111-mouse-02：mouseによるチェック方法の例

マウスオーバー状態ではなくなった場合、ユーザーが非表示にする操作を行った場合、内容が無効になった場合にのみ、マウスオーバーで表示されたコンテンツが非表示になる。

ステータス・メッセージの適切な実装

ステータス・メッセージについて、以下のすべてを満たす。

スクリーン・リーダーに自動的に読み上げられるようにする。
ステータス・メッセージであることやその内容が、roleやその他のプロパティーを通して分かるようにする。

対象プラットフォーム

Web、モバイル

意図

視覚障害者が、ステータス・メッセージを遅滞なく確認できるようにする。

対応するWCAG 2.1の達成基準

達成基準4.1.3(レベルAA)：
- Status Messages
- ステータスメッセージ

参考情報

ステータス・メッセージとスクリーン・リーダー

チェック内容

チェックID：1171

ステータス・メッセージとして扱われるべきメッセージ、すなわち表示時や変更時にスクリーン・リーダーによって自動的に読み上げられる必要があるメッセージが、設計資料で特定されている。

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

チェック手順：Web

以下の1171-content-00または1171-content-01を満たしていることを確認する。

1171-content-00：その他の手段によるチェック方法の例

チェック対象の画面には、ステータス・メッセージとして扱われるべきメッセージが存在しない。

1171-content-01：その他の手段によるチェック方法の例

ステータス・メッセージとして扱われるべきメッセージについて、表示時や変更時にスクリーン・リーダーによって自動的に読み上げられる必要があることが設計資料で明示されている。

チェックID：1181

操作の結果などを伝えるステータス・メッセージが自動的に読み上げられるようにする。

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

実装方法の例：自動的に読み上げられるようにする

Web: aria-live属性を用いる。
iOS: UIAccessibility.post(notification:argument:)の引数に .announcementとメッセージを入れる。（参考：https://developer.apple.com/documentation/uikit/uiaccessibility/notification/1620176-announcement）
Android: Toast、SnackBar等にメッセージを入れ、TalkBackで適切に読み上げられるようにする。