Rating Component

Community feedback

• 

  James.•390

  @JimztechPosted 4 months ago

  Hello, thank you for reviewing my code, do u mean something like this for the seo?

  <meta
        name="description"
        content="My Frontend Mentor - challenge is to build out this interactive rating component and get it looking as close to the design as possible."
      />
  

  0

  ---

  

  Maren Ehlers•230

  @MarenOelixtownPosted 4 months ago

  @Jimztech / yes, that is what I mean 👍

  1
• 

  Maren Ehlers•230

  @MarenOelixtownPosted 4 months ago

  Hey there 👋,

  I would like to leave you with a few suggestions...

  In the beginning of the html I noticed there is a missing ‚meta-description‘ in the head-tag (summarizes the content of an HTML document  for SEO – it’s a basic meta-tag).

  For improvements you should have a look at your rating system. It is completely inaccessible to people using a screen reader or people who rely on a keyboard.

  A good logical HTML form element, could be input type="radio" . From default it is focusable from the keyboard with tabs and arrows. In order for screen reader users to know what an input is for, they need a correctly assigned label. To ensure that the inputs have a correctly assigned label, you can use for on the label to refer to the corresponding input with this ID. 👉Label tag

  fieldset is a semantically correct way of grouping controls. As the radio inputs all relate to the same item (your rating) this lets screen reader users know what they are answering. 👉Fieldset

  An additional benefit for this part, no javascript is needed ;-)

  I hope it inspires you...all the best!

  0