このページはAIの支援を受けて翻訳されました。正文は英語の原文です。
読書は運動行為です。目は行に沿ってなめらかに滑るのではなく、サッカードで跳び、固視で着地します。理解が起こるのは着地の瞬間です。ページ上で動くものはすべて、その着地を奪い合います。モーションは視覚系が持つ最強の注意信号 — 意志の力では切ることのできない進化上の警報 — であり、だからこそテキストの近くのアニメーション要素は読書をこれほど蝕み、テキスト自体が動く場合にはほとんど読めなくなるのです。
現代のウェブはモーションで飽和しています。入場アニメーション、パララックスの背景、スクロールで発火する出現効果、自動送りのカルーセル。その一部は職人技です。多くは読者を犠牲にした装飾です。そしてある読者群にとって、それは注意散漫よりも悪いものです。
前庭障害 — 害としてのモーション
前庭障害 — 内耳と平衡感覚系の疾患 — を持つ人にとって、画面上のモーションは、目をそらした後も長く続くめまい、吐き気、回転性めまい、頭痛を引き起こすことがあります。トリガーは特定的で、当事者によってよく記述されています。ビューポートを横切って滑る大きな要素、ズームや拡大縮小の効果、異なる速度で動くパララックスのレイヤー、そして目に見えるものと手の動作を切り離すスクロール連動アニメーションです。これは不快感ではありません。嫌悪よりも乗り物酔いに近い、身体的な反応です。ページが読者を体調不良にさせうるのです。
WCAG はこれを 2.3.3(インタラクションによるアニメーション)で扱っています。インタラクションによって引き起こされるモーションアニメーションは、それが必要不可欠でない限り、無効化できるべきである、と。これは AAA の基準ですが、その位置づけは重要性を過小評価しています — 影響を受ける人々にとって、これは強化ではなく、使えるか使えないかの分かれ目です。
読者のスイッチ — prefers-reduced-motion
いまや主要なオペレーティングシステムはすべて「視差効果を減らす」設定を提供しており、prefers-reduced-motion メディアクエリがそれをスタイルシートとスクリプトに公開しています。これを尊重することは、プログレッシブエンハンスメントではなく、責任ある実践の必須要件です。理由は単純で、この設定を有効にした人は、モーションが自分に害を及ぼすからそうしたのです。この設定を無視することは、表明された医学的配慮の要請を無視することです。
正しく尊重するとは、アニメーションを切る以上のことを意味します。
- 移動を不透明度に置き換える。フェードは何かを画面上で移動させることなく「これが現れた」と伝えます。スライドやズームが許容されない場面でも、クロスフェードは広く許容されます。
- reduced motion のもとでは、パララックスとスクロール連動効果を完全に無効化する — 残す価値のある「控えめ版のパララックス」は存在しません。
- CSS だけでなく、JavaScript 駆動のアニメーションにもこの設定を適用する。メディアクエリはスクリプトから照会でき、アニメーションライブラリもこれで制御できます。
- 「減らす」を「あらゆる状態変化を取り除く」と解釈しない。瞬間的な遷移もまた混乱を招きます。目標は不要な空間的モーションの排除であって、フィードバックの排除ではありません。
動くテキストは読めないテキスト
スクロールし、流れ、滑り、点滅するテキストは、サッカードと固視の機構を真っ向から打ち負かします。ロービジョンの読者、拡大表示を使う読者(動く対象が単語の途中で拡大領域の外に出てしまうことがあります)、ディスレクシアや注意の困難を持つ読者、そして単に読むのが遅い読者は、いずれも不釣り合いに罰せられます。読み終える前にテキストが去ってしまうのです。
WCAG 2.2.2(一時停止、停止、非表示)— レベル A、すなわち最も低く、最も交渉の余地のない層の基準 — は、自動的に開始され5秒を超えて続く、動く・点滅する・スクロールするコンテンツには、一時停止、停止、または非表示にする仕組みが必要であると定めています。圧倒的に最も多い違反者は自動送りのカルーセル、とりわけテキストを載せたものです。タイマーで回転するカルーセルは、一部の読者がスライドを読み終えられないことを保証します。「一時停止」コントロールは、存在する場合でさえ、決まって小さく、ラベルがなく、それが防ぐはずだった苛立ちを味わった後にしか見つかりません。コンテンツが重要なら、静止に値します。自動で回転するなら、そのデザインはすでに重要でないと認めているのです — そしてそれは読者の操作によってのみ進むべきです。
スクロールで発火するテキスト効果は、特に疑ってかかるべきです。ビューポートに入るとフェードインする段落、一文字ずつ組み上がる見出し、背景がスクロールするあいだ固定されるテキスト。いずれも読者と言葉のあいだにアニメーションを挿し込みます。読者は読むために来たのです。言葉をそこにあらしめてください。
読書を尊重するモーション
以上のどれも、静的なウェブを主張するものではありません。モーションには正当な仕事があります。操作が受け付けられたことを示す、閉じたパネルがどこへ行ったかを見せる、見逃されるはずだった変化に目を引き寄せる。その務めにおけるモーションは、短く、小さく、まれで、本文には決して適用されません。有用なテストの一式を挙げます。
- そのモーションは読者に必要な何かを伝えているか、それともデザイナーの好みを飾っているか。
- 誰かがいま読んでいるテキストの近く、あるいはその上にあるか。
- 一度だけ短く実行されるか、それともループするか。
prefers-reduced-motionを完全に尊重しているか。
この章が新設された理由
初版は、この章を必要にした状況よりも前に書かれました。2005年、CSS はアニメーションできませんでした。本格的なモーションには Flash が必要で、そのアクセシビリティの議論は点滅と発作リスクが中心であり、前庭への害ではありませんでした。prefers-reduced-motion クエリがブラウザに現れたのは2017年、WCAG 2.3.3 は2018年のバージョン 2.1 とともに登場し、スクロールで発火するアニメーション漬けの現代ウェブのハウススタイルはそれよりも若いのです。モーションは安価になりました。抑制という規律こそ、いまこれらのガイドラインが加えられるものです。
CSS では
/* Default: entrance combines movement and fade */
.reveal {
animation: slide-fade-in 300ms ease-out;
}
@keyframes slide-fade-in {
from { opacity: 0; transform: translateY(1rem); }
to { opacity: 1; transform: none; }
}
/* Reduced motion: keep the fade, drop the movement */
@media (prefers-reduced-motion: reduce) {
.reveal {
animation: fade-in 200ms ease-out;
}
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
}
/* Coarse safety net for unaudited animation — a last
resort, not the practice; it also removes the fades
and feedback worth keeping */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}推奨事項
prefers-reduced-motionを CSS と JavaScript のあらゆる場所で、必須要件として尊重する。- reduced motion のもとでは、スライドとズームをフェードに置き換え、パララックスとスクロール連動効果は完全に取り除く。
- 本文を決してアニメーションさせない。読書とモーションは敵同士である。
- WCAG 2.2.2 を満たす。5秒を超えて自動で動くものには、見える一時停止・停止・非表示のコントロールが必要である。
- 意味のあるコンテンツに自動送りのカルーセルを使わない。存在する場合は、読者に操作させる。
- 目的のあるモーションは短く、小さく、ループさせず、読まれているテキストから遠ざける。
- OS の「視差効果を減らす」設定を有効にして主要ページをテストし、生き残った空間的アニメーションはバグとして扱う。