Skip to content
Submitted over 2 years ago

Interactive rating component submission form

Bobby S•410
@bobbe86
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

I had trouble with the JS, but I watched some videos and got some help from discord and it worked out very well. The highlighted buttons do not work on Safari, but they work on Firefox. I also think I should have started with a form semantics for the HTML since thats basically what it is. Any advice on how to start JS on most projects would greatly help. Thank you.

Community feedback

  • バレンタイン 😈•64,150
    @VCaramesPosted over 2 years ago

    Hey there! 👋 Here are some suggestions to help improve your code:

    • To ensure that the "rating buttons" are fully accessible, they need to be built using a form and inside of it, there should be fiveinput radios and each input should have a label attached to it to make the buttons accessible. Finally wrap all the inputs and labels inside a fieldset to prevent users from making more than one selection.

    More Info:📚

    MDN <input type="radio">

    MDN <fieldset>: The Field Set element

    • The “icons/illustrations” in this component serve no other purpose than to be decorative; Their alt tag should be left blank and have an aria-hidden=“true” to hide them from assistive technology.

    More Info:📚

    https://www.w3.org/WAI/tutorials/images/

    If you have any questions or need further clarification, feel free to reach out to me.

    Happy Coding!🎄🎁

    0

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