Pricing Component with Toggle (HTML/SASS, no JS)

Community feedback

• 

  T

  Matt Studdert•13,611

  @mattstuddertPosted over 4 years ago

  Hey Iwan, awesome work on this challenge. You've done a really good job and it's great to see that you've got it working without JS.

  One thing I'd recommend updating is the input that you're using for the pricing toggle. At the moment, you've got aria-hidden="true" which hides is for screen reader users. You actually want those users to be able to access that element because otherwise, they wouldn't be able to toggle the prices. You've got an .sr-only class in your CSS to hide elements visually but keep them accessible for screen reader users. So you could remove the aria-hidden attribute and then add that class.

  Keep up the awesome work! 👍

  2

  ---

  

  Leshy•580

  @LeshyNLPosted over 4 years ago

  Hi @mattstuddert, thanks again for your feedback. Much appreciated!

  Due to the 'No JavaScript' bonus part of the challenge, I decided to actually hide the entire toggle component to screen reader users altogether. Instead, I opted for simply presenting them with both the monthly and annual prices, using a <span class='sr-only'> to add the necessary labels to indicate the monthly and annual price.

  My reasoning was as follows: if the input is shown to screen reader users, they would also need to know what it is for. The associated label just says 'Monthly Annually', which is not super helpful. So I would probably also have to add an aria-label="Switch between monthly and annual prices" to the input.

  But then the user would not know what state the toggle was currently in and which prices were being displayed. Without JavaScript, it would also not be possible to update the aria-label after toggling.

  So I figured that instead of going down a giant rabbit hole, I would just circumvent the problem altogether and go for the solution above, which may also have the added benefit of not having screen reader users have to manually toggle, I guess. Happy to hear if there are issues with that solution or if I was overthinking the issue :)

  1

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted over 4 years ago

  @LeshyNL that’s completely fair enough and really good reasoning for your decision. To make websites truly accessible we do need at least a sprinkling of JS. So that makes complete sense as to why you’ve gone down that route 🙂👍

  1

  

  Leshy•580

  @LeshyNLPosted over 4 years ago

  @mattstuddert Thanks for the confirmation!

  0