Description
Provide a general summary of the issue here
The switch element is not interpreted correctly by some screen readers. For example, NVDA does not even recognize the element’s existence: It can be focused, but NVDA does not give any output. This is because the aria roles and properties have been set to the wrong element.
Note: This does not appear a problem for VoiceOver (Mac, iOS) or TalkBack (Android) due to them interpreting some information differently than PC screen readers (e.g. NVDA).
🤔 Expected Behavior?
When using a screen reader (e.g. NVDA) the elements label, role and state are announced correctly.
😯 Current Behavior
Some screen readers cannot interpret the element at all. It can be still toggled, but the screen reader provides no output for the user.
💁 Possible Solution
The aria properties and role are set to the wrong element (sl-switch):
Due to the shadow root delegating focus, the actual user focus is in the div with tabindex=”0”.
If I set role=”genetic” to the sl-switch (this should be the role it has initially, for this I’ve set it visibly, so I can get rid of the properties and roles that are set programmatically using elementInternals) and give the proper properties to the actually focused div, the element’s role and state are announced correctly.
Note: As div-tag does not support “checked” property, the checked property must be given as aria-checked=”true/false”. This an be set either in HTML or by using elementInternals.
Note2: This also means required and disabled statuses must be indicated using aria-disabled="true" and aria-required="true"
This, however, leaves us with one more problem: The element’s label is not announced at all. This is because the text is not connected to the switch element in any way.
We cannot use a label-tag, because it does not support giving a label to a div. Unless we’re doing some changes to the structure (this would also require changing CSS), we have a few options.
One way to connect is giving an id to the slot and connecting it to the button with aria-labelledby:
Another way is to give the label using aria-label:
Moving the actual text inside the correct focused element works too, but this does break the current styling:
🖥️ Steps to Reproduce
- Open a page with element (e.g. [Switch Basic](Open https://storybook.sanomalearning.design/?path=/story/form-switch--basic)
- Start a screen reader (not VoiceOver/TalkBack)
- Focus on the element and using the tab key
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
- [ ] Test with NVDA and improve
- [ ] Change documentation (if needed)
Metadata
Metadata
Assignees
Labels
Type
Projects
Status