Responsive 3 columns cards

Community feedback

• 

  Māris Ūdris•190

  @marisudrisPosted over 3 years ago

  Great solution! I concur with @darryncodes that you should try to use semantic elements as much as possible, i.e. changing attribution's tag to <footer> or enclosing it in one. As for the images - if they're purely decorative (as in this case) - leave the alt tag empty (alt="") - this has the same effect as tacking on aria-hidden="true" - assistive devices & screen-readers won't pick it up, and from what I've read - this is considered the canonical approach for "hiding" purely decorative images from assistive devices. Here's one resource on this topic: https://www.w3.org/WAI/tutorials/images/

  Marked as helpful

  1

  ---

  

  Camille Breillot•40

  @CamilleBreillotPosted over 3 years ago

  @marisudris thank you!!

  1
• 

  darryncodes•6,350

  @darryncodesPosted over 3 years ago

  Hi Camille,

  Excellent solution, really well done!

  You could consider designing mobile-first and using min-widths. I've linked an article that completely changed my approach - I hope you enjoy it!

  Secondly you could clear your accessibility report if you add alt-text to your images or aria-hidden="true" as those images could be deemed decorative. Here is some more info on aria-hidden. Also swap <div class="attribution"> with <footer class="attribution">, semantics is really important.

  Happy coding!

  Marked as helpful

  1

  ---

  

  Camille Breillot•40

  @CamilleBreillotPosted over 3 years ago

  @darryncodes thank you very much for your feedbacks! and thanks for the article it's very insightful :)

  0