The <progress> Element
As defined in the HTML Living Standard, the <progress> element represents the completion progress of a task.
<label for="p">Progress:</label>
<progress id="p" max="100" value="75">75%</progress>
View HTML Living Standard: The progress element
Technical Requirements
- The
valueAttribute: Specifies how much of the task has been completed. It must be a valid floating-point number between 0 andmax. - The
maxAttribute: Specifies how much work the task requires in total. The default is 1.0. - Indeterminate State: If the
valueattribute is omitted, the progress bar is considered "indeterminate." This is used when you know a task is happening but don't know how long it will take.
WCAG Requirement: Name, Role, Value
Success Criterion 4.1.2 (Level A): For all user interface components, the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically determined.
A progress bar is an interactive status indicator. To ensure it is accessible, it must have a programmatically associated label (using <label for="..."> or aria-label). This tells screen reader users what the progress represents. Assistive technology will automatically announce the current value and percentage to the user as it updates.
Progress vs. Meter
Using the correct element is vital for semantic clarity and user expectation:
<progress>: For **dynamic** tasks that are currently underway (e.g., file downloads, installation progress).<meter>: For **static** scalar measurements within a known range (e.g., battery level, disk space, password strength).
A11y Tip: Fallback Text
Always include the text representation of the progress inside the tags (e.g., <progress>75%</progress>). This acts as a fallback for very old browsers and provides a semantic anchor for the value in the DOM.