Design comparison
Community feedback
- @0xabdulkhaliqPosted 8 months ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
- I have a suggestion regarding your code that I believe will be of great interest to you.
IMPROPER USAGE OF ALT 📸:
- The alt text "a black girl" is somewhat vague and not descriptive enough.
- It fails to adequately convey the content or purpose of the image, which is essential for accessibility and user experience.
- A more appropriate alt text could describe the specific content or function of the avatar, such as "Jessica's profile picture for social media" or "Avatar representing Jessica for social link." This would provide clearer information to users who rely on screen readers or encounter image loading issues.
- The
alt
attribute should explain the purpose of theimage
, in our case the image is a portrait of Jessica. So alt with her name itself is enough.
- E.g.
alt="Jessica"
<img class="profile-picture" src="avatar-jessica.jpeg" alt="Jessica">
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
Marked as helpful0@ThinYuShwePosted 8 months ago@0xabdulkhalid Thank you! The way you suggested is a great way to describe the image, rather than "a black girl". I will keep that in mind!
0@0xabdulkhaliqPosted 8 months agoOops @ThinYuShwe, I forget to state another important thing. That is the usage of
div
forbutton
like elements.Actually using
div
for creating button like feel using css is not a best practice, becausediv
element itself have no accessible standards (they are not semantic elements).We want to use Semantic elements like
a
,button
for that. In our case we want to usea
elements withhref
attributes so that whenever the visitor clicks any links he/she will be navigated to that corresponding page.We can easily style our
a
elements using css just like you did for plaindiv
elements.Using
a
tag will gradually improve your solution's accessibility grades.For example:
<a href="#">Github</a>
Note: before styling
a
elements you want to addall: unset
css rule on top of other rules. So that default styles will be removed otherwise some weird things will happenExample:
a { all: unset; /* Other styles */ }
We provided
#
forhref
instead of real link because the person Jessica is just for illustration purposes if he/she are real then we can add their real links!I hope this suggestion will helps you in building accessible solutions, look forward to know your thoughts regarding this one!
Marked as helpful0@ThinYuShwePosted 8 months ago@0xabdulkhalid True, I should use the "a" element since they are for link navigation. I will fix that in my code. Thank you for taking your time to review my code!
0
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