プログレスバー
Progress bar
別名: プログレスインジケーター、進捗バー、進捗表示、Progress bar、Progress indicator
生態（さわってみる）
一言定義
処理の完了度合いを、確定した割合として横棒の塗りつぶしで示す進捗表示UI。
分類
使う場面
- アップロードやインストールなど、残量・進捗の割合をあらかじめ算出できる処理のとき
- あとどれくらいで終わるかを、ユーザーに具体的な数値で伝えたいとき
避ける場面
- 処理量が事前にわからず、割合そのものを算出できないとき（→スピナー）
- 読み込み後のレイアウトを先に見せて体感速度を上げたいとき（→スケルトンスクリーン）
近縁種との比較
プログレスバーとスピナーは同じ「処理中」を示すフィードバックUIだが、進捗の割合を算出できる確定的な処理（determinate）にはプログレスバー、算出できない不定長の処理（indeterminate）にはスピナーを使うという区別が、研究ノートの同義語表にある定番の使い分けである。処理の途中で割合が判明した場合は不定表示から確定表示へ切り替えることもある。スケルトンスクリーンは割合を示さない点でスピナーに近いが、読み込み後のレイアウトの形を先に予告する点でプログレスバー・スピナーいずれとも異なる役割を持つ。
実例リンク
アクセシビリティ
- role
- role="progressbar" に aria-valuenow / aria-valuemin / aria-valuemax を付ける。割合が算出できない不定進捗の場合はaria-valuenowを省略する（その状態が続くならスピナーへの切り替えを検討する）
- キーボード操作
- 通常は操作を伴わない表示専用要素で、Tabストップにはしない
- 補足
- 進捗の変化はaria-valuenowの更新自体で伝わるが、更新が頻繁すぎるとスクリーンリーダーの読み上げを妨げるため、要所（25%刻み等）でのみ通知する配慮も検討する