ARIA progressbar elements have accessible names
Progress bars have labels so screen readers can describe their status.
Link copied!
On this page
Impact
About
When a progressbar element doesn't have an accessible name, screen readers announce it with a generic name, making it unusable for users who rely on screen readers. [Learn how to label progressbar elements](https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name).
Risks
Screen readers cannot tell users what a progress bar is tracking.
Why it's important
Ensures assistive technologies like screen readers can correctly interpret and announce page elements to users with disabilities.
User stories
As a screen reader user, I want ARIA attributes to be correctly implemented so that I can understand the purpose and state of interactive elements.
Code
Failing pattern:
<!-- Fail: progress bar with no accessible name -->
<div role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
Passing pattern:
<!-- Pass: aria-label names the progress bar -->
<div role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" aria-label="Upload progress">50%</div>
Error
ScanGov messaging when a site fails a standard:
Failed: ARIA progressbar elements have accessible names
Guidance
Indicators
Related
- [accesskey] values are unique
- [aria-*] attributes match their roles
- Uses ARIA roles only on compatible elements
- button, link, and menuitem elements have accessible names
- ARIA attributes are used as specified for the element's role
- Deprecated ARIA roles were not used
- Elements with role="dialog" or role="alertdialog" have accessible names
- [aria-hidden="true"] is not present on the document <body>
- [aria-hidden="true"] elements do not contain focusable descendents
- ARIA input fields have accessible names
- ARIA meter elements have accessible names
- Elements use only permitted ARIA attributes
- [role]s have all required [aria-*] attributes
- Elements with an ARIA [role] that require children to contain a specific [role] have all required children
- [role]s are contained by their required parent element
- [role] values are valid
- Elements with the role=text attribute do not have focusable descendents
- ARIA toggle fields have accessible names
- ARIA tooltip elements have accessible names
- ARIA treeitem elements have accessible names
- [aria-*] attributes have valid values
- [aria-*] attributes are valid and not misspelled
- Buttons have an accessible name
- The page contains a heading, skip link, or landmark region
- Background and foreground colors have a sufficient contrast ratio
- <dl>'s contain only properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements
- Definition list items are wrapped in <dl> elements
- Document has a <title> element
- ARIA IDs are unique
- No form fields have multiple labels
- <frame> or <iframe> elements have a title
- Heading elements appear in a sequentially-descending order
- <html> element has a [lang] attribute
- <html> element has a valid value for its [lang] attribute
- <html> element has an [xml:lang] attribute with the same base language as the [lang] attribute
- Image elements have [alt] attributes
- Image elements do not have [alt] attributes that are redundant text
- Input buttons have discernible text
- <input type="image"> elements have [alt] text
- Form elements have associated labels
- Links are distinguishable without relying on color
- Links have a discernible name
- Lists contain only <li> elements and script supporting elements (<script> and <template>)
- List items (<li>) are contained within <ul>, <ol> or <menu> parent elements
- The document does not use <meta http-equiv="refresh">
- [user-scalable="no"] is not used in the <meta name="viewport"> element and the [maximum-scale] attribute is not less than 5
- <object> elements have alternate text
- Select elements have associated label elements
- Skip links are focusable
- No element has a [tabindex] value greater than 0
- Tables have different content in the summary attribute and <caption>
- Touch targets have sufficient size and spacing
- Cells in a <table> element that use the [headers] attribute refer to table cells within the same table
- <th> elements and elements with [role="columnheader"/"rowheader"] have data cells they describe
- [lang] attributes have a valid value
- <video> elements contain a <track> element with [kind="captions"]
- All heading elements contain content
- Identical links have the same purpose
- Document has a main landmark
- Elements with visible text labels have matching accessible names
- Tables use <caption> instead of cells with the [colspan] attribute to indicate a caption
- <td> elements in a large <table> have one or more table headers
- Image aspect ratio
- Valid doctype
- Character encoding
- Accessibility grades on Project ScanGov
- ScanGov Accessibility
On this page