動的コンテンツ

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

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

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

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

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

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

対象プラットフォーム

Web、モバイル

意図

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

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

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

対応するWCAG 2.1の達成基準
参考情報

チェック内容

チェックID：0711

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

チェック手順：Web

以下の0711-nvda-01または0711-macvo-01がOKであることを確認する。

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

NVDAが起動している状態で、以下を確認する：

  • ブラウズ・モードでページ先頭から矢印キーの操作で読み上げさせたとき、自然な、意味の理解を阻害しない順序で読み上げられることを確認する。

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

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

macOS VoiceOverが有効な状態で、以下を確認する：

  • VOキーと左右矢印キーによるVoiceOverカーソルの操作でページ先頭から読み上げさせたとき、自然な、意味の理解を阻害しない順序で読み上げられることを確認する。

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

チェックID：1313

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

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

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

対象

プロダクト

対象プラットフォーム

モバイル

重篤度

[MAJOR]

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

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

対象プラットフォーム

Web

意図

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

対応するWCAG 2.1の達成基準
参考情報

チェック内容

チェックID：0092

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

対象

デザイン

対象プラットフォーム

Web

重篤度

[MAJOR]

チェックID：0112

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

対象

プロダクト

対象プラットフォーム

Web

重篤度

[MAJOR]

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

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

  • ポインターを移動させることなく、マウスオーバーで表示されたコンテンツを非表示にできる。（Escキーで消える、など）

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

対象プラットフォーム

Web

意図

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

対応するWCAG 2.1の達成基準
参考情報

チェック内容

チェックID：0091

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

  • ポインターを移動させることなく、マウスオーバーで表示されたコンテンツを非表示にできる。（ESCキーで消える、など）

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

対象

デザイン

対象プラットフォーム

Web

重篤度

[NORMAL]

チェックID：0111

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

  • マウス・ポインターを移動させることなく、マウスオーバーで表示されたコンテンツを非表示にできる。（ESCキーで消える、など）

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

対象

プロダクト

対象プラットフォーム

Web

重篤度

[NORMAL]

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

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

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

  • ステータス・メッセージであることやその内容が、roleやその他のプロパティーを通して分かるようにする。

対象プラットフォーム

Web、モバイル

意図

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

対応するWCAG 2.1の達成基準
参考情報

チェック内容

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

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

チェックID：1191

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

チェック手順：Web

以下の1191-nvda-01がOKであることを確認する。

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

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

参考：aria-liveを用いた実装において期待される挙動については、ステータス・メッセージとスクリーン・リーダーに示した実装例を参照

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

点滅、自動スクロールを伴うコンテンツ

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

対象プラットフォーム

Web、モバイル

意図

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

対応するWCAG 2.1の達成基準
参考情報

チェック内容

チェックID：1201

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

チェックID：1221

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

自動更新されるコンテンツ

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

対象プラットフォーム

Web、モバイル

意図

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

対応するWCAG 2.1の達成基準
参考情報

チェック内容

チェックID：1231

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

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

チェックID：1251

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

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

  • ユーザーが自動更新を停止できる。

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

閃光を放つコンテンツ

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

対象プラットフォーム

Web、モバイル

意図

光感受性の発作を防ぐ。

対応するWCAG 2.1の達成基準
参考情報

チェック内容

チェックID：1261

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

チェックID：1281

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

割り込み表示

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

対象プラットフォーム

Web、モバイル

意図

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

対応するWCAG 2.1の達成基準
参考情報

チェック内容

チェックID：1291

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

チェックID：1292

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

チェックID：1311

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

チェックID：1312

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

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

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

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

対象

プロダクト

対象プラットフォーム

Web

重篤度

[MAJOR]

チェックID：1313

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

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

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

対象

プロダクト

対象プラットフォーム

モバイル

重篤度

[MAJOR]