Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Interactive rating component - Introduction to web accessibility path

Andro87 1,460

@Andro87

Desktop design screenshot for the Interactive rating component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What specific areas of your project would you like help with?

My goal is to improve my understanding of accessibility key concepts and best practices to ensure the websites I work on are accessible to everyone. Therefore, any feedback in this area would be greatly appreciated.

Community feedback

haquanq ®️ 1,585

@haquanq

Posted

Hello @Andro87,

Nice work, your solution looks good!!

About web accessibility, the most basic practice is keep your HTML structure clean and clear (has good semantic, the flow of content is the priority when first structuring the layout). Further more about using ARIA specifications on elements, you can start by reading guidelines on this site.

Here is something you can improve:

  • Whenever you want to send data away, use form element with inputs. In your case, you need to wrap all inputs inside form. Further more, wrap all related inputs inside fieldset with legend contains a short and descriptive explanation about how should these inputs inside fieldset should be used (hide it with CSS for screen readers).
  • You can just put input element inside label to make it cleaner (no need for div).
<fieldset>
   <legend>Do something with these inputs</legend>
   .... inputs ....
</fieldset>

Have a nice day!!!

Marked as helpful

1

Andro87 1,460

@Andro87

Posted

Hello @haquanq,

Thank you for your suggestions and your time!

Happy coding!!!!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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