Interactive rating component

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  • Do not forget ⚠️ to check your FEM report (It provides value information), to see what is incorrect and update your code with it. This should be done immediately after submitting your challenge.

  • Every site should ALWAYS have ✅ a main element not only for semantic purposes but also to help assistive technology find the main content of your content. For this challenge, it will serves as the component’s container ⚠️.

  More Info: 📚

  MDN Main Element

  • Unfortunately, the HTML for the ratings needs to be rewritten as it was done incorrect ❌:

  To ensure that the "rating buttons" are fully accessible 💯, they need to be built using a form ⚠️.

  1. Everything will be wrapped inside a fieldset which will have a legend that is visually hidden using CSS.
  2. Inside, there should be five input radios and each input should have a label attached to it to make the “ratings” accessible.
  3. The last thing you will want to include will be a button so users can submit their choice.

  Here is how it looks like fully implemented: EXAMPLE

  More Info: 📚

  MDN: Form Element

  MDN: <input type="radio">

  MDN: Field Set Element

  If you have any questions or need further clarification, feel free to reach out to me.

  Happy Coding! 🎆🎊🪅

  Marked as helpful

  1

  ---

  

  KhumboMunsaka•40

  @KhumboMunsakaPosted almost 2 years ago

  @vcarames Thanks. I think you are right in what you said. I myself was having trouble deciding what the reviews should be. I didn't even think of using radio buttons

  0

  

  KhumboMunsaka•40

  @KhumboMunsakaPosted almost 2 years ago

  @vcarames What is a FEM report?

  0

  

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  @KhumboMunsaka

  Glad I could! 😁

  Whenever you want a user to submit any type of info, a form is always used.

  0

  

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  @KhumboMunsaka

  If you go your project and scroll past the "design comparison" you will see the report, which will show everything that it found to be incorrect or needs improvement.

  0

  

  KhumboMunsaka•40

  @KhumboMunsakaPosted almost 2 years ago

  @vcarames I need to work even harder!

  0

  

  KhumboMunsaka•40

  @KhumboMunsakaPosted almost 2 years ago

  @vcarames What tips do you have so I can get as good as you?

  0