ボタンに走る金色の光は、次の操作に気づくきっかけになります。一方、文章の横で回り続ける装飾は、読むことを妨げるかもしれません。違いは豪華さではなく、役割にあります。動きを加える前に、「この動きによって、利用者は何を理解できるか」と考えてみましょう。答えがはっきりしなければ、それは内容より優先すべきものではない装飾です。これは制作上の判断方法であり、売上向上を約束するものではありません。
効果より先に、操作を分かりやすくする
記事カードなら、見出しが話題を伝え、抜粋が読む理由を示し、目立つリンクが本文へ案内します。マウスを重ねたときの短い色の変化は、その操作を補助できます。しかし、光る効果がなければリンクと通常の文章を区別できないなら、基本のデザインを見直すべきです。まずコントラスト、ラベル、配置を確認し、その後で動きを加えます。スマートフォンには継続的なマウスホバーがないため、主要な操作はその効果なしでも理解できる必要があります。
一つのアニメーションに三つの質問
開始のきっかけはページの読み込み、スクロール、それとも意図的な操作でしょうか。いつ終わるのでしょうか。動きをなくしても、結果は伝わるでしょうか。メニューでは、パネルが長く移動することより、開いた状態が明確なことが大切です。完了通知には、消える光だけでなく言葉が必要です。確認表では装飾的な効果と状態変化を伝える効果を分けておくと、好き嫌いだけではない具体的な議論ができます。
動きを減らしても、内容は減らさない
MDNは、prefers-reduced-motionを、不要な動きを減らしたいという端末側の設定を反映するための仕組みとして説明しています。ただし、指定するだけでサイト全体が改善されるわけではありません。制作者が代わりの表現を設計する必要があります。回転を停止したり、大きな移動を伴う登場を即時表示に変えたりしても、ラベルやメニューへのアクセス、ボタンの状態は残します。有用な情報を含むアニメーション領域を丸ごと隠してはいけません。CSSだけでなく、JavaScriptが動かす効果も確認します。
必要な操作手段を用意する
WCAGの達成基準2.2.2はレベルAで、自動的に始まり、五秒を超えて続き、他の内容と並んで表示される動く情報などを扱います。定められた条件に該当する場合、動きが本質的でない限り、一時停止、停止、非表示にする手段が必要です。自動更新される情報には別の条件があります。「五秒以内ならどんなアニメーションでもよい」という意味ではありません。レベルAAAの達成基準2.3.3は、操作によって始まる本質的でないアニメーションを無効にできることを別に扱っています。一つの切替機能だけで、サイト全体のWCAG適合を証明することはできません。
公開前に同じ経路を歩いてみる
通常の設定と動きを減らす設定の両方で、メニューを開き、カードを読み、記事へ移動して戻ります。内容が消えず、操作部品の状態が分かるかを確認しましょう。キーボードとスマートフォンでも同じ経路を試します。アニメーションを制御する部品があれば、アクセスできるか、ラベルが明確かを確認します。さらに一分ほど読み続けた後の印象も見ます。最初は魅力的な効果が、次第に煩わしく感じられることもあります。目的はサイトの個性を消すことではなく、落ち着いて利用できる選択肢を残すことです。