Interactive Rating Component using HTML, CSS, JavaScript

Community feedback

• 

  

  Grace•32,130

  @grace-snow

  Posted 8 months ago

  I'm afraid this has some serious accessibility problems. It's great you've used a form with radio inputs but there are specific requirements around that you need to follow.

  • This group of radios should be in a fieldset (or role="group") with a legend (or aria-labelledby referencing some on screen text).
  • there should be no click event listeners anywhere, just one submit event listener on the form.
  • the inputs must not be display none! That removes them from the accessibility tree. You need to accessibly hide them instead.
  • font size should be in rem, never px.
  • it's really important to never limit the height of elements that contain text. That includes the wrapper, and component (the cards/panels). Min-height is fine to use (but unnecessary on the component). Let the browser do it's job and decide what height is needed based on the content inside the card.
  • the component must not have a width either. Use max-width in rem instead. This allows the component to shrink narrower when needed like on smaller phones.
  • don't style on IDs. That's not what they're for and is causing unnecessary duplication in CSS.
  • don't forget to add :focus-visible styles. When the inputs are focused by keyboards it needs to be obvious on the label visually.
  • there is no need for a media query in this. Once the above changes are made you can remove it. But for future reference, don't write media queries like this. Style mobile first and use min-width media queries, preferably defined in rem or em not px so that the layout scales nicely even when users have a larger text size setting.
  • don't change inline styles in js. Let css handle all styling. Js should only toggle attributes or classes.
  • once you've changed js to only use one submit listener you will be able to get the chosen value from the form data. E.g. form.rating.value.

  25

  Marked as helpful