@FarisPalayi
Posted
Nicely done ๐
In addition to what @minimalsm said, my suggestion would be to make the toggle button accessible for keyboard users. Because, currently, the toggle button is not focusable.
For that, instead of using dispaly: none; to hide the checkbox from the screen, I'd suggest using something like
opacity: 0; height: 1px; width: 1px; (like an .sr-only class). So that the checkbox is still there in the DOM, but users won't be able to see it. Then you can simply add the focus styles when the checkbox is focused. For eg: .checkbox:focus ~ .toggle-btn { outline: solid 2px white; }. You might need to change your markup a bit for this to work, though.
Hope it's all understandable :)
Marked as helpful
@FarisPalayi Thank You, Actually I am learning, I do not know much about accessibility, but slowly I will make progress, now I changes my code and it is now focusable and accessible with keyboard.
@FarisPalayi
Posted
@skyv26 You are using tabindexes to make the elements focusable, you shouldn't be using tabindexes on elements that are not already interactive. I get why you used it for this purpose, because, I was also someone who used it without knowing its effect on accessibility. It's one of those things that you only should use if you absolutely have to. It's glad to know that you are learning accessibility. Because, it's neglected by a lot of developers.
Here are some resources that helped me when I was first getting into accessibility. Free accessibility course by Google, Web accessibility - MDN, Accessibility - W3C.
Also, I'm not an expert in this thing or anything, I'm also someone who is learning accessibility. Have fun learning and coding โจ
Marked as helpful
@FarisPalayi Thank You ! But can please tell me what should I use instead of tab-indexes ?
