Interactive rating component

Community feedback

• 

  

  Grace•32,130

  @grace-snow

  Posted almost 2 years ago

  Hi

  I'm afraid you need to change the html in this. It must be a form with a fieldset of radio inputs. Any other markup for this design poses significant accessibility issues

  Once that is done you'd need to

  • update styling to accessibly hide the inputs and ensure focus visible and checked states work for keyboard users
  • update js to only listen for a form submit. The form should not submit until a required radio has been checked

  To make this fully accessible there is more to consider as well but that should be enough to get you started

  Additionally

  • this is currently overflowing my mobile screen on the sides because you've set width not max-width
  • the card must not have a height. Never limit the height of text containing elements
  • the button should not have an explicit height or width either. Use padding and width 100%.
  • the alt on decorative images should be left blank (eg the star)
  • I strongly advise against setting html font size to 62.5% like you are doing now. Have a read of this to understand why it can be really terrible and how to handle rems better
  • also on my site is a post about why font size and line height must never be in px. Worth you reading that one as well

  I hope all of this helps

  11

  Marked as helpful