I'm currently exploring open-source development, creating multiple projects which I hope one day will change the world. Join me in making our planet a better place through technology!
Even better is to use aria-role="switch" — not only does it tell screen readers that the checkbox is more specifically one that resembles a switch*, but it also gives you an extra way to style checkboxes without having to use a seperate class! We used it for Adapt UI's switch element, as shown at the bottom of our demo.
Additionally, it's possible to style the input element itself instead of having to rely on an adjacent element to render the design of the switch — appearance: none; always comes in handy!
*Not to mention that the difference between a switch and a checkbox in terms of UX standards is that when a switch is changed, its state is immediately applied, but when a checkbox is changed, it usually requires confirmation using a seperate button.
If I understand this correctly, it would require JS to change the aria-checked value (which is required when using role="switch" and btw that seems to be missing in the Adapt UI Demo you linked to) and that was a constraint in my example.
I'm currently exploring open-source development, creating multiple projects which I hope one day will change the world. Join me in making our planet a better place through technology!
Good point — that's definitely a thing to add to our library! Having tested our demo in a few screen readers, they seem to still be okay with using checkboxes' checked value with the role, but it's a good idea to add the extra attribute (with JS or course) for assistive technologies that aren't as good at detecting that. Thanks for the advice!
I would assume from the docs that the aria-checked attribute is used mainly so screen readers can tell the user when a checkbox changes state on its own (without interaction), which would make sense!
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Even better is to use
aria-role="switch"— not only does it tell screen readers that the checkbox is more specifically one that resembles a switch*, but it also gives you an extra way to style checkboxes without having to use a seperate class! We used it for Adapt UI's switch element, as shown at the bottom of our demo.Additionally, it's possible to style the
inputelement itself instead of having to rely on an adjacent element to render the design of the switch —appearance: none;always comes in handy!*Not to mention that the difference between a switch and a checkbox in terms of UX standards is that when a switch is changed, its state is immediately applied, but when a checkbox is changed, it usually requires confirmation using a seperate button.
If I understand this correctly, it would require JS to change the
aria-checkedvalue (which is required when usingrole="switch"and btw that seems to be missing in the Adapt UI Demo you linked to) and that was a constraint in my example.Good point — that's definitely a thing to add to our library! Having tested our demo in a few screen readers, they seem to still be okay with using checkboxes'
checkedvalue with the role, but it's a good idea to add the extra attribute (with JS or course) for assistive technologies that aren't as good at detecting that. Thanks for the advice!I would assume from the docs that the
aria-checkedattribute is used mainly so screen readers can tell the user when a checkbox changes state on its own (without interaction), which would make sense!