Responsive 3-Column Preview Card built with HTML & CSS

Community feedback

• 

  Bruce B•485

  @bbsmoothdev

  Posted over 1 year ago

  Hey, overall this is great. It looks exactly like the original.

  I agree, the image icons should have alt="" to hide them from screen reader users because they are purely decorative. Your heading structure looks good now (i.e. each type of car is an h2). Yes, you should switch to single column a little sooner. And I'm still seeing a card get taller than the others as I zoom in.

  A few accessibility issues:

  • The white text on orange background does not have enough contrast to meet minimum accessibility requirements. I understand if those are the colors the design asked for. I won't hold that against you. The designer is the one to blame. Just wanted to let you know that it wouldn't pass an accessibility audit.
  • Believe it or not, the white on lighter green in the middle card does not quite have enough contrast either. It's missing by a little, so it's a minor issue. Again, I won't hold that against you.
  • The "Learn More" links at the bottom are a common accessibility issue. A screen reader user can navigate by links only. In that case they will hear just "link Learn More" and won't know which car the link is for without having to do some extra work to figure it out. The best solution for this is to use visually hidden text to add the type of car after "Learn More" for each link:

  <button class="card-button">Learn More <span class="visually-hidden">about Sedans</span></button>
  

  The article The anatomy of visually-hidden has all the info you need on how to visually hide text using the visually-hidden class.

  00

  Marked as helpful
• 

  Marcos Travaglini•6,210

  @Blackpachamame

  Posted over 1 year ago

  Greetings! you have done a great job 😎

  📌 Some accessibility and semantics recommendations for your HTML

  • I can only mention an accessibility issue, you can add a short description to your image with the alt attribute. In case it is just a decorative image, such as an icon or logo, you can leave it empty: alt="". More info
  • Just because it looks bigger does not mean that this text is your main title
  • There can only be one h1 per page

  📌 Some suggestions

  • I'm not convinced that you have defined the media query at 375px, I think it should be a little higher, this would prevent it from looking bad on screens between 376px and 1050px
  • Also, you could have placed display: flex directly in the mobile version with a flex-direction: column, then just changed to flex-direction: row. You can also play around with flex-wrap: wrap although here you would have to make extra adjustments

  As for your question, I'm afraid not, at least for this case I can't think of a way to make each section have a different color without applying a different class to each one.

  00

  Marked as helpful