Progress Bar Accessibility in JavaScript

Progress Bar Accessibility in JavaScript

Making progress bars accessible ensures they work with screen readers and keyboard navigation.

ARIA Roles

<div
  class="progress-container"
  role="progressbar"
  aria-valuenow="50"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-label="File upload progress"
>
  <div class="progress-bar" id="bar"></div>
</div>
``
- `role="progressbar"`: tells screen readers this is a progress bar.
- `aria-valuenow`: current value (update via JavaScript).
- `aria-valuemin`: minimum value (0).
- `aria-valuemax`: maximum value (100).
- `aria-label`: description of what the progress represents.

### Updating ARIA Values

```js
function setProgress(percent) {
  percent = Math.max(0, Math.min(100, percent));
  bar.style.width = percent + "%";
  container.setAttribute("aria-valuenow", Math.round(percent));
}

Screen Reader Announcements

For important changes, use aria-live:

<div aria-live="polite" id="progressAnnounce" class="sr-only"></div>

function announceProgress(percent) {
  document.getElementById("progressAnnounce").textContent = `${Math.round(percent)}% complete`;
}
``
### Indeterminate Progress

For indeterminate progress (unknown total):

```html
<div role="progressbar" aria-label="Loading" aria-busy="true">
  <div class="progress-bar striped"></div>
</div>
``
`aria-busy="true"` tells screen readers the area is busy loading.

### Keyboard Accessibility

Progress bars are typically read-only (the user does not interact with them). But if the progress bar is part of an interactive component (like a slider), add `tabindex="0"` and keyboard handlers.

### The Takeaway

Accessible progress bar: role="progressbar", aria-valuenow (current), aria-valuemin (0), aria-valuemax (100), aria-label (description). Update aria-valuenow via JavaScript. Use aria-live for announcements. Use aria-busy for indeterminate. Progress bars are usually read-only.