Can I Create Accessible CSS Toggle Buttons?

in this video i'm going to try to create some of these css slider toggles and we're going to really heavily focus on accessibility and ease of use because those are the most important factors 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 what i do when i encounter issues and how i debug issues [Music] welcome back to web dev simplified my name is kyle and my job is to simplify the web for you so you can start building your dream project sooner 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 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 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 because normally to create an input you know you just put input type is checkbox here and you can also have a label for example and the label we're just going to say let's say checked there we go and this is like the minimum html you need you also need to have like an id that just says like check 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 but this is your normal standard html that you need for a checkbox input 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 and all i want to do is just add a class that says like toggle and that class is the only thing i need to add to my html to convert my checkbox from this type of checkbox to a toggle checkbox like this one so let's see if we can do that 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 so let's create a css stylesheet and let's make sure we link that in our html oops link our style sheet there we go styles.css and inside here all i want to do is i want to just make it so that our input is gone so we'll say input or the type is equal to check box if it has the class of toggle then i want to make it disappear and you know we could say like display none but the problem with that is then the checkbox is gone 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 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 oops check box we can check when it has the toggle class and we can get the label that comes directly after it by using this plus sign right here it says get the element that's directly afterwards and we're saying get the label so here we can just change the color to red and i want to do that whenever our checkbox is checked there we go so i can check and uncheck my checkbox even though it's completely invisible 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 so what we can do to do that is we can say hey position this absolutely now what this is saying is hey our checkbox is now positioned absolutely so it's essentially gone it doesn't take up any space in the dom but it's still there like i can still check and uncheck this checkbox 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 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 see my pointer changes to that pointer cursor whenever i'm inside of that checkbox 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 9000 pixels i'm going to do the same thing with the top and what this does is it essentially makes it so that my checkbox is no longer on the page 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 the for 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 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 when i hover over you're going to see that nothing on my page corresponds with that input 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 checkbox through the actual label the next step is to make it so we actually have our switch showing up on the screen 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 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 content on the left hand side for a toggle switch so our toggle switch we're going to give it a content which is just an empty string and that's because we just want it to show up and we're going to give it a width here and we're going to scale everything using ems so for example our width is going to be 2em and our height let's just give it one em for now we'll give it a background color of red just so we can see it and of course this isn't working so let's inspect our page and see why this is not showing up so we have our label 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 properly because it it looks like it has no width but it does have a height this width which changes like 10 pixels see if it shows up it does not oh i believe the reason for this is our label itself needs to be able to be not an inline element so what we want to do is we want to change this to be a display of flex there we go 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 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 you can see we have our box here that is scaling with that obviously we just want to have that normal font size but now we have a scaling checkbox essentially that's going to scale with the size of the text for our actual label and as we toggle and untoggle this it's going to be able to be clicking on this section here this before section and actually toggling our checkbox as you can see by that color changing 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 a background color of red pretty ugly let's try something like aaa maybe we'll do even lighter that we'll do like ddd there we go that's a pretty light background because i kind of want to have like a light background color around it of course we're going to change our border radius here to let's see 1 em 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 actually we'll do 0.5 em or maybe 0.25 em there we go we just have a little bit of space between our toggle and our label over here 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 you know check box 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 it's a very minor change but if we change our height here to like 2em you can now see that our text is in the center while without this our text is showing up at the top 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 so let's copy all of this and we're going to just paste it down here 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 one em 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 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 so to do that what we can do is we can take our label here we can change the position to relative 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 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 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 just like over here we have it inside of our you know toggle section i think that looks pretty good and then when we have our checkbox checked we just want to move this to the right hand side so by default the background color let's change it to like white for example or maybe we'll change it to like uh let's see a little bit darker color let's see what they had over here they had it set to just a gray color with a white background 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 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 so let's do like hsl 0 100 50 and let's just tweak around these values till we get something that we like so let's maybe make this like 70 percent a little bit darker we'll do like 80 there we go i think that looks pretty good we'll desaturate it a little bit like 30 maybe 40 well actually let's lighten it a little bit let's see like 80 60 there we go that looks like a pretty good color and then we're going to change the background color of our entire thing to have essentially a very very light color we'll change just like 90. so we have this very light red with the darker red in the center i think that looks pretty good and we're going to add more accessibility features in just a little bit 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 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 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 we can get rid of a lot of this all we really need to do is change our background color and our position so our position is going to be 1.9 em i believe and our background color we want to change to green so let's say like 200 i think is green or that's 100. there we go so let's click on this okay you can see that that's moved over to the left and instead of 1.9 we want this to be 0.9 i believe i actually want to just be one maybe there we go that is exactly what we want so now we've changed it to the screen color when it's checked and when it's unchecked it is this color and this green is a little bit kind of bright i'm going to desaturate it a little bit there we go i think it looks a little bit better so now we've got it moving from left to right when we check that looks really really good let's see what else we need to do i think actually instead of making our left move let's do our transform translate i'm going to translate the x by 100 there we go that's going to give us the same effect 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 this is going to work just fine actually it's not going to work just fine we need to move it by one em there we go actually no maybe maybe i was right i think i was right 100 is correct yeah because we want to move it by 0.9 em yeah that looks correct okay perfect so now the next step is to make it so that our toggle changes its background color as well so that is going to be this before element let's just copy this down when we have our check box checked the before element i want to change the background color to use that same 100 and let's change this to 70. let's see if that looks good there we go so we've changed it from red to green and i think this is a little bit too light for the green color so we'll change it to like 80 maybe 85 actually maybe 90 was fine yeah that looks good enough so now we have our checkbox and it's moving from side to side and the color of our text we don't need that to change anymore so we can get rid of that now as you can see this is working i want to change our label though so we have like that pointer cursor over top of it so we could say cursor is pointer that when we hover you can kind of see we get the nice pointer cursor so we know we can toggle this from left to right that looks really good the next step is to make it a little bit more accessible because right now if i click like tab for example i'm currently highlighting this like i can click space to toggle it 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 we can take this whole selector let's just do this and i want to do a focus here 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 i'm probably going to add like a border maybe around it or we'll do outline so we'll see 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 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 there we go so now if i space over that there you go we see that we now have a black outline around this saying that i've selected this and now i can toggle from left to right and that's because with tab i'm able to tab into that input and right now my tab focus is on the input itself that checkbox even though the checkbox is like miles off the page 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 okay now take my label and put that black outline around it that looks really good and honestly i kind of just think that's going to be fine as is for our tab state that's good enough 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 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 to be let's say 200 milliseconds we want to do a transition for ease in out there we go now let's do the exact strain transition on our before element as well there we go let's see if that works there you go you can now see that it's moving from right to left 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 and down here we're going to transition our background color and we're going to have a separate transition we're just going to copy this and that's going to be for our transform so we'll say transform now let's see if that worked there we go that seems like it's working our outline is still doing some weird stuff though it seems like i think it's just because it's like losing and unlosing focus interesting maybe we have to do focus within let me try that so we'll say focus within now that's not quite doing it i wonder why our focus is like coming in and out that's what it seems like to me because as you can see it's kind of like flashing that means that our focus is not on our checkbox anymore oh it's probably because we're getting the focus on our label and then our focus is going to our checkbox i'm not sure if there's a good way to fix that but honestly that should be fine i mean it looks fine especially when you zoom out to like a more normal zoom level it's not nearly as noticeable so i think that's fine we're just like super mega zoomed in for the tutorial so now the next thing that we need to do is actually handle the accessibility portions because if you're colorblind this red versus green is kind of hard to see so i want to add some text into this so i want to add like a x and i want to add a check mark essentially inside of the four element actually the after element is the one that we have being this circle here inside 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 going to need to use an html entity so if i just do like html entity x and i search let's see what we get multiplication x symbol there's this css code we can copy so if i copy that over and put that in as my content i go back over here you can now see we get this x and this x is going to be really easy for us to style because it's going to be you know essentially a perfectly square x as opposed to like the x that's inside of your font which is not nearly as good so we change our font size here to like 0.75 em make that a little bit smaller and actually we only want the font size to affect our font and not our actual width and height 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 and then we need to increase this size accordingly so let me just think about this real quick so we have our font size by default is one if we want to reduce it by half we would do 0.5 but then we need to essentially double these values so this would be 1.8 and this would be 1.8 em there we go i think that looks exactly the same as when we add the width of 0.9 em and the height of 0.9 am let me see to make sure we'll just move this down comment this out so it looks slightly different i think the reason it looks different is our left also needs to change so if we come in here and we say that our left is 0.2 em which move this here and that up there that let's see a height there we go all right so if we comment out this entire section yeah i believe yeah okay so essentially what we've done is we've halved our font size and doubled everything else because our font size decreased by half so we had to double all of our other em based measurements 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 so we can change the color to be a similar red color we're going to make it really 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 a really easy way to do that is display flex justify content in the center and align items in the center that's going to center our x perfectly and i want to make it maybe even like 95 percent lightness so it's just let's just make it white really i think that'll be fine there we go so now we have that x in the dead center and when we are you know green i want to change this to a check mark so we can just take our content here and in the after section when we have it checked i just want to change our check mark here our x to a check mark what i can do here is i can just search we'll just do html entity check mark we'll go to that same website again copy over that css code paste it in and now if i come over here you can see we get a check mark and then we get an x over 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 going to like fade the text out and then fade the text in so let's try doing that add in some keyframes and we'll just call this check fade and we'll do like check fade there we go and at zero percent i want the opacity to be one and i want the content to be this content here there we go 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 and then at one hundred percent i wanna change our opacity back to one but i wanna use this checkbox here so essentially what i do is i'm saying hey at zero percent our content is going to be the x shape and at 100 our content is going to be the check mark and in between i'm just going to fade my opacity between 1 to 0 back to 1. and i'm hoping that i can do the animation on the content where as soon as it'll hit 100 for example it'll just instantly switch the content because you can't animate text obviously so let's see if that does anything so we'll just come in here we'll say at animation or animation is equal to check fade duration is going to be 200 milliseconds timing function is ease in out and then we want the fill mode to be forwards let's comment out this content here see if this actually does anything so it does actually looks like it kind of fades 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 check mark 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 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 so to make it work going backwards we essentially want to do the exact same animation on the toggle state here there we go except for i want to make it reverse so we just change this to reverse that should do the exact same thing 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 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 let me see 5000 milliseconds see okay it does do the fade but it's only do it one time that's really what oh it's because the animation no longer plays when you toggle between the different states maybe we just won't worry about the animation stuff honestly we don't need it i think it looks fine as is and we just need to add that uh content back in so let's copy that paste it up there there we go that looks pretty good i think 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 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 there we go actually we'll just do a br there we go just so they're on different lines 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 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 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 so if our input with a type of check box it's got the toggle class is disabled then we want to select the label and i want to change the color to like 777 just like a faded out color there we go so it's got that disabled color what i also want to do is i want to take the before element and i want to take the background color i want to change it to that same exact grayed out color and we're going to take our after element itself we're going to give it let's see does white look well um that doesn't quite look well let's do like ccc yeah so we'll do ccc here and 777 here so it kind of gives us this great outlook and we're also going to change the content to be nothing actually no yeah we want to keep the content in there yeah so this gives us essentially a grayed out checkbox clearly this grayed out version is not able to be used while this version up here works just fine so that's good let me copy down another checkbox this should be br not whatever i had i'll just put this right here there we go and let's see if i click that for some reason it's only toggling this very first checkbox i need to think about why that is i'm guessing it has to do with my selectors that i'm using mm-hmm let me think here oh i know what it is obviously these all have the same id i need to change the id so this should be check one check one check two check two check three check three there we go now i can toggle these individually and this disabled one i cannot change at all 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 so we want it to be able to be seen but not actually be able to be changed that's perfect 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 obviously we don't want that um so we need to change our style here for this for the read only one so let's see read only we really want to look exactly the same don't we actually what even is read only like we'll say html read only and we want to do mdn next element not mutable supported by okay it doesn't even look like it's supported by check boxes 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 send it back to disabled there we go other than that though i think we have pretty much everything done if i remove this toggle class you can see it just goes back to a normal checkbox 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 or not the only difference is you just add or remove that toggle class if you want this toggle and the animation is cool it's very accessible because it uses just normal input elements it has a focus state you know with this outline so it's super easy for people to use and overall i think this is a really great toggle switch now if you enjoyed this video you're going to love my other live solves they're going to be linked over here with that said thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 230,707

Keywords: webdevsimplified, live coding, css toggle button, css toggle, css switch, css custom input, css custom checkbox, css checkbox animation, css checkbox

Id: N8BZvfRD_eU

Length: 24min 14sec (1454 seconds)

Published: Sat Feb 19 2022