Accessible toggle in HTML, CSS and JS with explanatory notes
Design comparison
Solution retrospective
Using accessible component from: https://github.com/scottaohara/a11y_styled_form_controls
This repo should provide explanatory notes on how and why the toggle was built like that.
Includes:
- fully accessible toggle switch
- javascript to toggle a class to show/hide the correct prices
- responsive (clamped) font sizes
- mobile first design
Ideally, this sort of component should read dynamic data and insert the prices in rather than hard-coding in HTML. But I don't have time for all that today!
Let me know if anything's broken :)
Community feedback
- @ApplePieGiraffePosted about 4 years ago
Hey, Grace! 👋
Very nice job on this challenge! Everything looks great! 👍
Perhaps a tiny detail you might like to add is a pointer cursor upon hover to the toggle—but I can see it already has a subtle hover state, so it might be good as it is!
Happy coding! 😁
1@grace-snowPosted about 4 years ago@ApplePieGiraffe yeah, good shout! I can add that :)
0 - @iamwhitegodPosted almost 4 years ago
Liked how you made use of comments in your style.scss file.
0@grace-snowPosted almost 4 years ago@whitegod001 thanks, I wouldn't do that in production, but find it's helpful to explain my thought process in these challenges to hopefully help other people or get feedback when I go wrong
0 - Account deleted
Hey Grace, Thanks for the comments--super helpful! I like the method with the hidden information for better accessibility, will try this, too.
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord