スライドするサムのセグメント
「日／週／月／年」の4区分。選ぶと白いサムが選択位置へ滑り、下の集計値が切り替わる。矢印キーでも移動でき、iOS 型の見た目をボタンだけで作る。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- 日／週／月のように排他の 2〜5 区分を切り替える
- 切り替えると同じ画面の数値が変わる集計表示
- ラベルが 1〜3 文字で等幅に収まる選択肢
- 避ける場面
- 選択肢が 6 個以上
- ラベル長が大きく違う選択肢
- ページ遷移を伴うナビゲーション
- 構成要素
- レール
- 滑るサム
- 区分ボタン
- 集計値
- 前期比
- 持っている状態
- 通常
- フォーカス
- キーボード
Tab で選択中の区分へ入り、←→／↑↓で移動と同時に選択、Home／End で端へ。Tab 1 回で群を抜けられる
- 支援技術
APG Radio Group: role=radiogroup＋aria-label、各 role=radio に aria-checked、roving tabindex。値は aria-live=polite で読まれ、サムは aria-hidden
- 動き
サム 240ms ease-out で選択位置へ滑る（動く要素は 1 つ）。文字色 200ms。reduced-motion で停止
デザインの要点
- サムは選択中の区分の上に「乗っている」1枚だけ。動く要素を1つに絞ると、どこへ移ったかが一目で追える
- 区分は 2〜5 個まで。ラベルは 1〜3 文字の同じ長さに揃え、等幅の枠に収める
- 選択は role=radiogroup ＋ aria-checked で伝え、←→ キーで移動できるようにする
- 切り替えたら下の数値が変わることを、同じ画面で見せる。何が変わるか分からないセグメントは押されない
コード（コピーして使えます）
<div class="sst-card">
<p class="sst-label">売上の集計期間</p>
<div class="sst-seg" role="radiogroup" aria-label="集計期間" id="sst-seg">
<span class="sst-thumb" aria-hidden="true"></span>
<button class="sst-opt" type="button" role="radio" aria-checked="true" tabindex="0" data-value="¥48,200" data-diff="前日比 +6%">日</button>
<button class="sst-opt" type="button" role="radio" aria-checked="false" tabindex="-1" data-value="¥312,900" data-diff="前週比 +2%">週</button>
<button class="sst-opt" type="button" role="radio" aria-checked="false" tabindex="-1" data-value="¥1,284,000" data-diff="前月比 −4%">月</button>
<button class="sst-opt" type="button" role="radio" aria-checked="false" tabindex="-1" data-value="¥14,950,000" data-diff="前年比 +18%">年</button>
</div>
<p class="sst-value" id="sst-value" aria-live="polite">¥48,200</p>
<p class="sst-diff" id="sst-diff">前日比 +6%</p>
</div>