Checkbox has redundant aria role and property

[Magsu]

Provide a general summary of the issue here

Due to redundant aria-checked, when using a screen reader, checbox’s status (checked/not checked) is read twice. This might confuse screen reader users. The checkbox also contains a duplicate role, which is redundant and might confuse some screen reader software. The semantic HTML input element does already have the correct role and status.

VoiceOver (on mac and iOS) and TalkBack (on Android) do ignore the duplicate status, but NVDA, which is the most commonly used screen reader on PC does not.

🤔 Expected Behavior?

The checkbox status is read once.

😯 Current Behavior

The checkbox’s status is read twice when focusing on the element using a screen reader.

💁 Possible Solution

Remove redundant duplicate role and state from the element.

Move required to the correct elements. The required is not interpreted by all screen readers, as it is not part of the active elements.

The input element does semantically already have everything built in for a screen reader to interpret it correctly.

🖥️ Steps to Reproduce

1. Open a page with a checkbox element (e.g. [Checkbox Group Required](Open https://storybook.sanomalearning.design/?path=/story/form-checkbox-group--required)
2. Start a screen reader (NVDA for Windows, VoiceOver will not display this problem correctly due to its differing interpretation method)
3. Focus the checkbox element (for NVDA use tab)

What browsers are you seeing the problem on? (only for bugs in code)

Chrome

If other, please specify.

No response

What operating system are you using?

Windows 10

👤 Your name

Valtteri Järvinen

🧢 Your product/team

External

🎨 Your Theme(s)

Sanoma Learning

Tasks

Preview Give feedback

1. only add type=checkbox, and remove duplicate roles from checkbox, only add them in input
2. make sure the checkbox group/form intergration is ok