Progress bars: what to announce and when

Progress bars are a balancing act. Announce too little, and screen reader users have no idea if anything is happening. Announce too much, and they get overwhelmed with constant percentage updates. Getting it right means understanding what to communicate and when.

Two types of progress bars

Determinate progress bars show measurable progress from start to finish: file uploads, multi-step forms, and installation processes. You know it will reach 100%.

Indeterminate progress bars show that something is happening, but you can’t predict when it will finish: searching, processing, or waiting for a server response.

For determinate progress: Use role="progressbar" with aria-valuemin, aria-valuemax, and aria-valuenow to communicate progress numerically.

<div 
  role="progressbar" 
  aria-valuemin="0" 
  aria-valuemax="100" 
  aria-valuenow="47" 
  aria-label="File upload progress"
>
  <div class="progress-bar" style="width: 47%"></div>
</div>

Add aria-valuetext when the numeric value isn’t meaningful on its own, like “Step 2 of 5” instead of just “40”.

For indeterminate progress: Use role="progressbar" but omit aria-valuenow. The absence signals that progress can’t be measured.

<div role="progressbar" aria-label="Processing your request">
  <div class="spinner"></div>
</div>

What about the HTML progress element?

The HTML5 <progress> element works, but you still need to add max and value attributes for it to be useful. Without them, screen readers can’t track progress. You also need a label using aria-label or a visible <label> element.

<label for="upload">Uploading file</label>
<progress id="upload" max="100" value="47"></progress>

When to announce updates

Don’t announce every percentage change. Constant updates (like 25%, 26%, 27%…) overwhelm screen reader users. Let the progress bar update silently and announce only at meaningful milestones, or pair it with a live region that announces completion.

Here’s the bottom line: Progress bars need semantic markup to be understood by screen readers, but they also need restraint in the frequency of announcements. Nobody benefits from hearing every incremental update.