@0xabdulkhaliq
Posted
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
altattribute 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 helpful
@ThinYuShwe
Posted
@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!
@0xabdulkhaliq
Posted
Oops @ThinYuShwe, I forget to state another important thing. That is the usage of div for button like elements.
Actually using div for creating button like feel using css is not a best practice, because div 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 use a elements with href 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 plain div 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 add all: unset css rule on top of other rules. So that default styles will be removed otherwise some weird things will happen
Example:
a {
all: unset;
/* Other styles */
}
We provided # for href 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 helpful
@ThinYuShwe
Posted
@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!
