[progress][meter] accessibility: NVDA and JAWS don't announce the programmatic label
- Dominant language
- TypeScript
- Stars
- 10.9k
- Forks
- 543
- Avg merge
- 2d 1h
- Merged PRs (30d)
- 114
Description
# Bug report
## Current behavior
Unfortunately, screen reader support for the progress and meter roles is still quite inconsistent.
During testing, both NVDA and JAWS announced "Progress bar #%" and did not announce the visible label that is referenced using `aria-labelledby`. This makes the progress bars lose all meaning because they are not labelled.
## Expected behavior
Progress bar programmatic (and visible) labels should be announced by screen readers.
Although I suspect this may be a problem with the screen readers themselves, the current experience will be very poor for people using a screen reader when they encounter this BaseUI component, particularly if, for example, several meter components are used on a page, each with distinct labels.
## Reproducible example
Steps to reproduce:
1. Navigate to the [Meter component demo](https://base-ui.com/react/components/meter)
2. Turn on either NVDA or JAWS on Windows
3. Use the Arrow keys to move through the component demo (reading mode)
4. Note the progress bar role and value is announced without announcing the visible label of "Storage used"
5. Test again with VoiceOver on mac and note the difference. The visible label is announced as expected along with the role and value.
## Base UI version
v1.2.0
## Which browser are you using?
Chrome
## Which OS are you using?
Windows
## Which assistive tech are you using (if applicable)?
NVDA and JAWS
## Additional context
Making the element with `role="meter"` focusable using `tabindex="0"` would fix the announcement and improve this, even though this is not meant to be a focusable element. In this case, this would be a valid improvement, as the minor trade-off of an extra tab stop would fix a serious issue for two widely used screen readers.
Contributor guide
Research direction
Start with the Meter component demo and reproduce the announcement in Chrome on Windows using NVDA or JAWS, then compare it with VoiceOver on macOS. Done means the progress or meter role announces its visible programmatic label, such as “Storage used,” along with the role and value.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100