Skip to content
Submitted over 3 years ago

Pricing component with toggle switch

accessibility
Fluffy Kas•7,675
@FluffyKas
A solution to the Pricing component with toggle challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hey guys,

I used this challenge to learn a bit about creating accessible toggle switches. I followed an awesome pen by Scott O'Hara and tweaked it so it fits the design.

The design of this challenge was really lovely and I had a lot of fun playing around with the gradient and coming up with some custom focuses for the buttons. The Javascript part is probably not the most elegant solution but it works well, as far as I can tell. ^^

If you see anything I have missed, I'd love to hear it, so feel free to leave a feedback!

Thanks and have a lovely weekend everyone!

Code

Please log in to post a comment

Log in

Community feedback

  • Fluffy Kas•7,675
    @FluffyKas

    @VladimirBrscic display: none would remove these elements from the document which isn't something I wanted. I wanted screen readers to still be able to take note of those elements. So the best solution is to just visually hide these elements from the average user (for them, there's the toggle which mainly consists of pseudo-elements that screen readers don't really see). So yes, it's an accessibility issue ^^ I hope I could explain it well enough :D

  • VladimirBrscic•775
    @VladimirBrscic

    Hi, your solution is very good and interesting. I have one question, why did you use "opacity: 0;" , "position: absolute;" to hide <input> and <legend> elements. Is there a specific reason to do so or it can be done with simple "display: none" on both elements? Maybe something about accessibility? Thanks.

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