動的コンテンツ

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

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

ユーザーの操作に伴う挙動

[MUST] 適切なDOMツリーを維持する

ガイドライン

[MUST] ユーザーの操作によってコンテンツが増減するようなページでは、どの状態においても、最初から順に読み進めた場合にコンテンツの意味が正しく伝わるような順序にDOMツリーを維持する。

チェック内容
  • 挙動: ページがどの状態でも、スクリーン・リーダーで読み上げさせたとき、内容的、および視覚的に自然な順序で読み上げられる。

意図

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

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

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

対応するWCAG 2.1の達成基準

[MUST] OnFocus/OffFocus時の挙動

ガイドライン

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

  • ページ遷移

  • フォーム送信

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

チェック内容
  • 機能: このようなコンポーネントを作らない。

  • 挙動: Tab/Shift+Tabキーでフォーカスを移動させたときに、このような挙動が発生するコンポーネントがない。

意図

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

対応するWCAG 2.1の達成基準

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

ガイドライン

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

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

  • ポインターを、ホバーで表示されたコンテンツ上に移動しても、コンテンツが消えない。

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

チェック内容
  • 挙動: ホバーで表示されるすべてのコンテンツは、このガイドラインに挙げられている項目を満たしている。

意図

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

ステータス・メッセージ

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

ガイドライン

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

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

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

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

  • マークアップ: 操作の結果などを伝えるステータス・メッセージには、適切にaria-live属性が付与されている。

意図

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

対応するWCAG 2.1の達成基準

自動的に変化するコンテンツ

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

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

ガイドライン

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

チェック内容
  • ビジュアル、挙動:点滅、スクロール、動きを伴うコンテンツがない。

意図

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

対応するWCAG 2.1の達成基準

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

ガイドライン

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

チェック内容
  • ビジュアル、挙動:自動更新されるコンテンツがない。

意図

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

対応するWCAG 2.1の達成基準

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

ガイドライン

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

チェック内容
  • ビジュアル、挙動:光り続けているようなコンテンツがない。

意図

光感受性の発作を防ぐ。

[SHOULD] 割り込み表示

ガイドライン

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

チェック内容
  • ビジュアル、挙動:ユーザーが予期しない形で発生する、画面の内容を大きく変更するような通知や自動的に表示されるモーダル・ダイアログがない。

意図

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

対応するWCAG 2.1の達成基準