Progress bars must be labeled for accessibility
Bug #2044853 reported by
Stephanie Leary
This bug affects 1 person
| Affects | Status | Importance | Assigned to | Milestone | |
|---|---|---|---|---|---|
| Evergreen |
New
|
Undecided
|
Unassigned | ||
Bug Description
Like form inputs, the <progress> element requires a <label>, aria-label attribute, or aria-labelledby that refers to the ID of another element containing a relevant label for whatever is in progress.
The eg-progress and eg-progress-inline components (both in app/share/dialog) do not have labels. They do show a text version of the percentage, but this doesn't provide context and isn't programmatically associated with the <progress> element.
For eg-progress, we can add an ID to the modal header and provide that to an aria-labelledby attribute. For eg-progress-inline, the aria-label attribute is probably the most straightforward solution, but we will have to supply the text for every instance of the component.
| Changed in evergreen: | |
| assignee: | nobody → Stephanie Leary (stephanieleary) |
Revision history for this message
| Stephanie Leary (stephanieleary) wrote | #1 |
| Changed in evergreen: | |
| assignee: | Stephanie Leary (stephanieleary) → nobody |
To post a comment you must log in.
I've started a collab branch here: https:/
The top three commits:
* adds ariaLabel input to the progress components
* adds gridLabel to the grid component, which will be passed to the grid loader progress bar (and will be used as the table <caption> in the future table-based grid)
* supplies the ariaLabel strings for all inline progress components
Still to do: specifying the gridLabel string for each grid.
Please check the ariaLabel strings I've added and see if they make sense in context!