@0xabdulkhaliq
Posted
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
- I have other recommendations regarding your code that I believe will be of great interest to you.
HEADINGS ⚠️:
- This solution consists incorrect usage of
<h1>so it can cause severe accessibility errors due to lack of level-one headings<h1>
- You have added a
h1but unfortunately you have addeddisplay: noneinline style to that.
- By adding
display: nonetheh1is completely hidden for both visual & visually impaired users. So the screen readers can't able to identify theh1.
- Eventhough you added it, but it's potential is not been used instead of adding
display: noneyou want to addsr-onlyclass which are set of style rules that made for screen reader only contents
- Here's the style rules for
sr-onlyclass
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border-width: 0;
}
- And another thing is that we want to convey what page they are visiting so here the text
Choose Your Vehiclecan't define component itself, So you can better use Example:3-column preview card component
- If you have any questions or need further clarification, you can always check out
my submissionfor this challenge where i used this technique and feel free to reach out to me.
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
Marked as helpful
@kevinx9000
Posted
@0xAbdulKhalid Thank you for your feedback! I had forgotten to come back to that h1 issue. The reasoning behind it was that I felt the car categories of Sedans, SUVS, and Luxury should be headings, but that it didn't make sense to make them all h1 since there should only be one of those on a page. So I felt the need to make them each h2, but then there wouldn't be an h1 on the page to lead from and I felt I would get an HTML issue/notification for that in my code. So in the end, it probably wasn't the smartest decision. But for the sake of building a component instead of an actual page (even though it's built and submitted as a full web page), I should probably simply remove the h1 code entirely and keep the h2 tags as is, since it is just a component and not a functional web page anyway. Thank you again for taking a look and for your feedback!
