test(a11y): Label is being announced twice for Radio and Checkbox elements

db-ui / mono

DB UX Design System Monorepo - Provides Design Tokens and components for Web UIs

https://db-ui.github.io/mono/review/main/

Apache License 2.0

34 stars 6 forks source link

test(a11y): Label is being announced twice for Radio and Checkbox elements #2037

Open mfranzke opened 5 months ago

mfranzke commented 5 months ago

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.

nmerget commented 2 months ago

@mfranzke how can we test this?

Based on the tree it should work

mfranzke commented 2 months ago

@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 commented 2 months ago

@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 …

bruno-sch commented 2 months ago

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