WIP
Edit me
Keep in mind
aria-valuemin should always be equal to minaria-valuemax should always be equal to maxaria-valuenow should always be equal to value- values that are higher than the allowed max value could result in unwanted behavior
Advised markup
Emmet
progress[role="progressbar"][aria-valuenow][value]
HTML
<progress role='progressbar' value="" aria-valuenow="">
</progress>
Screen reader results
Basic
<progress max='100' value='40'></progress>
| Screen reader |
ChromeVox 53
|
NVDA 2017.4
|
| Browser |
Chrome
63
|
Chrome
63
|
Edge
16
|
Firefox
57
|
| Spoken output |
| progress bar, 40 | progress bar, 40 | progress bar, 40% |
| Skipped |
true | true | false | false |
Indeterminate
<progress tabindex=0></progress>
| Screen reader |
ChromeVox 53
|
NVDA 2017.4
|
| Browser |
Chrome
62
|
Chrome
63
|
Edge
16
|
Firefox
57
|
| Spoken output |
| progress bar | progress bar 0 | progress bar half checked |
| Skipped |
true | true | false | true |
Note: Decide if skipping the element is preferred
Overflow
<progress max='30' value='40'></progress>
| Screen reader |
ChromeVox 53
|
NVDA 2017.4
|
| Browser |
Chrome
63
|
Chrome
63
|
Edge
16
|
Firefox
57
|
| Spoken output |
| progress bar, 30 | progress bar 100 | progress bar, 100% |
| Skipped |
true | true | false | false |
Basic with aria fallback
<progress role='progressbar' max='100' value='40' aria-valueNow='40'></progress>
| Screen reader |
ChromeVox 53
|
NVDA 2017.4
|
| Browser |
Chrome
63
|
Chrome
63
|
Edge
16
|
Firefox
57
|
| Spoken output |
Progress bar 40 | progress bar, 40 | progress bar 40 | progress bar, 40 |
| Skipped |
false | false | false | false |
Overflow with aria fallback
<progress role='progressbar' max='30' value='40' aria-valueNow='40' aria-valueMax='30'></progress>
| Screen reader |
ChromeVox 53
|
NVDA 2017.4
|
| Browser |
Chrome
63
|
Chrome
63
|
Edge
16
|
Firefox
57
|
| Spoken output |
Progress bar 40 Max 30 | progress bar, 40 | progress bar 133 | progress bar, 40 |
| Skipped |
false | false | false | false |
Indeterminate with aria fallback
<progress role='progressbar'></progress>
| Screen reader |
ChromeVox 53
|
NVDA 2017.4
|
| Browser |
Chrome
63
|
Chrome
63
|
Edge
16
|
Firefox
57
|
| Spoken output |
Progress bar | progress bar | progress bar 0 | progress bar half checked |
| Skipped |
true | true | false | true |
Browser support
Can I Use progress? Data on support for the progress feature across the major browsers from caniuse.com.
Specifications