Design comparison
Community feedback
- @correlucasPosted about 2 years ago
πΎHello Mahdi, congratulations for your new solution!
I saw your solution and also your Github, good stuff there.
Your solution is really complete, the media queries are correct, the content is super responsive. Its all fine.
To improve it a little bit you can replace the divs with semantic tags. For example each card you can use
<article>
and for the profile text quote you can use<blockquote>
.Keep it up!
π I hope this helps you and happy coding!
Marked as helpful1@MahdiSohailyPosted about 2 years ago@correlucas thanks for your feedback. I will consider those in the next challenges.
1 - @azhar1038Posted about 2 years ago
Hi Mahdi, Great work there!
I noticed some accessibility issue in your solution.
- Unnecessary use of
header
. I don't think you should use header in those cards. They are more like quotes so maybe just simple hn tag should be sufficient. And you can useblockquote
tag too instead ofdiv
for those cards too. - The star images are just decorative, so just hide them from screen readers using
aria-hidden
. I will suggest to also hide the avatar images.
If you are using chrome, I will suggest to turn on Accessibility Tree view. It can really help to visualize how screen readers will see your content.
Marked as helpful1@MahdiSohailyPosted about 2 years ago@azhar1038 thanks for your feedback. I have to read more about accessibility. I will consider the mentioned issues in future challenges.
0 - Unnecessary use of
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