動的コンテンツ

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

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

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

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

  • スクリーン・リーダーで最初から読み進めた場合に、コンテンツの意味が正しく伝わるコンテンツの順序

  • 視覚的に提供されている情報と過不足のない情報が支援技術に伝わる状態

意図

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

  • Webの場合、動的に追加されるコンテンツが、DOMツリーの適切な位置に挿入されることで、スクリーン・リーダーのユーザーがそのコンテンツの存在を認知し、内容を理解することができる。

  • モーダル・ダイアログ、開閉するメニュー、アコーディオンなどで注意が必要。

対応するWCAG 2.1の達成基準

SC 1.3.1:
SC 1.3.2:

参考情報

チェック内容

チェックID:0711

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

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

NVDAによるチェック実施方法の例
  • ブラウズ・モードでページ先頭からカーソルキー操作で読み上げさせたとき、自然な、意味の理解を阻害しない順序で読み上げられることを確認する。

  • 別の画面への遷移を伴わずに表示内容を変更するような仕組みがある場合は、すべての状態において適切な順序で読み上げられることを確認する。

iOS VoiceOverによるチェック実施方法の例
  • 1本指による右および左方向のフリックでフォーカスを移動した際、自然な、意味の理解を阻害しない順序で読み上げられることを確認する。

  • 別の画面への遷移を伴わずに表示内容を変更するような仕組みがある場合は、すべての状態において適切な順序で読み上げられることを確認する。

参考:1本指による右および左方向へのフリック

Android TalkBackによるチェック実施方法の例
  • 1本指による右および左方向のフリックでフォーカスを移動した際、自然な、意味の理解を阻害しない順序で読み上げられることを確認する。

  • 別の画面への遷移を伴わずに表示内容を変更するような仕組みがある場合は、すべての状態において適切な順序で読み上げられることを確認する。

参考:1本指による右および左方向へのフリック

チェックID:1313

対象

プロダクト

対象プラットフォーム

モバイル

重篤度

[MAJOR]

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

  • ユーザーの入力操作や情報の閲覧を妨げるようなタイミングで自動表示されない

  • モーダル・ダイアログ外に表示されているものに対して、スクリーン・リーダーのフォーカスの移動、その内容の読み上げ、ボタンなどのコントロールに対する操作ができないようになっている

[MUST]OnFocus/OffFocus時の挙動

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

  • ページ遷移

  • フォーム送信

  • モーダル・ダイアログの表示

意図

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

対応するWCAG 2.1の達成基準

SC 3.2.1:

参考情報

チェック内容

チェックID:0152

対象

デザイン

対象プラットフォーム

Web

重篤度

[CRITICAL]

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

  • フォームの送信

  • レイアウトの変更

  • ページの遷移

  • モーダル・ダイアログの表示

  • 表示内容の大幅な変更、など

チェックID:0171

対象

プロダクト

対象プラットフォーム

Web

重篤度

[CRITICAL]

Tab/Shift+Tabキーによるフォーカス移動時の挙動は以下のすべてを満たしている:

  • フォーカス・インジケーターまたはそれを代替する表示がある

  • 自動的に次のような挙動が発生しない:

    • フォームの送信

    • レイアウトの変更

    • ページの遷移

    • モーダル・ダイアログの表示

    • 表示内容の大幅な変更など

[MUST]ホバーで表示されるコンテンツの拡大

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

意図

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

対応するWCAG 2.1の達成基準

SC 1.4.13:

参考情報

チェック内容

チェックID:0092

対象

デザイン

対象プラットフォーム

Web

重篤度

[MAJOR]

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

チェックID:0112

対象

プロダクト

対象プラットフォーム

Web

重篤度

[MAJOR]

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

[SHOULD]ホバーで表示されるコンテンツの非表示

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

  • ポインターを移動させることなく、ホバーで表示されたコンテンツを非表示にできる。(Escキーで消える、など)

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

意図

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

対応するWCAG 2.1の達成基準

SC 1.4.13:

参考情報

チェック内容

チェックID:0091

対象

デザイン

対象プラットフォーム

Web

重篤度

[NORMAL]

ホバーで表示されるすべてのコンテンツは、以下のすべてを満たす設計になっている:

  • ポインターを移動させることなく、ホバーで表示されたコンテンツを非表示にできる。(ESCキーで消える、など)

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

チェックID:0111

対象

プロダクト

対象プラットフォーム

Web

重篤度

[NORMAL]

ホバーで表示されるすべてのコンテンツは、以下のすべてを満たしている:

  • ポインターを移動させることなく、ホバーで表示されたコンテンツを非表示にできる。(ESCキーで消える、など)

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

[MUST]ステータス・メッセージの適切なマークアップ

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

  • スクリーン・リーダーに自動的に読み上げられるようにする。

  • ステータス・メッセージであることが分かるように適切なマークアップをする。

意図

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

対応するWCAG 2.1の達成基準

SC 4.1.3:

参考情報

チェック内容

チェックID:1171

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

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

チェックID:1181

対象

コード

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

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

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

aria-live属性を用いる。

iOS

UIAccessibility.post(notification:argument:)の引数に .announcementとメッセージを入れる。(参考:https://developer.apple.com/documentation/uikit/uiaccessibility/notification/1620176-announcement

Android

ToastSnackBar等にメッセージを入れ、TalkBackで適切に読み上げられるようにする。

チェックID:1191

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

操作の結果などを伝えるステータス・メッセージは、スクリーン・リーダーで自動的に読み上げられる。

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

設計資料に従ってステータス・メッセージが表示される操作を行い、ステータス・メッセージが自動的に読み上げられることを確認する。

参考:期待される挙動を確認する場合は、ステータス・メッセージとスクリーン・リーダーに示した実装例を参照

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

同じページ上に、自動的に開始し5秒以上継続する、点滅やスクロールを伴うコンテンツと、他のコンテンツを一緒に配置しない。そのようなコンテンツを作る場合は、ユーザーが一時停止、停止、または非表示にすることができるようにする。

意図

ロービジョン者や認知障害者が、集中を阻害されないようにする。

対応するWCAG 2.1の達成基準

SC 2.2.2:

参考情報

チェック内容

チェックID:1201

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

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

チェックID:1221

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

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

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

予め設定された間隔で自動的に内容が更新されたり非表示になったりするコンテンツを作らない。そのようなコンテンツを作る場合は、ユーザーが一時停止、停止、非表示にすることができるか、更新頻度を調整できるようにする。

意図

ロービジョン者や認知障害者が、集中を阻害されないようにする。

対応するWCAG 2.1の達成基準

SC 2.2.2:

参考情報

チェック内容

チェックID:1231

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

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

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

チェックID:1251

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

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

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

[MUST]閃光を放つコンテンツ

どの1秒間においても3回を超える閃光を放つものがないようにする。

意図

光感受性の発作を防ぐ。

対応するWCAG 2.1の達成基準

SC 2.3.1:
SC 2.3.2:

参考情報

チェック内容

チェックID:1261

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

1秒間に3回以上光るコンテンツがない。

チェックID:1281

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

1秒間に3回以上光るコンテンツがない。

[SHOULD]割り込み表示

緊急性が高い情報を提示する場合を除いて、プッシュ通知や自動更新などによる割り込みを発生させない。

意図

ロービジョン者や認知障害者が、集中を阻害されないようにする。

対応するWCAG 2.1の達成基準

SC 2.2.4:

参考情報

チェック内容

チェックID:1291

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

ユーザーの入力操作や情報の閲覧を妨げるようなタイミングで表示される、画面の内容を大きく変更するような通知がない。

チェックID:1292

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

ユーザーの入力操作や情報の閲覧を妨げるようなタイミングで表示される、モーダル・ダイアログがない。

チェックID:1311

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

ユーザーの入力操作や情報の閲覧を妨げるようなタイミングで表示される、画面の内容を大きく変更するような通知がない。

チェックID:1312

対象

プロダクト

対象プラットフォーム

Web

重篤度

[MAJOR]

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

  • ユーザーの入力操作や情報の閲覧を妨げるようなタイミングで自動表示されない

  • キーボード操作でモーダル・ダイアログを開きTabキーを押下すると、フォーカスがモーダル・ダイアログ内に移動し、モーダル・ダイアログが閉じた際にはフォーカスが元の位置に戻る

  • モーダル・ダイアログ内でTabまたはShift+Tabキーを押してフォーカスを移動した際、フォーカスがモーダル・ダイアログの外に移動しない

チェックID:1313

対象

プロダクト

対象プラットフォーム

モバイル

重篤度

[MAJOR]

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

  • ユーザーの入力操作や情報の閲覧を妨げるようなタイミングで自動表示されない

  • モーダル・ダイアログ外に表示されているものに対して、スクリーン・リーダーのフォーカスの移動、その内容の読み上げ、ボタンなどのコントロールに対する操作ができないようになっている