Up next in 10
Can I Create Accessible CSS Toggle Buttons_
114 views
Feb 7, 2024
Dive into the world of accessibility in web design with this tutorial - "Can I Create Accessible CSS Toggle Buttons?" In this video, you'll explore the importance of creating inclusive and accessible user interfaces, particularly focusing on CSS toggle buttons. The tutorial provides insights into best practices and techniques for ensuring that your toggle buttons are not only visually appealing but also meet accessibility standards. Whether you're a web designer committed to creating universally accessible websites or a developer seeking to enhance your knowledge of inclusive design, this guide offers a practical and informative walkthrough. Join this tutorial to discover the considerations and methods for creating accessible CSS toggle buttons, ensuring that your web projects are user-friendly for everyone. Elevate your web design skills by embracing accessibility principles and crafting interfaces that cater to a diverse audience.
View Video Transcript
0:00
In this video, I'm going to try to create some of these CSS slider toggles
0:03
and we're going to really heavily focus on accessibility and ease of use because those are the most important factors
0:09
Also, this is the very first time I'm attempting to create one of these, so you're going to be able to see my thought process
0:14
what I do when I encounter issues, and how I debug issues. Welcome back to WebDev Simplified
0:22
My name is Kyle, and my job is to simplify the web for you, so you can start building your dream project sooner
0:26
And in this video, we're going to be creating one of these slider toggles, and we're probably going to create one that looks most similar to this one in the top right corner
0:32
because I like this one the best. I think it's going to be a good example, but really any of these sliders will work just fine
0:38
Now, in order to get started creating this, we're going to create a little bit of HTML. And for this tutorial, I want to try to make it so that I minimize the extra HTML I need
0:45
Because normally, to create an input, you know, you just put input type is checkbox here
0:50
And you can also have a label, for example, and the label we're just going to say, let's say, checked
0:56
There you go. and this is like the minimum HTML you need. You also need to have like an ID that just says like check
1:02
and then we need to have a label which has check here for the four. So that way it ties our input and label together
1:07
But this is your normal standard HTML that you need for a checkbox input
1:11
When I save, come over here, you can see we have that checkbox going. So what I want to do is I want to try to see if I can create this using only this normal HTML
1:18
And all I want to do is just add a class that says like toggle
1:23
And that class is the only thing I need to add to my HTML to convert my checkbox from this type
1:27
a checkbox to a toggle checkbox like this one. So let's see if we can do that
1:31
Now the very first thing we need to do is we need to make it so that we can create a custom input instead of this standard input
1:36
So let's create a CSS style sheet. And let's make sure we link that in our HTML
1:42
Oops, link our style sheet. There we go. Styles.cass. And inside of here, all I want to do is I want to just make it so that our input is gone
1:52
So we'll say input where the type is equal to checkbox. If it has the class of toggle, then I want to make it disappear
2:02
And, you know, we could say like display none, but the problem with that is then the checkbox is gone
2:06
You can't interact with it. You can't actually check it and uncheck it. So instead, what we need to do is we need to take the opacity and we're going to set it to zero
2:12
Doing that, now we have our checkbox here, but it's invisible completely. To see what our checkbox looks like, what we can do is we can take our input, which has that type of checkbox
2:22
Oops, checkbox. We can check when it has the toggle class. and we can get the label that comes directly after it
2:29
But using this plus sign right here, it says get the element that's directly afterwards, and we're saying get the label
2:33
So here we can just change the color to red, and I want to do that whenever our checkbox is checked
2:39
There we go. So I can check and uncheck my checkbox, even though it's completely invisible
2:44
So that so far is pretty good. What I want to do, though, is I want to make this checkbox essentially have no size at all
2:50
So what we can do to do that is we can say, hey, position this, absolutely
2:56
Now what this is saying is, hey, our checkbox is now positioned absolutely, so it's essentially gone
3:00
It doesn't take up any space in the DOM, but it's still there. Like, I can still check and uncheck this checkbox
3:05
And if I inspect my page, and I pull this over here, you can see if I look in the elements tab and I hover over my input
3:10
you can see our checkbox is right here. And if I change the cursor to, for example, the pointer cursor, and I hover over it, you can
3:16
see my pointer changes to that pointer cursor whenever I'm inside of that checkbox
3:20
So what I want to do is even further remove our checkbox from the page. To do that, I'm just going to set the left to like negative
3:26
9,000 pixels. I'm going to do the same thing with the top. And what this does is essentially makes it so that my checkbox is no longer on the page
3:34
It's moved so far off the page that it is no longer there. I can still check and uncheck the box because clicking on the label, when you have
3:40
the four property set, it'll actually toggle your checkbox. So what we're essentially doing is we're making it so every time we click on our label
3:47
it's checking and unchecking our box. But if I go to inspect my elements here and I just go into the body and find that input
3:53
When I hover over it, you're going to see that nothing on my page corresponds with that input
3:57
because it's so far off the edge of my page, it's like it doesn't even exist. So this right here essentially hides our checkbox, but still makes it so we can interact with the
4:04
checkbox through the actual label. The next step is to make it so that we actually have our switch showing up on the screen
4:10
And to do that, I'm going to be using the label. So what I want to do is I want to essentially copy all this code for selecting our input
4:16
and I want to get the label that comes afterwards, and I want to use a combination of before and after elements to be able to style this
4:23
content on the left-hand side for a toggle switch. So our toggle switch, we're going to give
4:27
it a content, which is just an empty string, and that's because we just want it to show up
4:31
And we're going to give it a width here, and we're going to scale everything using EMs. So
4:35
for example, our width is going to be 2 EM. And our height, let's just give it 1 EM for now
4:40
And we'll give it a background color of red, just so we can see it. And of course, this isn't
4:47
working. So let's inspect our page and see why this is not showing up. So we have our label
4:51
and it should have a before element inside of it. It does. And our before element, when we hover it, it has a, the width or height are not being defined
4:59
properly because it looks like it has no width, but it does have a height. This width, which seems like 10 pixels, see if it shows up
5:06
It does not. Oh, I believe the reason for this is our label itself needs to be able to be not an inline element
5:13
So what we want to do is we want to change this to be a display of flex. There we go
5:17
Now we essentially have a element that is scaling off our font size. And the reason this is important is if we change the font size of our label to, for example, 20 pixels
5:25
you can see our box scales with that. Or if we change it to like 40 pixels, our box again is going to scale with that
5:31
You can see we have our box here that is scaling with that. Obviously, we just want to have that normal font size
5:36
But now we have a scaling checkbox, essentially, that's going to scale with the size of the text for our actual label
5:41
And as we toggle and untaggle this, it's going to be able to be clicking on this section here
5:45
this before section, and actually toggling our checkbox. As you can see about that color changing
5:49
That's really important. And the next thing that we need to do is to actually make this look like the thing we want it to look like
5:54
Background color of red, pretty ugly. Let try something like AAA Maybe we do even lighter than that We do like DDD There we go That a pretty light background because I kind of want to have like a light background color around it Of course we going to change our border radius here to let see 1 EM
6:10
There we go. That's going to give us those nice rounded corners. And we're also going to put a margin on the right hand side of 1 EM as well
6:17
Actually, we'll do 0.5 EM or maybe 0.25m. There we go. We just have a little bit of space between our toggle and our label over here
6:25
Also, I want to align our items in the center. and that should just align our text over here on the right-hand side in the center of this
6:31
you know, checkbox section on the left-hand side. Without this, you notice our checked text is way down here, but when we add that, it just moves it up slightly
6:38
It's a very minor change, but if we change our height here to like 2am, you can now see that our text is in the center, while without this, our text is showing up at the top
6:46
So a very minor change, but I think it looks a little bit better that way. And the next thing we need to do is actually add in the section for our toggle that's going to move from the left to the right
6:54
So let's copy all of this. and we're going to just paste it down here
6:59
I want to use the after element of our label. And our after element, we want it to essentially have a width and a height of 1 EM
7:05
So it's going to be inside that section. And let's change the background color to red just so we can see what it looks like
7:10
And we can get rid of this margin. So now you can see we have this red circle on the right. But obviously, I want it to be all the way on the far left-hand side
7:16
So to do that, what we can do is we can take our label here. We can change the position to relative
7:22
And then I can come down to this after element, change the position to absolute. So now it's going to be positioned essentially on the far left side, and we can change the left here to be 0, and that's going to be the very left of our label
7:34
And of course, that's what we want, but we want it to be inset a little bit, because technically we want this to be more like 0.9 and 0.9 for the size, so it's a little bit smaller
7:43
And then we just want our left to be, for example, 0.1 EM. And as you can see, now that's inside of our section
7:48
Just like over here, we have it inside of our, you know, toggle section. I think that looks pretty good
7:53
And then when we have our checkbox checked, we just want to move this to the right-hand side
7:57
So by default, the background color, let's change it to like white, for example. Or maybe we'll change it to like, let's see, a little bit darker color
8:05
Let's see what they had over here. They had it set to just a gray color with a white background
8:09
I'm going to go with a white color over the gray background. I think that looks good enough, so yeah, we'll just keep it as white for now
8:14
That's fine. Actually, let's change it to red. I kind of like the idea of having red for the bad state and then green for the good state
8:20
So let's do like HSL 0, 100%, 50%. And let's just tweak around these values
8:27
till we get something that we like. So let's maybe make this like 70%
8:31
A little bit darker, we'll do like 80%. There we go. I think that looks pretty good
8:35
And we'll desaturate it a little bit like 30%, maybe 40%. Well, actually, let's lighten it a little bit
8:40
Let's like 80%. 60%. There we go. That looks like a pretty good color
8:45
And then we're going to change the background color of our entire thing to have essentially a very, very light color
8:49
we'll change this like 90. So we have this very light red with the darker red in the center
8:53
I think that looks pretty good. And we're going to add more accessibility features in just a little bit
8:57
But the nice thing about this is we can click this label right here, and you can see we're able to uncheck and check this
9:02
Now let's just make it so we can move this from the left to the right when we actually check it. What I want to do is just copy this, selector down
9:08
and I want to change it so that our toggle has that checked property. So when our toggle is checked on our after element for our label
9:15
we can get rid of a lot of this. All we really need to do is change our background color and our position
9:19
So our position is going to be 1.9 EM thanking, I believe. And our background color we want to change to green
9:24
So let's say like 200, I think is green, or that's it's 100. There we go, so let's click on this
9:30
Okay, you can see that that's moved over to the left, and instead of 1.9, we want this to just be 0.9, I believe
9:35
Actually, we want it to just be 1 maybe. There we go. That is exactly what we want
9:39
So now we've changed it to this green color when it's unchecked, it is this color. And this green is a little bit kind of bright
9:44
I'm going to desaturated a little bit. There I think it looks a little bit better
9:48
So now we've got it moving from left to right when we check. That looks really, really good
9:53
Let's see, what else we need to do? I think actually instead of making our left move, let's do our transform, translate
10:01
I'm going to translate the X by 100%. There we go. That's going to give us the same effect
10:08
Essentially, it's moving it by its entire width. And since our toggle is only essentially two times the width of our circle in the center
10:13
this is going to work just fine. Actually, it's not going to work just fine. We need to move it by 1.m
10:18
There we go. Actually, no, maybe I was right. I think I was right
10:22
100% is correct, yeah, because we want to move it by .9 em, yeah
10:26
That looks correct. Okay, perfect. So now the next step is to make it so that our toggle changes its background color as well
10:33
So that is going to be this before element. Let's just copy this down
10:37
When we have our checkbox checked, the before element, I want to change the background color
10:43
to use that same 100, and let's change us to 70. Let's see if that looks good
10:47
There we go. change it from red to green and I think this is a little bit too light for the green color so we'll
10:52
change it to like 80%. Maybe 85%. Actually, maybe 90 was fine. Yeah, that looks good enough. So now we have
11:00
our checkbox and it's moving from side to side and the color of our text, we don't need that to change
11:04
anymore so we can get rid of that. Now as you can see, this is working. I want to change our label
11:08
though so we have like that pointer cursor over top of it. So we could say cursor is pointer. That
11:13
when we hover it, you can kind of see we get the nice pointer cursor so we know we can toggle this
11:16
from left to right. That looks really good. The next step is to make it a little bit more accessible
11:21
Because right now if I click like tab, for example, I'm currently highlighting this, like I can click space to toggle it
11:26
but I don't know. Like it's not visually apparent that I'm highlighting this input. So I want to make it visually apparent when I focus on it
11:33
We can take this whole selector. Let's just do this. And I want to do a focus here
11:37
So when I'm focusing on the input button, what I want to do is I want to make it obvious that I'm focusing on it
11:43
I'm probably just going to add like a border maybe around it, or we'll do outline. So we'll say our outline is going to be a one pixel solid black for now, just to see if this kind of gives us what we want
11:52
So when we focus this, of course we're not getting that outline. And that's because we need our outline to be on the labels before element
12:01
There we go So now if I space over that there you can go We can see that we now have a black outline around this saying that I selected this and now I can toggle it from left to right And that because with tab I able to tab into that input
12:13
And right now my tab focus is on the input itself, that checkbox. Even though the checkbox is like miles off the page
12:18
I'm still able to tab onto it because it's in order based on HTML. And I'm then taking that focus state, and I'm saying
12:24
okay, now take my label and put that black outline around it. That looks really good
12:28
And honestly, I kind of just think that's going to be fine as is for our tab state. That's good enough
12:32
Now we want to work on animation states. So let's come in here. We want to animate essentially our background color and we want to animate this transform
12:40
So that should actually be really easy to do. If we just take our after element here and we just set a transition and we set our transition
12:47
to be, let's say 200 milliseconds, we want to do a transition for easing out
12:53
There we go. Now let's do the exact same transition on our before element as well
12:58
There we go. Let's see if that works. There you go. Now see that it's moving from right to left
13:03
We're also transitioning our outline, which I don't like. So I'm going to make our transition here only be the background color
13:10
And down here we're going to transition our background color. And we're going to have a separate transition, which is going to copy this
13:18
And that's going to be for our transform. So let's say transform
13:26
Now let's see if that worked. There we go. seems like it's working. Our outline is still doing some weird stuff though. It seems like
13:33
I think it's just because it's like losing and unlosing focus. Interesting. Maybe we
13:41
have to do focus within. Let me try that. So we'll say focus within. Now that's not
13:48
quite doing it. I wonder why our focus is like coming in and out. That's what it seems like to me
13:52
Because as you can see it's kind of like flashing. That means that our focus is not on our
13:57
checkbox anymore. Oh, it's probably because we're getting the focus on our label, and then our focus is going to our checkbox
14:03
I'm not sure if there's a good way to fix that. But honestly, that should be fine
14:07
I mean, it looks fine, especially when you zoom out to like a more normal zoom level
14:11
It's not nearly as noticeable. So I think that's fine. We're just like super mega zoomed in for the tutorial
14:16
So now the next thing that we need to do is actually handle the accessibility portions, because
14:20
if you're colorblind, this red versus green is kind of hard to see. So I want to add some text into this
14:24
So I want to add like a X, and I want to add a checkmark essentially inside of the
14:29
before element, actually the after element is the one that we have being this circle here
14:33
Once out of our after element, instead of just doing a blank content, I essentially want to have either the x or I essentially want to have a check mark. And to do this type of content, we're
14:40
going to need to use an HTML entity. So if I just do like HTML entity X and I search, let's see
14:47
what we get, multiplication X symbol. There's this CSS code we can copy. So if I copy that over
14:52
and put that in as my content, I go back over here, you can now see we get this X. And this
14:56
X is going to be really easy for us to style because it's going to be, you know, essentially
14:59
a perfectly square X as opposed to like the X that's inside of your font, which is not nearly as good
15:05
So we change our font size here to like 0.75 EM, make that a little bit smaller
15:12
And actually, we only want the font size to affect our font and not our actual width and height
15:16
So we're going to have to do a little bit of interesting scaling here. But our font size here for this is going to have to be a little bit smaller because right now it's clearly overflowing
15:23
And then we need to increase this size accordingly. So, let me just think about this real quick
15:28
So we have our font size, by default is one. If we want to reduce it by half, we would do .5, but then we don't need to essentially double
15:35
these values. So this would be 1.8 and this would be 1.8 EM
15:39
There we go. I think that looks exactly the same as when we add the width of .9 em and the height of .9 em
15:52
Let me see to make sure. We'll just move this down. comment this out
15:57
So it looks slightly different. I think the reason it looks different is our left also needs to change
16:02
So if we come in here and we say that our left is 0.2 EM
16:06
which move this here and that up there, that. Let's see, height, there we go
16:15
Okay, so if we comment out this entire section, yeah, I believe, yeah, okay
16:24
Okay, so essentially what we've done is we've halved our font size and doubled everything else
16:29
because our font size decreased by half, so we had to double all of our other EM-based measurements
16:34
That makes sense. So now if we get rid of this, now you can see our X is a little bit better size in my opinion
16:39
So we can change the color to be a similar red color, we're just going to make it really
16:43
really light colored. So we're going to do like 90% here. So it matches essentially the background color, and we just want to make it so it's centered
16:50
A really easy way to do that is display flux, justify, content in the center and align items in the center. That's going to center our X perfectly
16:59
And I want to make it maybe even like 95% lightness. So it's just, let's just make it white
17:04
really. I think that'll be fine. There we go. So now we have that X in the dead center
17:09
And when we are, you know, green, I want to change this to a check mark. So we can just take our
17:13
content here. And in the after section, when we have it checked, I just want to change our checkmark
17:17
here, our X to a check mark. What I can do here is I can just search. We'll just do HTML entity
17:23
check mark and go to that same website again copy over that CSS code paste it in
17:31
now if I come over here you can see we get a check mark and then we get an X over
17:35
there so it's just kind of toggling between the two different states I don't quite like how it instantly toggles between them I may want to add an animation that's
17:42
going to like fade the text out and then fade the text in so let's try doing that
17:45
add in some keyframes and we'll just call this check fade And we'll do like check fade
17:55
There we go. And at 0%, I want the opacity to be 1
17:59
and I want the content to be this content here. There we go
18:05
Put that inside of quotes just in case it makes a difference And then at 50 I essentially want to make our opacity zero So we can change our opacity to zero
18:16
And then at 100%, I want to change our opacity back to one
18:20
but I want to use this checkbox here. So essentially what I'm doing is I'm saying, hey, at 0%
18:24
our content is going to be the X shape, and at 100% our content is going to be the check mark
18:30
And in between, I'm just going to fade my opacity between 1 to 0 back to 1
18:34
And I'm hoping that I can do the animation on the content where as soon as it'll hit 100%, for example
18:39
it'll just instantly switch the content because you can't animate text, obviously. So let's see if that does anything
18:45
So we'll just come in here. We'll say at animation or animation is equal to check fade
18:52
Duration is going to be 200 milliseconds. Timing function is ease in out
18:58
And then we want the fill mode to be forwards. Let's comment out of this content here
19:04
See if this actually does anything. So it does actually look like it kind of fades
19:07
Let's just change this to like 2,000 so we can really see it in effect. It looks like it fades out the text, fades in, and it's got the checkmark
19:13
I think that actually is exactly what we want. So we're just going to keep that as is, change it back to 200 milliseconds
19:20
And now all I need to do is make it so it works on the backwards version, because when it goes forward, it works fine, but it doesn't work going backwards
19:27
So to make it work going backwards, we essentially want to do the exact same animation on the toggle state here
19:34
There we go, except for I want to make it reverse. So we just change this to reverse, and that should do the exact same thing
19:41
So it's fading out and then coming in, and fading out and coming in. And if we change this to like 500 milliseconds, it should be a little bit easier to see
19:47
it starts out as a check, fades out to the X and so on. Even though actually it doesn't look like it's fading at all
19:52
I see 5,000 milliseconds. See, okay, it does do the fade, but it's only do it at one time
20:02
That's really what all. because the animation no longer plays when you toggle between the different states
20:06
Hmm. Maybe we just won't worry about the animation stuff. Honestly, we don't need it
20:11
I think it looks fine as is. And we just need to add that content back in
20:16
So let's copy that. Place it up there. There we go. That looks pretty good, I think
20:24
Yeah, that looks good. Now the next thing is to handle like a disabled state, because right now we have a normal state, but what happens if our checkbox is disabled
20:31
We'll just come in here. I'm just going to copy this. paste it down and I'm just going to like put like an HR in between
20:36
There you go. Actually we'll just do a BR. There you go. Just so they're on different lines
20:40
And this one I'm going to disable. So we'll just say disabled. Now this should be a disabled checkbox down here and it is
20:47
As you can see I'm clicking on it and it's not actually doing anything. It's toggling this one up here which is fine. I think
20:52
Yeah, it should be fine. Okay, so the next thing that we need to do, we just fix the spacing here is we need to work on the disabled state
21:00
So if our input with a type of checkbox and it's got the toggle class is disabled, then we want to select the label
21:13
And I want to change the color to like 777, just like a faded out color
21:19
There we go. So it's got that disabled color. But I also want to do is I want to take the before element and I want to take the background color
21:28
I want to change it to that same exact grade-out color. And we're going to take our after element itself
21:35
We're going to give it, let's see, does white look well? That doesn't quite look well
21:40
Let's do like CCC. Yeah, so we'll do CCC here and 777 here
21:46
So it kind of gives us this great-out look, and we're also going to change the content to be nothing
21:52
Actually, no, yeah, we want to keep the content in there. Yeah. So this gives us essentially a grade-out checkbox
21:57
Clearly this grade out version is not able to be used while this version up here works just fine
22:02
So that's good. Let me copy down another checkbox. This should be BR, not whatever I had
22:08
I just put this right here. There you go. Let's see if I click that
22:15
For some reason, it's only toggling this very first checkbox. I need to think about why that is
22:20
I'm guessing it has to do with my selectors that I'm using. Hmm, hmm, hmm
22:27
Let me think here. Oh, I know what it is. Obviously, these all have the same ID
22:31
I need to change the ID. So this should be check one, check one, check two, check two, check three, check three
22:37
There we go. Now I can toggle these individually, and this disabled one, I cannot change it all
22:41
And if we change the disabled one to be checked as well, it should, yeah, as we can see, have that checked status, which is exactly what we want
22:48
So we want it to be able to be seen, but not actually be able to be changed. That's perfect
22:52
Let's see what happens if we change it to read only. As you can see, it looks like we're still able to change it
22:56
obviously we don't want that um so we need to change our style here for this for the read only one
23:03
so let's see read only we really want to look exactly the same don't we actually what even is
23:08
read only we'll see like HTML read only and we're going to do mdn
23:15
next element not mutable supported by okay it doesn't even look like it's supported by checkboxes
23:27
Yeah, so it's not even supported on checkboxes, so we're not even going to bother with implementing read only because it doesn't even work, so we're just going to get rid of that
23:34
Send it back to disabled. There we go. Other than that, though, I think we have pretty much everything done
23:40
If I remove this toggle class, you can see it just goes back to a normal checkbox
23:44
But we add that toggle class in, and now we have this really cool toggle instead. So I really like this because the HTML is the same, whether you are doing the toggle
23:51
or not, the only difference is you just add or remove that toggle class if you want this toggle
23:56
and the animation is cool. It's very accessible because it uses just normal input elements. It has a
24:00
focus state, you know, with this outline, so it's super easy for people to use. And overall, I think
24:04
this is a really great toggle switch. Now if you enjoyed this video, you're going to love my other
24:08
live solves. They're going to be linked over here. With that said, thank you very much for watching and
24:12
have a good day