ステップバー
Stepper
別名: ステップインジケーター、プログレスステップ、ウィザードステップ、工程表示、Step indicator、Progress steps
生態（さわってみる）
- 会員情報
- お届け先
- お支払い
- 確認
一言定義
複数の手順から成る工程で、完了・現在・未達の状態を横並びの目印で示す進行状況表示UI。
分類
使う場面
- 会員登録や購入手続きなど、順序が決まった複数手順を進ませたいとき
- 今どの工程にいるか、残りいくつあるかを常に見せたいとき
避ける場面
- 数量など単純な数値の増減を扱いたいとき（→数値ステッパー）
- 手順に順序性がなく、自由に行き来してよい情報の階層を示したいとき（→パンくずリスト）
近縁種との比較
「ステッパー（Stepper）」という語は、数量などを1刻みで増減させる入力部品である数値ステッパーと、複数手順の現在位置を示す進行状況表示（本エントリ）という、まったく別の2つの意味で使われる同名異義語であり、混同すると設計意図が伝わらない。パンくずリストが「来た道（いま自分がサイト階層のどこにいるか）」を示すのに対し、ステップバーは「これから進む道（決まった順序の手順のどこまで進んだか）」を示す点で対照的で、階層的なナビゲーションにステップバーを使うと本来自由に行き来できるはずの経路が一方向のフローに見えてしまうため、用途を混同しないよう注意が必要である。
実例リンク
アクセシビリティ
- role
- ol（順序リスト）+ 各stepに aria-current="step"（現在の手順であることを示す専用トークン）
- キーボード操作
- 前へ/次へボタンをTabで移動、Enter/Spaceで実行。手順自体を直接クリックしてジャンプさせるかは実装依存
- 補足
- 手順の切り替えは aria-live="polite" の領域で状態文言を通知すると、変化がスクリーンリーダーに伝わりやすい