3-column preview card component (HTML + CSS)

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted almost 2 years ago

  Hello, Ahmed! 👋

  Congratulations on finishing this challenge! 🎉

  I have some suggestions to improve this solution.

  • Replace all the h1 with h2. There should not be more than one h1 on a page. Many h1 mean many titles which can confuse the users, especially the screen reader users.
  • Learn more — How-to: Accessible heading structure - The A11Y Project
  • All the car icons are decorative images. They should not have alternative text (alt=""). This will tell the screen reader to skip over the image. As a result, it saves screen reader users time navigating the page.
  • For your information, decorative images are images that don't need to exist on the page. They don't add any information and serve only aesthetic purposes.

  I notice there is --font-size: 15px; custom property that is not used. You may want to remove it. As a side note, avoid using px unit for font sizes. Use rem or em instead. Relative units such as rem and em can adapt when the users change the browser's font size setting.

  Learn more — The Surprising Truth About Pixels and Accessibility: should I use pixels or rems?

  I hope this helps. Happy coding!

  Marked as helpful

  1

  ---

  

  Ahmed Arafa•120

  @nerdy-guyPosted almost 2 years ago

  @vanzasetia Thank you so much for the detailed feedback. Regarding h2, can I use them without h1? Or should I make the first one h1 and the other two h2?

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted almost 2 years ago

  @nerdy-guy

  You are welcome!

  Use h2 without h1.

  If you generate a new report this will give you an error or warning because there is no h1. In this case, it is fine. The site is not a full website, it is a component.

  Marked as helpful

  1