動的コンテンツ

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

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

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

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

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

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

対象プラットフォーム

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

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

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

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

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

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

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

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

チェック手順：モバイル

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

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

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

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

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

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

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

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

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

チェックID：1313

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

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

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

対象

プロダクト

対象プラットフォーム

モバイル

重篤度

[MAJOR]

OnFocus/OffFocus時の挙動

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

• ページ遷移

• フォーム送信

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

対象プラットフォーム

Web、モバイル

意図

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

対応するWCAG 2.1の達成基準

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

  • On Focus

  • フォーカス時

参考情報

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

チェック内容

チェックID：0152

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

• フォームの送信

• レイアウトの変更

• ページの遷移

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

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

対象

デザイン

対象プラットフォーム

Web

重篤度

[CRITICAL]

チェックID：0171

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

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

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

  • フォームの送信

  • レイアウトの変更

  • ページの遷移

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

  • 表示内容の大幅な変更

対象

プロダクト

対象プラットフォーム

Web

重篤度

[CRITICAL]

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

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

対象プラットフォーム

Web

意図

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

対応するWCAG 2.1の達成基準

• 達成基準1.4.13(レベルAA)：

  • Content on Hover or Focus

  • ホバー又はフォーカスで表示されるコンテンツ

参考情報

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

チェック内容

チェックID：0092

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

対象

デザイン

対象プラットフォーム

Web

重篤度

[MAJOR]

チェックID：0112

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

対象

プロダクト

対象プラットフォーム

Web

重篤度

[MAJOR]

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

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

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

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

対象プラットフォーム

Web

意図

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

対応するWCAG 2.1の達成基準

• 達成基準1.4.13(レベルAA)：

  • Content on Hover or Focus

  • ホバー又はフォーカスで表示されるコンテンツ

参考情報

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

チェック内容

チェックID：0091

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

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

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

対象

デザイン

対象プラットフォーム

Web

重篤度

[NORMAL]

チェックID：0111

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

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

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

対象

プロダクト

対象プラットフォーム

Web

重篤度

[NORMAL]

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

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

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

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

対象プラットフォーム

Web、モバイル

意図

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

対応するWCAG 2.1の達成基準

• 達成基準4.1.3(レベルAA)：

  • Status Messages

  • ステータスメッセージ

参考情報

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

チェック内容

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

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

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

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

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

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

チェック手順：モバイル

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

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

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

対象プラットフォーム

Web、モバイル

意図

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

対応するWCAG 2.1の達成基準

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

  • Pause, Stop, Hide

  • 一時停止、停止、非表示

参考情報

• 自動的に変化するコンテンツの問題点

チェック内容

チェックID：1201

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

チェックID：1221

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

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

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

対象プラットフォーム

Web、モバイル

意図

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

対応するWCAG 2.1の達成基準

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

  • Pause, Stop, Hide

  • 一時停止、停止、非表示

参考情報

• 自動的に変化するコンテンツの問題点

チェック内容

チェックID：1231

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

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

チェックID：1251

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

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

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

閃光を放つコンテンツ

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

対象プラットフォーム

Web、モバイル

意図

光感受性の発作を防ぐ。

対応するWCAG 2.1の達成基準

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

  • Three Flashes or Below Threshold

  • 3 回の閃光、又は閾値以下

• 達成基準2.3.2(レベルAAA)：

  • Three Flashes

  • 3回の閃光

参考情報

• 自動的に変化するコンテンツの問題点

チェック内容

チェックID：1261

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

チェックID：1281

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[CRITICAL]

割り込み表示

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

対象プラットフォーム

Web、モバイル

意図

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

対応するWCAG 2.1の達成基準

• 達成基準2.2.4(レベルAAA)：

  • Interruptions

  • 割り込み

参考情報

• 自動的に変化するコンテンツの問題点

チェック内容

チェックID：1291

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

チェックID：1292

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

対象

デザイン

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

チェックID：1311

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

対象

プロダクト

対象プラットフォーム

Web、モバイル

重篤度

[MAJOR]

チェックID：1312

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

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

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

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

対象

プロダクト

対象プラットフォーム

Web

重篤度

[MAJOR]

チェックID：1313

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

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

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

対象

プロダクト

対象プラットフォーム

モバイル

重篤度

[MAJOR]