Stats preview card component using HTML and CSS

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 3 years ago

  👋 Hi Adrian Burgos!

  It's great 👍 that you care about accessibility. Let me help you with that:

  • For any decorative images, each img tag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technology such as screen readers or screen magnifiers ignore those images. In this case, all images are decorative only.
  • The stats number (10k+, 314, 12M+) should not be a heading. A tip to help you write better HTML markup is that think of it as a document file. Now, do you think those numbers should be a heading, if yes, it is a heading or title for what?
  • You should not uppercase the word inside the HTML unless you want them to be spelled letter by letter by assistive technology such as screen reader in this case. Use CSS instead.
  • Swap the section tag for the stats with ul and wrap each item with li, since in my opinion, it's too little to be a section.
  • Don't use id for styling. Use classes for styling instead. Using id for styling is known as bad practice since it will increase the specificity unnecessarily, which will make it hard to maintain, especially when you're doing a big project.
  • I would recommend using the BEM class naming convention. It's popular and in my opinion, it's easy to implement.
  • Don't limit the height of the body element, it will not allow the users to scroll the page if the page content needs more height. Use min-height instead. Right now on mobile view (360px * 640px) the card get cut off.

  That's it! Hopefully, this is helpful!

  Marked as helpful

  3
• 

  Adrian Burgos•60

  @adrianburgoscolasPosted about 3 years ago

  Thank you very much for your help, it's a great value for me as a beginner, going to fix it all right now

  0