Can I Create Accessible CSS Toggle Buttons?

CSS toggles are an incredibly common UI component, but most people just use standard checkboxes since they assume toggles are too difficult to create. In this video I will be attempting to create an accessible CSS toggle live for the first time.

📚 Materials/References:

🌎 Find Me Here:

⏱️ Timestamps:

00:00 - Introduction
00:36 - HTML
01:30 - Hide Input CSS
04:07 - Toggle Switch CSS
20:26 - Disabled CSS

#CSSToggle #WDS #CSS

[aayushsingh]

It was nice to see an expert web developer struggling like we do. These small components look simple but they are super hard to make right. And I could relate to the moment when you removed the animation.

[luispato]

I really love your JS videos!!! 😃
I also had to implement an accessible toggle component a couple of days ago, so here are a couple of tips / ideas:
- Don't use the label to create the switch UI. It would be nicer to decouple the input and the label. To do that you can add css "appearance: none" to the input, and then you can style it like you would any other element (even use ::before and ::after on the input itself)
- If we really want to make it accessible, adding a 'role="switch"' to it would be a nice improvement.
- another accessibility tip is that users tabbing through the page don't really need to be able to focus both on the input and on the label (that is actually confusing). You can add an 'aria-hidden' attribute to the label and then add the aria-labelledby attribute to the input (pointing to the label) so it still gets the correct description on assistive technologies
- If you use the input instead of the label, you will get automatically the correct "on" / "off" states for assistive technology users
- it would be nice to add those transitions only for users that don't have the "prefers-reduced-motion" turned on

Sorry if this feels like i am criticizing your video. that isn't my intention.
I did a lot of research on this topic and i am just happy to share what i have learned and to make the web a little bit more accessible.
People like you have a lot of viewers and can reach a lot of webdevelopers, so if you can get them interested in accessibility i think it is GREAT!
Thanks
:)

[CirTap]

nice one!
Use an offset of `-101vw` to move the checkbox off the screen - *any* screen (even one that's 10000px wide) and there's no need to bother for the top value.
For better a11y add `role="switch"` instead of class .toggle and use its attribute selector: you now only get a fancy toggle if it's also accessible :) -- the two birds, one stone thing.
For the :disabled state I'd add `pointer-events:none` and `cursor.default` to the label, that makes the whole pack unclickable and finaly: to dim the :disabled colours you can also try filter: grayscale(1) and/or saturate(0), depends on the actual colours.

[nemethricsi]

Great vid Kyle! One more subtle thing I like to do at disabled state is:

cursor: not-allowed

[aprilwarren]

It's really nice seeing you keep accessibility in mind, so many YouTube tutorials (and post secondary institutions) neglect accessibility entirely, which is both a shame, and a now crime here in Canada. Great work!

[vineethtrv]

I am surprised to see this. I feel really honoured that you have used my Codepen as reference. More than happy. Thank you

[jasonji]

Hey man, great content. Learned a lot from it.
4:50 The reason it didn't work is because you didn't set the `display` property on the pseudo element.
Elements by default has a `display` of `inline`, and setting `width` on inline elements has no effects. The width of inline elements will always fit its content (empty string in your case, hence width of 0).
Your giving its wrapper element a `display: flex` works because children of flex-ed parent will behave like block elements no matter what is set on them.

Add `display: inline-block` to the pseudo element is best for your case.

[jjfattz]

I would also add "user-select: none;" to the labels so that the text doesn't highlight when toggling. Very nice tutorial.

[cwirus]

Great tutorial. The only remark i have is that whenever a problem arose your reaction basically was: ok, welp, let's move on. I'm well aware that those small issues are sometimes really hard to debug, but things like that happen all the time and you, as a tutor, should teach how to deal with them (like you mentioned at the begining of this video).

[Rocadamis]

I'm sure you see now that at 19:42 you didn't replace the "forward" direction, which is why it wasn't fading.

[MrGarysjwallace]

I agree, it’s nice to see Trav go through what we go through with CSS. Backend is cool ( functions/classes: using Java or Python) for data, but the front-end is what the user sees. -without the frontEnd, there’s no API happening.

[leo_leo]

I think it's the best practice to create a toggle checkbox that i've ever seen, thanks a lot

[devwithbrian]

Thanks Kyle. Always appreciate the way you deconstruct problem solving

[ThijmenCodes]

This video definitely didn’t feel like 24 minutes! Well spoken, good pace - thanks!

[HorizonHuntxr]

Wouldn't "left: -100vw" and "top: -100vh" be a better way to ensure that the checkbox is never on the page? That way no matter what the viewport size becomes it'll never appear on screen

[martoten]

Good one! I'm guessing the problem with transition that was somehow weird was that the only moment the content changed was at 100%, that means that from 0% to 99.99% of the keyframes the content was still an X and then at final keyframe it switched to a checkmark. I'm not sure, I haven't code for a while but hopefully it makes sense.
Cheers everyone!

[TheDicampos]

I love this video, its very nice to see an expert dealing with "normal" problems haha

[daanduvillier]

Thanx so much for this video! Just what I was looking for. Love the way you thoroughly explain things!

[simpingsyndrome]

use right: 0; to move the circle to far right, and we can still use display:none to interact w/the checkbox, love your tips 👍🏻👍🏻

[QuietWind]

There is something extremely satisfying about slider checkboxes.