Interactive rating with HTML, CSS and JS including Acessibility
Design comparison
Solution retrospective
In this project I managed to learn about accessibility. I still didn't know anything about this subject. In the next projects I will apply the accessibility rules.
What challenges did you encounter, and how did you overcome them?I had difficulty finding the necessary attributes for screen readers.
What specific areas of your project would you like help with?I would like more tips on accessibility to apply to future projects.
Community feedback
- @wendyhamelPosted about 2 months ago
Hi, Great to see you are working on the accessibility!
I noticed some styling differences:
- If you look closely at the design, you can see the card has a gradient from top to bottom in the background.
- the selected state of a rating is gray in the design
- the hover state of the button has orange text in the design
For your rating to work as a radio group, you need to use inputs instead if buttons. The
type="radio"does nothing on a button. You need a<fieldset>with<input type="radio">and give them all aname=""attribute. The name you use, should be the same for all the radio inputs. This let's html know this is a group of radio buttons. This lets you iterate the buttons in that group with the arrow keys. Better accessibility, without the need to add aria-attributes for yourself.Happy Coding!
Marked as helpful0
Please log in to post a comment
Log in with GitHub
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