How can I make a progress bar’s value and label meaningful?

Name the task, not just the fact that something is happening. “Uploading report” or “Preparing your export” gives more context than “Loading.” Keep the label outside the progress bar’s own contents: for a native <progress> element, associate a visible <label>; for a custom role="progressbar", provide a name using aria-labelledby or aria-label. MDN recommends native <progress> when it fits, and notes that a progress bar’s descendants are presentational, so nested text should not be relied on as its semantic name. [S1]

For example, assuming an upload whose total size is known, the markup might look like this:

<label for="report-progress">Uploading report</label>
<progress id="report-progress" value="30" max="100">30%</progress>

Treat the values here as illustrative. Match the range and value to the actual progress your application can measure.

Show a numeric value only when the application knows the current progress and what the range means. For a determinate custom progress bar, set and update aria-valuenow within its minimum and maximum; the default range is 0–100 if you do not define another range. If the amount completed is unknown, omit aria-valuenow rather than displaying a made-up percentage. [S1][S2]

If the value is meaningful as a percentage, that is what assistive technology will announce for an ARIA progress bar. If it is numeric but a percentage would be misleading, aria-valuetext can provide a human-readable description instead. [S2] For example, “Step 2 of 5” may communicate a stage-based process better than an invented percentage; use wording that accurately reflects the task.

When progress is measurable, update the exposed current value as the underlying work advances; keep the name tied to the same task. Do not make the number jump ahead of the actual work merely to look active. When progress is not measurable, keep it indeterminate and do not attach a guessed current value. [S1][S2]

Handle completion separately. For example, once an upload has actually finished, remove or replace the in-progress indicator and show a distinct status such as “Report uploaded.” This keeps “still working” and “finished” from being represented by the same value. The cited ARIA reference explains value semantics but does not prescribe how an application should announce a separate completion message, so choose and test a completion pattern appropriate to your interface. [S2]

Use this review checklist:

1. Name: Does the label identify the task, not merely say “Loading”?
2. Association: Is the name programmatically associated with the indicator? Prefer native <progress> when suitable; otherwise name the custom progress bar.
3. Value: Is progress genuinely measurable? If yes, expose and update a value within the chosen range; if no, omit aria-valuenow.
4. Meaning: Would a percentage describe the progress accurately? If not, consider clear alternative value text rather than a misleading percentage.
5. Completion: Is the finished state communicated separately, only after the work is complete?
6. Check the result: Review the indicator as it starts, changes, and finishes, and confirm that its label and displayed value agree with what the application is doing.

This guidance covers naming and value semantics; it does not establish a single required design for completion announcements.