@MelvinAguilar
Posted
Hello there 👋. Good job on completing the challenge !
I have some suggestions about your code that might interest you.
HTML 📄:
- You must use a level-one heading (h1) even though this is not a full-page challenge. You can create an '<h1>' element within your 'main' element that will be hidden visually but visible and readable by screen readers. The class "sr-only" hides content visually and here are the styles to copy. e.g.:
<h1 class="sr-only">3-column preview card component</h1>
-
Not all images should have alt text. Car icons are for decoration purposes only, so they can be hidden from screen-readers by leaving its alt attribute empty.
You can read more about this here 📘.
-
The
<a>element is not supposed to be used inside a<button>element. The<a>element is used to create links that navigate to other pages or sections on the website, while the<button>element is used to create buttons that initiate an action or event on the page.Nesting an <a> element inside a <button> element can create confusion for screen readers, as it does not clearly define the purpose of the link. Also, the user could expect different behavior.
Use only the <a> tag.
I hope you find it useful! 😄
Happy coding!
Marked as helpful
@kevinwangombe
Posted
@MelvinAguilar Thanks for all that. I wanted to use the button tags only and instead, I used both button and anchor. Will try my best to make it better.Thanks so much.
