動きを減らす設定にCSSで対応する：静止した状態を基本にする

飾りを動かす演出を付けたけれど、動きがなくても案内は読めるだろうか。動きを減らす設定にCSSで対応する際は、まず静止した状態で内容が伝わるページを作ります。

題材は架空の鉱物展の案内です。展示名の横にある飾りだけを、一度短く移動させます。大きな拡大縮小や繰り返す動きは、この練習には加えません。実際にページを閲覧する人が確認した事例ではありません。

動かすものと、残す情報を分ける

「開催中」という文字を動きの途中でしか表示しないと、動きを止めたときに大切な情報が消える可能性があります。今回の例では案内文を常に表示し、飾りだけを動かします。

止めたときにも展示名、日程、次に進むリンクが分かるかを先に点検しましょう。アニメーションを追加する前の状態が、そのまま読める状態になっていることを目標にします。

動きだけで状態の変化を伝えている場合は、静止した文字などで補う必要があるかを検討します。この記事の短い装飾例を、そのまま処理中表示などへ当てはめないでください。

希望が指定されていない場合だけ動かす

prefers-reduced-motionは、利用者が端末で動きを減らす設定を有効にしているかをCSSで扱うための条件です。reduceは削減を希望する状態、no-preferenceはその希望が示されていない状態です。MDNの解説で意味を確認できます。

次はbodyに入れる断片とCSSです。動きの指定はno-preferenceの条件内だけに置き、条件に合わない場合は静止したままにします。

<p><span class="exhibit-mark" aria-hidden="true">◆</span> 鉱物展を開催中です。</p>

.exhibit-mark {
  display: inline-block;
}
@media (prefers-reduced-motion: no-preference) {
  .exhibit-mark {
    animation: mark-enter 400ms ease-out 1;
  }
}
@keyframes mark-enter {
  from { transform: translateY(4px); }
  to { transform: translateY(0); }
}

400msと4pxは、この練習で変化を見るための値です。誰にとっても快適だと保証する数値ではありません。飾りにはaria-hiddenを付け、案内の情報は隣の文章に残しています。動きを好むことを、no-preferenceという値から断定もしません。

動きが消えた状態と、内容が残った状態を両方見る

確認では、端末の動きを減らす設定を有効にしてページを再読み込みします。その後、設定を戻した場合とも比較します。開発者ツールで条件を模擬できる環境なら、それも確認方法の一つです。実際の端末設定と模擬設定のどちらで試したかを記録しましょう。

期待する結果は、削減を希望した状態で飾りが静止し、案内文はどちらでも同じように読めることです。「何も動かない」だけでは、文章まで非表示になった失敗を見落とします。

既存CSSに別のanimation指定があれば、その指定が残っていないかも調べます。この条件を一つ足しても、別の要素やJavaScriptで動かす演出まで自動で止まるわけではありません。

動きを減らしても、案内とリンクが残るか

練習ページに例を置き、設定ごとに動き、文章、操作できるリンクの状態を記録します。確認後は自分の端末設定を必要に応じて元に戻してください。試せない環境の結果は、想像で合格にしません。

動きを消した後もキーボードの現在位置は分かる必要があります。フォーカス表示の記事で操作の見え方も点検できます。無料レッスンの本文へ飾りを加える場合は、静止版を先に完成させてから、この条件を適用してみましょう。