Responsive Rating Component with HTML/CSS/JS

Community feedback

• 

  Fluffy Kas•7,655

  @FluffyKas

  Posted about 3 years ago

  Heyo,

  It looks great! It's nice you did this with inputs and even paid attention not letting people submit empty ratings. ^^ There's a few small things you could do here to improve:

  1. You can remove the action attribute from the form, it's not really needed here. Instead of the div named "ratings" inside this form, you could use <fieldset> to group together the inputs. You could also add a screen reader only <legend> to this with a title of "Ratings", just to make the form super clear.

  2. Instead of the <section> named "content" you could use <main>, so your solution has a landmark at least (this will get rid of the accessibility issues in the report, too).

  3. display: none isn't an accessible way to hide your inputs, as this will hide them from screen readers as well, which isn't something you wanna do. You can find some tips on how to solve this in this article.

  11

  Marked as helpful
• 

  Shashree Samuel•8,860

  @shashreesamuel

  Posted about 3 years ago

  Hey good job completing this challenge

  Keep up the good work

  Your solution looks great however I have some feedback on your accessibility and validation issue

  • Document needs to have a main landmark, this is caused by the inability to identify the main content and hence to fix this you can use the semantic main tag which when wrapped with all the tags between the body element will resolve this error since it establishes a main content.

  Once this issue is resolved then the rest of your accessibility issues should be resolved

  In terms of your validation error, the attribute action on the form element cannot be empty since the form needs to redirect to another page etc in order to process or output the data stored.

  Also I would not recommend using the div tag instead of the section tag since it i I hope this helps

  Cheers

  10