Screen reader announces "off on" in label
weboverhauls opened this issue · comments
For the "Light switch" (checkbox version), screen readers read the text "Off On" as part of the label which is not accurate. It should not read "Off On" as part of the label. Tested in VoiceOver and ChromeVox.
Suggestion to fix: add aria-hidden="true" to the container of the "Off On" text.
It's possible that the text will be something else, like Day/Night. So if we hide the text from the sr, it will be left with something like time of day UNCHECKED.
It's true that more specific labels should use switch-toggle, but people will still use the light switch when only having two options. That's why I think it's a better idea to read the text.
Maybe we can add this to the documentation site, as a Tip under the markup for the light switch markup?
Ah, good point. Sounds like a flaw with the fundamentals. Yes, agree that instruction should be added to the documentation.
PS:
Here's another accessible toggle switch (from me a while back): http://bit.ly/1RAXdd5
I added a Tips section on the homepage, with the aria-hidden tip.
Thanks! 🍺
Your toggle switch looks good. That's just what I did on switch-toggle.