Rating Component

Please log in to post a comment
Log in with GitHubCommunity feedback
- @Jimztech
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." />
- @MarenOelixtown
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 usefor
on the label to refer to the corresponding input with this ID. 👉Label tagfieldset
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. 👉FieldsetAn additional benefit for this part, no javascript is needed ;-)
I hope it inspires you...all the best!
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord