Announce progress bar updates with a live region
A progress bar with correct aria-valuenow, aria-valuemin and aria-valuemax is doing its job and still says nothing while it moves. The reason is simple and it is the whole point of this technique. The progressbar role is not a live region, so a screen reader has no cause to announce the values as they change. ARIA25 adds a polite live region beside the bar and writes short status text into it as the work progresses, and W3C lists that as sufficient for 4.1.3 Status Messages. Two constraints shape the implementation. The update must not move focus, because anything that takes focus is not a status message at all under this rule. And the messages should come at intervals rather than on every tick, since a region updated 100 times is a region nobody can listen to.
How we find it in an audit
A progressbar element with no live region anywhere near it is an automated find. Whether the announcements are usable is a listening test. We start the upload with a screen reader running and check that something is said, that it is said a sensible number of times, and that completion is announced rather than left to silence.
How affected users experience it
A silent progress bar is indistinguishable from a frozen page. The person waits, hears nothing, and eventually presses the button again or reloads, which on an upload means starting over. A few spoken milestones, 25 percent, 75 percent, upload complete, turn the same wait into something a person can sit through.
Passes vs. fails
Passes
<progress value="70" max="100"></progress>
<div aria-live="polite" class="visually-hidden" id="up-status"></div>
<script>
upStatus.textContent = "Upload 75% complete";
</script>Fails
<progress value="70" max="100"></progress>
<!-- the value changes and nothing is announced -->Other ways to satisfy this rule
15 guides on this site are filed under 4.1.3 Status Messages. W3C lists this one as sufficient for that rule on its own. Implement it correctly, in a way your readers' software actually supports, and the rule is met.
- ARIA19sufficientAnnounce form errors with role=alert
- ARIA22sufficientAnnounce status messages with role=status
- ARIA23sufficientAnnounce chat and feed updates with role=log
- ARIA27sufficientAnnounce progress with the ariaNotify API
- G83sufficientTell users which required fields they missed
- G84sufficientExplain when input is not an allowed value
This guide is our interpretation of W3C technique ARIA25: Using an ARIA live region to convey the status of a progress bar. W3C publishes its techniques as guidance rather than as the standard, and says so on every one of them. The success criterion is what conformance is measured against, and a technique is one documented way to meet it.