Skip to content
Submitted 3 months ago

Interactive Rating Component Using Astro and Sass

Kamran Kiani•1,280
@kaamiik
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Interactive rating component
  • HTML
  • CSS
  • JS
1newbie

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
    @matt2282Posted 3 months ago

    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
    Kamran Kiani•1,280
    @kaamiikPosted 3 months ago

    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

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