Pricing component with toggle

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hi Lucas, well done here! I also completed this challenge lately, and I think this looks pretty good actually. I think this was well put together; you probably just need to increase the font-size of the prices and the title in the desktop view as well as change the padding values, and that would make it look even closer to the design!

  I don't have much in terms of suggestions; I guess the only thing I'd point you to is, right now you got two accessibility issue that you can try looking into. One issue is that, you used an input but it doesn't have a label, and labels often help screen readers identify what an input is and to also point to the correct input. What you can try doing is adding a label with some text that describes what the input is, and then give the label a visually hidden class:

  <input type="checkbox" id="button-check"/>
  <label for="button-check" class="visually-hidden">Choose annual or monthly</label>
  
  CSS:
  
  .visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  

  You can read more about that here: https://www.w3.org/WAI/tutorials/forms/labels/

  Also, because you used a checkbox and not something like a radio button switch, the screen reader would only be able to tell the user whether something is checked, and it can't tell the user that "annual" is checked or "monthly" is checked (which is something that can be done with radio buttons). This could also give the user some issues, as they can't tell which one got checked, and in a real life application, this would not be good for user experience. You can try looking into how to use radio buttons in the future.

  Hope this bit of feedback helps, and great job again!

  Marked as helpful

  1

  ---

  

  Lucas Fernando•760

  @lucasfernandodevPosted about 2 years ago

  @elaineleung Thanks a lot for the feedback! Mainly on the issue of accessibility.

  1