Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Mobile first with attempt at accessible toggle switch

Dina 460

@dinakonto

Desktop design screenshot for the Pricing component with toggle coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


My biggest focus for this challenge was making the pricing toggle accessible, particularly for screenreader users. I read a lot of articles but they were mostly focussed on on/off toggle buttons and used checkboxes or buttons as their base HTML element.

Semantically, this toggle felt more like it made more sense as a radio group so I tried to start with those. I definitely don't think I've succeeded - please let me know what you think and link to any other options you've seen!

Community feedback

Please log in to post a comment

Log in with GitHub
Discord logo

Join 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