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 Using Astro and Sass

P

@kaamiik

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 are you most proud of, and what would you do differently next time?

Using Astro for the first time in a project

What challenges did you encounter, and how did you overcome them?

HTML structure and do this project based on making component was challenging

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

I think accessibility issues is the most important part and html structure is important too.

Community feedback

matt2282 310

@matt2282

Posted

Good job!

My understanding of accessibility is that your page needs to meet a few criteria: -alternate text on images: you provided an alt text on the image on the thank you page. -navigation with the tab key on the keyboard: the tab button does not select the rating buttons on the main page. -using the correct semantic html elements -ensuring a screen reader can read the content on the page and its convey its context.

There is more to it than this, but this is the basics I have learned so far.

0

P

@kaamiik

Posted

Thank you @matt2282

The decorative images do not need alt text and you do not have to use alternate text for it.

The rating options are radio inputs. You can select them with tab and arrow keys on top and bottom and left and right.

1

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