Submitted 2 months ago

Interactive Rating Component

#accessibility

Lesley Wesley• 295

@LesleyWesley

Preview site View code

This is a solution for...

Interactive rating component

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

Lesley Wesley’s questions for the community

Hi guys!

This was my first time working with radio buttons in any substantial way, and I tried to make the whole thing as accessible as I knew how, but let me know if there's any way I could improve it!

Also, I added an error message if the user tries to submit the form before choosing a rating, because I felt like it needed it. The user is also able to choose the rating using the UI or number keys and the "Enter" key.

As usual, any feedback is welcome! :)

Community feedback

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted 2 months ago

Hi there, Lesley Wesley! 👋

Excellent work on this challenge! 👏 Your solution looks great and the form works very well! 🙌 Great job thinking about the functionality of the form and adding an extra validation error message. 👍

One thing is that I wouldn't add any alt text to the icons in this component since they are mostly there for design and we don't really want them to be noticed and read by screen readers.

Also, make to sure validate the form when the user hits the 'Enter' key since currently the thank you screen shows regardless of whether an option has been selected yet. 😉

Hope you find this helpful. 😊

Keep coding (and happy coding, too)! 😁

Marked as helpful

Lesley Wesley• 295

@LesleyWesley

Posted 2 months ago

@ApplePieGiraffe I removed the alt text and updated it so the "Enter" key also validates the form! Thank you for the feedback! :)

Please log in to post a comment

Join our Discord community

Join other Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord