操作で起きる不要な動きを無効にできるようにする。

05条件と補足

モーションアニメーションとは

状態が切り替わる途中を段階的に描き、動いているように見せたり、滑らかに移行する感覚を与えたりする表示です。位置へ移動しながら現れる、大きさを変えながら表示される、といったものを含みます。

途中の動きなしで即座に現れる表示は、この定義のアニメーションではありません。また、見た目の大きさ・形・位置が変わらない、色や不透明度だけの変化は、モーションアニメーションには含まれません。

動きを無効にする方法

不要な動きを採用しない、利用者が無効にする設定を用意する、端末やブラウザーの動き軽減設定を利用するといった方法があります。この教材では、図内の設定に加えて、prefers-reduced-motionというCSSのメディアクエリで、利用者が端末側で選んだ設定を確認しています。

端末で動き軽減の設定が有効な場合、必要不可欠でない移動のアニメーションを付けず、同じ内容を表示します。短い時間や小さな動きなら一律に対象外になる、という要件ではありません。

必要不可欠な動きの例外

動きを取り除くと情報や機能が根本的に変わり、適合する別の方法では実現できない場合が例外です。公式解説では、アニメーションを制作するツールで、作成した動きをプレビューする機能を挙げています。

今回の講座案内は、動かさずに同じ説明を表示できるため、この例外には当たりません。目立たせたいという理由だけで、動きを必要不可欠と判断しないようにします。

スクロールと自動開始のアニメーション

スクロールして新しい本文を画面内に出すための移動は、その機能に必要な動きです。一方、背景を本文と違う速さで動かす視差効果などは、追加された動きとして確認します。

この基準は利用者の操作で生じる動きを扱います。2.2.2「一時停止、停止、非表示」は、意図的な操作への反応ではなく、自動で始まる動きなどを扱います。動きによっては両方の確認が必要です。2.3.3には、2.2.2の動きに関する「5秒より長い」という条件を当てはめません。

図の改善側にある小さな移動は、無効化の動作を試すためのものです。小さければ必ず問題がない、又はこの図だけでサイト全体がWCAGに適合する、という意味ではありません。