モーション設定の切替
「動きを減らす」スイッチで data-motion="reduce" を付け、跳ねるドットと流れるお知らせを止める。初期値は OS の prefers-reduced-motion。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- OS 設定に加えサイト内でも動きを減らせる設定
- 跳ねる・流れる装飾を止める切替
- 属性 1 つで CSS 側が参照する集約設計
- 避ける場面
- フェードや色の変化まで消す
- 要素ごとに JS で止めに行く
- 見た目だけのトグル（role=switch 無し）
- 構成要素
- スイッチ
- 跳ねるドットの通知
- 流れるティッカー
- 状態の帯
- 持っている状態
- 通常
- フォーカス
- キーボード
Tab でスイッチへ、Space／Enter で切替。切替結果は帯の文言で確認できる
- 支援技術
APG Switch: role=switch＋aria-checked＋aria-labelledby。初期値は prefers-reduced-motion。ティッカーは aria-label で全文を持つ。reduce で大きな動きを停止
- 動き
ドット 0.9s 往復・ティッカー 14s 流れ・つまみ 200ms。data-motion=reduce と OS 設定でドットとティッカーを止める
デザインの要点
- OS 設定（prefers-reduced-motion）を初期値にしつつ、サイト内でも切り替えられるようにする。OS の設定場所を知らない人のほうが多い
- 止めるのは「大きく動く・繰り返す・自動で流れる」もの。フェードや色の変化まで消すと状態変化が分からなくなる
- 切替は role=switch＋aria-checked。トグルの見た目だけ作ると、読み上げでは「ボタン」としか伝わらない
- 設定は属性1つ（data-motion）に集約し、CSS 側で参照する。要素ごとに JS で止めに行くと漏れる
コード（コピーして使えます）
<div class="mp-wrap" id="mp-root" data-motion="auto">
<div class="mp-head">
<span class="mp-title">表示の設定</span>
<div class="mp-switch">
<span id="mp-label">動きを減らす</span>
<button type="button" role="switch" aria-checked="false" aria-labelledby="mp-label" id="mp-toggle" class="mp-sw"><span class="mp-knob" aria-hidden="true"></span></button>
</div>
</div>
<div class="mp-demo">
<div class="mp-card">
<span class="mp-ball" aria-hidden="true"></span>
<span>新機能: 請求書の一括送信に対応しました</span>
</div>
<div class="mp-ticker" aria-label="キャンペーン実施中・9/30 まで送料無料"><span aria-hidden="true">キャンペーン実施中 ・ 9/30 まで送料無料 ・ 初回は初期費用 ¥0 ・ キャンペーン実施中 ・ 9/30 まで送料無料 ・ 初回は初期費用 ¥0 ・ </span></div>
</div>
<div class="mp-band"><span class="mp-tag">状態</span><span id="mp-msg">OS 設定: 動きあり / サイト設定: OS に従う（data-motion="auto"）</span></div>
</div>