The answer
role='progressbar' (identifies it as a progress bar), aria-valuenow (current value), aria-valuemin (minimum, usually 0), aria-valuemax (maximum, usually 100), and aria-label (description of what is progressing).
Progress Bar Accessibility in JavaScript
What ARIA attributes does a progress bar need?
More FAQs in Progress Bar Accessibility in JavaScript
Add role='progressbar', aria-valuenow (current value), aria-valuemin='0', aria-valuemax='100', and aria-label (description). Update aria-valuenow via JavaScript when the progress changes. Use aria-live for screen reader announcements.
Use an aria-live='polite' region. Update its text content with the current percentage: element.textContent = '50% complete'. Screen readers announce the change without interrupting the user.
Use role='progressbar' with aria-busy='true' and aria-label. Do not set aria-valuenow (since the value is unknown). The aria-busy attribute tells screen readers that the area is loading.
Still have questions?
Browse all our FAQs or reach out to our support team
Want to upskill yourself?
Your learning library
Small steps. Big possibilities.
Find your next course. Build something great.