Design Pattern
プログレスバー
プログレスバーは、処理の進行状況やタスクの達成度を視覚的に伝えるパターンです。ネイティブの progress 要素を使うことで、支援技術にも進捗が正しく伝わります。
いつ使う / 使わない
使うべきとき
- ファイルアップロードやダウンロードの進捗を表示する場合
- フォーム入力のステップ進行を示す場合
- スキルレベルや達成率など静的な割合を表示する場合
使わないべきとき
- 読み込み中で進捗率が不明な場合 → スピナーやスケルトンを使う
- リアルタイムに変動するデータ → メーターやグラフを使う
- ユーザー操作に応じたスライダー → range input を使う
構造（Anatomy）
1 ラベル（進捗の説明）
2 トラック（背景バー）
3 インジケーター（進捗バー）
4 値テキスト（パーセント表示）
- ラベル — 何の進捗かを明確にする。ラベルがないと意味が伝わらない
- トラック — 全体の範囲を示す背景。インジケーターとのコントラストを確保する
- インジケーター — 現在の進捗を幅で表現する。色でも状態を示せる
HTML 構造
重要なポイント
- progress 要素を使えば role や aria-valuenow が自動で設定される
- value 属性を省略すると不確定状態（indeterminate）になる
- ラベルを label 要素か aria-label で紐づける
- 進捗率をテキストでも表示し、視覚以外でも把握できるようにする
CSS 実装
見た目で補助すべき点
- トラック — 薄い背景色で全体の範囲を示す
- インジケーター — 十分なコントラストの色で進捗を表現する
- 角丸 — トラックとインジケーターに一貫した border-radius を設定する
- アニメーション — 不確定状態では動きで処理中であることを伝える
アクセシビリティ
WCAG 1.3.1 情報及び関係性
progress 要素にラベルを紐づけ、何の進捗かを支援技術に伝えます。
WCAG 4.1.2 名前・役割・値
進捗の現在値・最大値が支援技術に正しく伝わる必要があります。
WCAG 4.1.3 ステータスメッセージ
進捗が動的に変化する場合、aria-live で更新を通知します。
キーボード操作
- プログレスバー自体はインタラクティブではないため、フォーカスは不要
- 進捗に関連する操作（キャンセルボタンなど）にはフォーカスできるようにする
- 進捗完了時の通知は aria-live="polite" で伝える
ライブデモ
基本のプログレスバー
progress 要素を使った基本的な進捗表示です。
ステップ進捗
フォーム入力などの段階的な進行を示すステップバーです。
カスタムスタイル
色やサイズを変えたバリエーションと、ラベル付き表示です。
よくある間違い
ラベルなしで進捗バーだけ表示する
何の進捗か分からず、支援技術でも意味が伝わりません。
div で自作して role を設定しない
progress 要素を使えば自動的に適切な ARIA が設定されます。
色だけで進捗度を伝える
パーセント表示やテキストでも現在の進捗を示す必要があります。