Design comparison
Solution retrospective
Looking to improve the accessibility of my sites if anyone has any thoughts or tips - thanks!
Community feedback
- @vanzasetiaPosted about 3 years ago
👋Hi Frances!
👍 Good job on completing this challenge! Your solution looks good on both portrait and landscape for mobile view 🙌. It's also great that you care about accessibility.
Some feedback:
- Use CSS background image instead of HTML
img
markup. - I recommend to use
ul
for the parent element of each rate item star. - The
Rated 5 Stars...
should not be a heading. I recommend to usestrong
tag instead. - The person name and the verified buyer should be paragraph elements not heading.
- For the testimonial quote, I recommend to use
blockquote
for more semantic HTML. - I recommend to put your
attribution
outside themain
tag and swap thediv
withfooter
tag. - I recommend to always set all elements
box-sizing: border-box
as your common reset. It will make sure that those elements don't add additional size when you addpadding
. - Use
rem
or sometimesem
unit instead ofpx
. Usingpx
will not allow the user to control the size of your page. This is important for accessibility 😉.
That's it! Hopefully this is helpful!
Marked as helpful2@frances-mPosted about 3 years agoThank you so much, @vanzasetia ! These are such great recommendations, I truly appreciate you taking the time to look through my code! Your explanations of the importance and implementation of your suggestions are so concise and well written, it's impressive!
I'll get to work on making these changes, thanks again!
1 - Use CSS background image instead of HTML
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