Hi,
I have my code here:
it works when the user toggles the button with the mouse (see the deployment), annual to month and back again.
But with the ‘enter’ key , it only works to toggle to month, but not back again to annual?
I know I can do this with JS, I already have a working JS version, but I’m trying to do this with CSS only. I’ve been trying to solve this for three days , so I thought I’d ask for help.
Thanks
That toggle is not really a switch. A switch has two values: “on” and “off”. Since you are toggling between the values “Annually” and “Monthly” it can’t technically be a switch. It might not seem obvious why this distinction is important, but screen reader users will notice because screen readers will make assumptions on how the input should work if it has a role of “switch”. And one of those assumptions is that the value is either “on” or “off”.
What you have here is basically two choices for pricing: either Annually or Monthly. One way to do this is to use two radio button inputs. Below is a link to a good article on how to do this accessibly.
That tutorial is fine if you have a single value you are turning on/off. But that’s not what you have here.
If you want to try and use that tutorial to do what you are trying to do here, that’s fine. But if you want it to be accessible then you’ll follow the one I gave you instead.
Thanks, but the tutorial in your link is of very little help. She doesn’t explain much at all.
It doesn’t even work for me. I tried copying /pasting her code as a last resort , to see if I could get it to work, and still it doesn’t work.
I’m just looking for a simple tutorial that explains the basics .
I looked all over the internet (at least 7 pages in results) , not even one of them explains how to create a basic , two different value/options , accessible toggle switch.
Very frustrating!!
Yes, she is not explaining every little thing, she is letting the code do most of the explanation. Also, she is using SCSS instead of plain CSS, so you have to either do that translation yourself or look at the real CSS through your dev tools.
I understand that this can be frustrating. HTML doesn’t provide a native toggle switch like this, so you have to create a custom one yourself. I hate to say this, but most people will just create something that looks and behaves the way they want with no regard for accessibility. So most of the tutorials you will find out there are not accessible. The one I gave you is very accessible and I recommend you try to recreate it for your project.
Just remember, this is really just two radio buttons. There are just some CSS tricks being played to make it look like a single toggle switch. So start with her HTML, which you literally should be able to copy/paste and just change the names in the labels. Then apply the CSS. I even found an SCSS to CSS converter you can use. Be sure to only use the CSS needed for the switch itself. For example, she has included rule sets for body and a which you won’t need.
Thank you for your replies. I managed to solve it. Took A LOT of trial and error, but I pushed through and have a better understanding as well.
It works, except I can’t get it to work by pressing the spacebar or enter key?
It works using the mouse, and I get it work using JS for both mousedown/keydown, but not just using the keyboard. It also won’t gain focus when I press tab repeatedly ?
Hope you can give some tips , ideas?
Thanks!
If you are using the two radio button approach then it won’t work with either the spacebar or enter key because radio buttons don’t respond to those keys. A group of radio buttons respond to the arrow keys. So try the right/left or up/down arrow keys and it should toggle.
Thank you!! I spend the whole day trying to figure out why I couldn’t get it to toggle with the spacebar or enter key! 
it works now!
The target selector can be used to toggle a switch button when the user uses a keyboard to focus on the element. When the user focuses on the element, the target selector will add a class or style to the element, which can be used to toggle the switch. Additionally, the focus selector can be used to add a focus style to the element so that the user can easily see that the element is focused.