Design comparison
SolutionDesign
Solution retrospective
What are you most proud of, and what would you do differently next time?
It took me some time to figure out how to work with vanilla js. It was fun doing it.
Community feedback
- @0xabdulkhaliqPosted 7 months ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
- I have a suggestion regarding your code that I believe will be of great interest to you.
MAKING RATING FORM ACCESSIBLE :
- Currently the rating form is not accessible and because of using generic
button
elements which are paired up with Javascript to handle the operation.
- This is your current markup,
<div class="btns"> <button class="rating-button" value="1">1</button> <button class="rating-button" value="2">2</button> ... </div> <button type="submit" id="submit-btn">Submit</button>
- This is not a good way to build rating form, Instead we want to use
input
element withtype="radio"
which is wrapped insidefieldset
andform
. By using radio buttons instead of normalbutton
we can simply give checkboxes like options to select instead of relying on Javascript to work.
- So you can update your markup in this way,
<form> <fieldset> <legend class="sr-only">Please select a rating</legend> <div> <input type="radio" name="rating" id="rating-1" value="1"> <label for="rating-1">1</label> </div> <div> <input type="radio" name="rating" id="rating-2" value="2"> <label for="rating-2">2</label> </div> .... </fieldset> <button type="submit"> Submit </button> </form>
- I would highly recommend you to check out
my submission
for this challenge, So that you could figure out how built this rating component in an inclusive way to prevent accessibility issues.
- If you have any questions or need further clarification then feel free to reach out to me.
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
0
Please log in to post a comment
Log in with GitHubJoin 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