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.
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.
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.
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.
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.
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.