👋 Hello!
I think one thing that could be improved on is the heading levels. I'd view "Sedans", "SUVs" and "Luxury" as the same heading, but I also understand that we do not want multiple <h1>.
I think it would be better to declare a <h1> but set it for screen readers only (meaning not visible but screen reader would still pick it up), and keep "Sedans" as a <h2> with "SUVs" and "Luxury". E.g.
// CSS
.sr-only {
position: absolute;
top: auto;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap;
}
// HTML
<h1 class="sr-only">Learn more about our cars</h1>
...
<h2>Sedans</h2>
<h2>SUVs</h2>
<h2>Luxury</h2>
Another suggestion is that for images that are decorative, the alt should be alt="" instead of alt="#", or alternatively you could also set aria-hidden="true" to hide it from screen readers.
Some useful resources:
I hope this helps and happy coding~
Marked as helpful
Hi, @Milleus.
The page hierarchy was a big problem at my first solution. I checked some solutions and saw this code on some projects but I couldn't understand it so I didn't add the code.
In my second solution, I passed this problem, had limited energy so chose the easiest way and simple solution, wanted to focus on other problems but knew it wasn't a solution. Based on your feedback, I changed my code. It looks more professional right now. I'm also new to decorative images and I need to read your resources.
Thanks for your helpful comments.
