モーション設定の切替
「動きを減らす」スイッチで data-motion="reduce" を付け、跳ねるドットと流れるお知らせを止める。初期値は OS の prefers-reduced-motion。
プレビュー
クリック
操作クリック／タップで動きます。
デザインの要点
- 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>