@VCarames
Posted
Hey there! ๐ Here are some suggestions to help improve your code:
- To not only improve your HTML code but to identify the main content of you page, you will want to wrap your entire component inside the
mainelement.
More Info:๐
- Along with the blank
alt tag, you also want to include thearia-hidden=โtrueโto your โ images/illustrationsโ to fully remove them from assistive technology.
More Info:๐
https://www.w3.org/WAI/tutorials/images/
- The proper way to build this challenge is to create a
formand inside of it, the โrating buttonsโ should be built using aninput radio(wrap all of them inside afieldset), since this will prevent additional buttons from being active at the same time, and it should have alabelelement attached to it for accessibility.
More Info:๐
MDN <fieldset>: The Field Set element
If you have any questions or need further clarification, feel free to reach out to me.
Happy Coding!๐๐
Marked as helpful
@elioflo
Posted
@vcarames Thanks for your feedback.
When I started doing the challenge I realized that using a radio button would resolve to choose just one, but I didn't know how to insert text inside the radio button. That's why I used div. ๐ ๏ธ
I take these suggestions and I'll update my project. ๐๏ธ
@elioflo
Posted
@vcarames I already updated my solution. Any feedback is welcome. Thanks.
@VCarames
Posted
@elioflo
Nice! The form should only wrap the rating buttons themselves ( sorry, I should of made that clear)
You also want to to have a legend after the form and before the first button that will be visually hidden.
Marked as helpful
@elioflo
Posted
@vcarames Thanks for your comments that help me so much.
Updated my solution.
Add legend and use form just for the fieldset.
Some new things I learned:
- It's the 'has' pseudo-class CSS selector. Never used it before.
- Use the 'submit' form event instead of the 'click' button event.
Any feedback is welcome.
@VCarames
Posted
@elioflo
Looks good!
Keep it up!
