本文へ移動

§09-18Forms

セグメント control

排他的な選択肢をボタンの並びで切り替える。

表示モードや期間など、少数の選択肢をその場で切り替えたいときに使う。全選択肢が見えるので、現在の選択と他の候補が同時に分かる。

実装のポイント

実体は単一選択なので role=radiogroup と role=radio(または aria-pressed)で状態を伝える。選択肢は 2〜5 個程度に抑え、矢印キーで移動できるようにする。

特徴
  • キーボード操作
  • アクセシビリティ