What ARIA attributes does a progress bar need?
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).
Verify This Answer
Cross-check this information using these trusted sources:
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