<progress>要素
Technical Summary
progress要素は、タスクの完了進捗を表します。完了量と最大量が分かる確定状態、または進捗はあるが残量が分からない不定状態を持ちます。
value属性があれば確定状態、なければ不定状態です。progressはタスク完了を表す要素であり、ディスク使用率などの測定値にはmeter、計算結果にはoutputを使います。
Definition / Categories
| 項目 | 定義 |
|---|---|
| 意味 | タスクの完了進捗 |
| Categories | Flow content、Phrasing content、Labelable、Palpable |
| Context | Phrasing contentが期待される場所 |
| Content model | Phrasing content。ただし子孫にprogress要素を置かない |
| Tag omission | 開始タグ・終了タグとも省略不可 |
| Content attributes | グローバル属性、value、max |
| DOM interface | HTMLProgressElement |
確定状態と不定状態
確定状態では、現在値と最大値から完了割合を計算できます。不定状態では、処理が進行中であることは分かるものの、完了までにどれだけ残っているかは分かりません。
<label for="determinate-progress">アップロード</label>
<progress id="determinate-progress" max="100" value="65">65%</progress>
<label for="indeterminate-progress">サーバーの応答を待機中</label>
<progress id="indeterminate-progress">処理中</progress>value="0"は確定状態の現在値0です。value属性を省略した状態とは異なります。
value・maxの解決
max属性はタスク全体の量を表します。指定がない場合の最大値は1です。値の単位は仕様で固定されていないため、アプリケーション内で一貫した単位を選びます。
maxは有効な浮動小数点数で、0より大きい必要があります。無効または0以下の場合は最大値1として扱われます。valueがある場合、現在値は有効な浮動小数点数として解釈されます。無効な値や0以下の値は現在値0として扱われます。- 現在値が最大値を超える場合、進捗の現在値は最大値に制限されます。
valueがない場合は不定状態で、positionは-1を返します。
progressにはmin属性はありません。常に下限は0であり、範囲内の測定値に下限・上限・低い値・高い値の意味を持たせるmeterとは処理モデルが異なります。
フォールバックテキストとラベル
progressの子孫テキストは、古いユーザーエージェント向けに現在値や最大値を伝えるフォールバックとして記述できます。ただし、その文字列だけを要素の名前として扱うのではなく、何の進捗かをlabelや適切なARIA labelingで明示します。
<label for="file-progress">レポートのアップロード進捗</label>
<progress id="file-progress" max="100" value="70">70%</progress>ページの一部を読み込んでいる場合は、進捗表示をaria-describedbyで説明対象の領域と関係付け、更新中の領域にaria-busyを使う設計も別途検討します。要素の意味、ブラウザーのAccessibility Tree、支援技術の通知は同一視しません。
progressの値をAccessibility APIへ公開することと、その変化を画面読み上げに通知することは別です。進捗バーの値を変えるだけでは、読み上げがその変化を自動で知らせるとは限りません。W3CのARIA25は、別の状態テキストをaria-live="polite"付きで更新する方法を例として示しています。これは達成方法の一例で、唯一の方法や必須の実装ではありません。
DOM Interface
| API | 意味 | 境界 |
|---|---|---|
value | 現在の進捗値 | 不定状態ではgetterが0を返し、setterで確定状態へ変化する場合がある |
max | 最大値。既定値は1 | 0以下や不正な値は既定の最大値として解決される |
position | 確定状態では現在値 / 最大値。不定状態では-1 | 進捗の割合を読むためのreadonly surface |
labels | 関連するlabelのNodeList | labelable要素としての名前付けを確認する入口 |
Fact / Evidence（主張 / 根拠）
仕様上の進捗モデル、属性の解決、content model、DOM API、アクセシビリティマッピングを、主張・条件・根拠位置に分けて記録します。ブラウザーの実測は下のImplementation Evidenceに分離します。
| 種別 | Fact / 主張 | 条件・範囲 | 状態 | 根拠 |
|---|---|---|---|---|
| SPEC | progressはタスクの完了進捗を表します。 | 確定状態では0から最大値までの完了量、不定状態では残量不明の進行中タスク。 | 確認済み | HTML Standard: the progress element |
| SPEC | value属性があるかどうかで、確定状態と不定状態が区別されます。 | valueなしは不定状態、valueありは現在値と最大値を持つ確定状態。 | 確認済み | HTML Standard: determinate and indeterminate progress |
| SPEC | maxの既定値は1で、valueは0以上かつ最大値以下の現在値として解決されます。 | 無効な浮動小数点値、0以下のmax、最大値を超えるvalueの解決。 | 確認済み | HTML Standard: value and max processing |
| SPEC | progressはFlow、Phrasing、Labelable、Palpable contentに属します。 | Phrasing contentが期待される場所で使用し、子孫にprogressを置かない。 | 確認済み | HTML Standard: categories and content model |
| SPEC | HTMLProgressElementはvalue、max、readonlyのposition、labelsを公開します。 | 不定状態のposition、IDL属性とcontent attributeの反映を含むDOM API。 | 確認済み | HTML Standard: HTMLProgressElement |
| AAM | progressはprogressbar roleに対応し、確定状態では最大値・最小値0・現在値をアクセシビリティAPIへ反映します。 | HTML-AAMのelement role mapping。実際のブラウザー・platform API・支援技術の結果は別途観測する。 | 仕様確認済み | HTML-AAM: progress |
Evidence
- HTML Standard: The progress element — meaning、categories、attributes、確定・不定状態、value/max処理、DOM interface
- HTML Accessibility API Mappings: progress — progressbar role、確定状態のvalue properties、label mapping
- W3C WCAG Technique ARIA25 — 進捗バーの値の公開と、状態テキストによる読み上げ通知の違い。達成方法の一例であり、必須の実装ではない
- Web Platform Tests: HTML forms — progress elementの仕様テストを特定する入口
Implementation Evidence
仕様上の主張とは別に、ブラウザー実装、WPT、アクセシビリティツリーの観測を記録します。progress-v1 fixtureと選定したWPTは、Windows上のChrome 1環境で実行しました。Windows UI Automation、画面読み上げの実測、他ブラウザー、選定外のWPTは未確認です。
測定fixture: progress-v1では、確定・不定状態、value/maxの境界値・不正値、position、labels、fallback text、ブラウザーのAccessibility Treeを確認します。進捗値だけを変える操作と、別のaria-live状態テキストも変える操作を分けています。読み上げ通知は支援技術での実測が必要です。
| 種別 | 再現確認の範囲 | 記録する条件 | 状態 |
|---|---|---|---|
| IMPL | 確定・不定状態、value/maxの境界、属性・IDL反映、動的更新時のvalue、position、labels、fallback text | 2026-10-03 / Chrome 154.0.0.0 / Windows 11 Pro build 26300 / DPR 1.25 / viewport 1280 × 720。loopbackのbuild-config/yugien/research-fixtures/progress-v1.htmlで、value 40・max 100・position 0.4、不定状態のvalue 0・max 1・position -1、value 150の上限補正 100、不正valueの 0、max省略時の 1を確認。labelsとfallback textも取得。Yugien ENページではスライダーを40から41へ動かし、表示文とAX treeの進捗値を確認。fixtureの2つの比較ボタンによる更新後の読み上げは未実測 |
部分観測（Chrome 154 / 1環境） |
| WPT | progress element、value/max parsing、indeterminate、DOM APIに対応するテスト | 2026-10-03 / Chrome 154.0.0.0 / Windows 11 Pro build 26300 / wpt.live。progress.html 11/11、progress-2.html 4/4、progress-max-setting.html 1/1、serialization-regression-test.html 1/1 pass（合計17/17）。WPT配信revisionは未固定。選定外のテストと他ブラウザーは未実行実測時のテスト版は未記録です。リンク先の内容は変わることがあり、当時と同じテストで再確認できるとは限りません。 |
部分実行（選定4件 17/17 pass） |
| AAM | progressbar role、labelによるaccessible name、確定状態のmin/max/now、不定状態の公開、progress値だけの更新と別のaria-live状態テキストも更新した場合の読み上げ | 2026-10-03 / Chrome 154.0.0.0 / Windows 11 Pro build 26300。ブラウザーAX treeは名前付きprogress indicatorと確定値を公開し、不定状態では値を示さなかった。fixture上のaria-live状態文は表示されたが、値だけの更新と状態文更新の読み上げ差は未実測。Windows UI AutomationとNarrator / NVDAの読み上げ確認は、Windows自動操作ツールが現在のブラウザーで動作せず未実行。NVDAはインストール済みだが今回起動していない。他ブラウザーも未実行 |
部分観測（Browser AX treeのみ） |
単一環境でのブラウザー観測を、すべてのブラウザー・platform API・支援技術に共通する結果として登録しません。
Coverage / Open Issues
- 確認済み意味、Categories、Context、Content model、tag omission、content attributes
- 確認済み確定・不定状態、
value・maxの仕様上の解決、meter・outputとの意味の境界 - 確認済み
HTMLProgressElementの主要APIとHTML-AAMのprogressbar mappingの入口 - 未完了Chrome、Firefox、Safariでの属性・IDL・表示・確定/不定切替の実装比較
- 未完了WPTの個別テスト実行結果、境界値・不正値・動的変更のブラウザー差
- 未完了HTML-AAMの全mapping、platform API、進捗値だけを変えた場合と
aria-liveの状態テキストも変えた場合の読み上げ、動的更新とaria-busy/aria-describedbyの相互作用
このページは初期Coverageです。仕様上の入口と根拠を整理したものであり、すべてのブラウザー、platform API、支援技術で同じ結果になることや、progress要素全体の検証完了を主張しません。
Related surface
初心者向けの進捗表示、確定・不定状態、meterやoutputとの違いはYugienのprogress要素ページを参照してください。範囲内の測定値はmeter要素、ラベルとの関係はlabel要素、計算結果との違いはoutput要素でも確認できます。