ステッパー
component「入力 → 確認 → 完了」のような複数ステップの手続きで、いまどこまで進んだかを示すナビゲーションです。終わったステップはチェック、いまいるステップは緑の枠で表示されます。配色は WCAG 2.2 AAA のコントラスト基準を満たしています。
ステップの状態
completed / current / upcoming。現在地は aria-current="step"、完了は .is-completed（ARIA に完了を表す属性が無いためクラスで指定）
- ステップ名
- 1 ステップ名
- 1 ステップ名
使用例
完了したステップの直後の接続線は進捗色（primary/600）になる
3 ステップ（確認まで進んだ状態）
- 入力
- 2 確認
- 3 完了
4 ステップ（開始直後）
- 1 基本情報
- 2 本人確認
- 3 お支払い
- 4 完了
3 ステップ（すべて完了）
- 入力
- 確認
- 完了
機能
このコンポーネントの用途
複数ステップの手続き（入力→確認→完了）で現在地と進捗を示すナビゲーション。
同一領域の表示切替は tab、ページ送りは pagination。
使用法
推奨される使い方と、やりがちな NG パターン
OK
- ✓現在は aria-current="step"、完了は is-completed（マーカーを check に差し替え）。
NG
- ✕単なる表示切替（タブ）に使わない → tab。
- ✕完了を色だけで示さない → is-completed ＋ check アイコンで示す。
完了・現在・未来を区別して示す
進捗の可視化- 入力
- 2確認
- 3完了
完了＝チェック、現在＝枠、未来＝番号。色に加え形でも区別する。
<li class="stepper-step is-completed">✓ 入力</li> <li class="stepper-step" aria-current="step">2 確認</li>
- 1入力
- 2確認
- 3完了
完了・現在を示さないと、どこまで進んだか分からない（全て未来のように見える）。
<li class="stepper-step">1 入力</li> <!-- is-completed / aria-current なし -->
ステッパーのアクセシビリティ
進捗表示の非インタラクティブな <ol>／<li> です。現在地は aria-current="step"。完了状態を表す ARIA 属性は無いため、視覚のチェックに加え読み上げ用テキストで補います。WCAG 2.2 全基準は アクセシビリティ ページを参照。
期待される配慮
Presentation / Adaptability / Interaction / Assistive Technology
完了＝チェック、現在＝枠、未来＝番号と形でも区別。配色は AAA コントラスト。
rem / トークンで拡大に追従。横幅が狭い時はラベルの折り返し・縦積みで対応。
進捗表示は非インタラクティブ（フォーカス対象ではない）。ステップ移動が要るなら別途ボタン/リンクで。
<ol> で順序、現在は aria-current="step"。完了は ARIA 属性が無いので読み上げ用テキスト（例: sr-only「完了」）で補う。マーカーの数字/チェックは装飾。
DS が担保する機能
追加実装なしで満たされる
- ✓
<ol>／<li>で順序が伝わるセマンティック構造 - ✓完了＝チェック・現在＝枠・未来＝番号の形による区別（色だけに頼らない）
- ✓配色は WCAG 2.2 AAA のコントラスト基準を満たす
実装時の必須対応
プロダクト側で担保する
- !現在のステップに
aria-current="step"を付ける - !完了ステップは
.is-completedに加え、読み上げ用テキスト（.sr-only「完了」）で状態を補う - !マーカーの数字・チェック SVG は
aria-hidden="true"（ラベルが名前を担う） - !
<ol>にaria-label（例: 「申請の進捗」）を付ける
テスト方法
スクリーンリーダー / 自動チェック
- 操作進捗表示自体はフォーカスされない（Tab で止まらない）
- SR「リスト、n 項目」と各ステップ名、現在は「現在のステップ」、完了は補足テキストで読まれる
- 自動axe / Lighthouse で
aria-current・コントラスト・装飾アイコンのaria-hiddenを確認
現在は aria-current・完了は読み上げテキストで補う
達成基準：WCAG 1.3.1 情報及び関係性 / 4.1.2 名前・役割・値
- 完了入力
- 2確認
- 3完了
現在に aria-current="step"、完了に .sr-only「完了」。SR に進捗が伝わる。
<li class="stepper-step is-completed">…<span class="sr-only">完了</span>入力</li> <li class="stepper-step" aria-current="step">2 確認</li>
- 入力
- 2確認
- 3完了
チェックは視覚のみ・aria-current も無いと、SR 利用者に完了/現在が伝わらない。
<li class="stepper-step is-completed">✓ 入力</li> <!-- sr-only なし --> <li class="stepper-step">2 確認</li> <!-- aria-current なし -->