Design comparison
Solution retrospective
Any recommendations and or suggestions are always appreciated.
Community feedback
- @EverezzePosted 11 months ago
Hi Andrew, good job on the challenge!
I might be picky but something to change would be the ratings touching the edges of It's container to get them aligned with the other contents in the component (space-between instead of space-around). A personal challenge(not a requirement in the project iirc?) would be handling when the user click 2 times on the same rating to remove it without choosing another one.
Apart from that, that's great! Keep going
Marked as helpful0 - @BlackpachamamePosted 11 months ago
Greetings Andrew! your solution looks great
I can only comment on an accessibility issue regarding images: Screen readers have no way of translating an image into words that gets read to the user, even if the image only consists of text. As a result, it's necessary for images to have short, descriptive
alt
text so screen reader users clearly understand the image's contents and purpose.For this case, since they are only icons and they are only decorative images, I recommend using an empty alt text
alt=""
. More infoMarked as helpful0 - @AGutierrezRPosted 11 months ago
Hello there 👋. Good job on completing the challenge!
I have some suggestions about your code that might interest you.
General Structure and HTML:
- Use a
<form>
and<input type="radio">
instead of using<div>
.
Accessibility and Semantic HTML:
- Use a
<form>
and<input type="radio">
instead of using<div>
, this is better for screen reader users.
I hope you find this helpful 😁. Most importantly, your submitted solution is fantastic!
Happy coding!
Marked as helpful0 - Use a
Please log in to post a comment
Log in with GitHubJoin 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