interactive rating component

Community feedback

• 

  T

  Alex•2,010

  @AlexKMarshallPosted over 2 years ago

  Hey there. In terms of accessibility, when you build something interactive (like this is). You must test it with a keyboard. Ideally, test it with a screen reader too, but a keyboard will get you a lot of the way there.

  If you try and use this with a keyboard you'll see it doesn't work. It's not possible to focus on the rating values and select one, you can only press the submit button.

  You're not that far off. You're using the right element <input type="radio"/>. But because you've set it to display: none it becomes inaccessible. You'll need to use a method to hide it visually, but keep it accessible for screen readers and keyboards - here's one way you can do it https://www.a11yproject.com/posts/how-to-hide-content/

  In terms of the javascript, the only thing I'd suggest is that you attach your event listener to the form's submit method, rather than the button's click. Other than that it looks nice and clean

  Marked as helpful

  0

  ---

  

  Thomas Hertog•825

  @thomashertogPosted over 2 years ago

  @AlexKMarshall Thanks! I adjusted the display:none and made sure it was accessible by keyboard. I admit that was overlooked in the "final stage" of the challenge.

  0