mono
mono copied to clipboard
db-ui
test(a11y): Label is being announced twice for Radio and Checkbox elements
Which generators are impacted?
- [X] All
- [ ] HTML
- [ ] React
- [ ] Angular
- [ ] Vue
- [ ] Web components
- [ ] Power Apps
Reproduction case
- Open https://db-ui.github.io/mono/review/main/components/radio?page=tonality or https://db-ui.github.io/mono/review/main/components/radio?page=tonality
- The label would get announced twice by the screenreader, one as the label for the
input-element and then again afterwards
Expected Behaviour
The label would only get announced once as the label for the input-element.
Screenshots
No response
Browser version
None
Add any other context about the problem here.
WCAG 3.3.2 Labels or Instructions
We maybe would need to move the input out of the label-element for this to get solved.
@mfranzke how can we test this?
Based on the tree it should work
I know, that's the feedback I got by a screenreader user (I sadly don't remember whether he was using NVDA or JAWS screenreader, but I could ask, and even also verify whether it appears with VoiceOver as well).
@mfranzke how can we test this? Based on the tree it should work
I know, that's the feedback I got by a screenreader user (I sadly don't remember whether he was using NVDA or JAWS screenreader, but I could ask, and even also verify whether it appears with VoiceOver as well).
Oh shooot, VoiceOver wouldn't be of any help for you …
Testing with the screen reader NVDA (2023.3.3 latest) via remote VM has shown that this error is only reproducible in Firefox (not in Edge or Chrome).
The label is apparently only read out twice when the entire page content is displayed. When using the radio buttons or checkboxes directly, the label is only read out once.
This is probably a bug on the part of NVDA. The error also occurs with third-party implementations. A few similar issues in NVDA's Github confirm this suspicion: https://github.com/nvaccess/nvda/labels/bug%2Fdouble-speaking
Solutions:
Removing the input element from the nesting, as suggested, and placing it directly after the label element does NOT solve the problem.
An implementation with the aria attributes aria-hidden, aria-label or aria-labelledby fixes the error. This would require minor modifications to the components.
repo with evaluation results: https://github.com/db-ui/evaluations/pull/6
Based on our tests for the most common combination we are able to test:
Windows + NVDA this shouldn't be the case anymore: https://github.com/db-ui/mono/blob/main/showcases/screen-reader/snapshots/windows/chromium/DBRadio-should-label-duplicated-arrows-.txt