Four card feature section using CSS Grid

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted almost 2 years ago

  Hi, Pankaj! Happy new year too!

  Here are some suggestions for improvements.

  • Use visible heading instead of visually hidden heading. You can make "Reliable, efficient delivery powered by technology", as a <h1>.
  • Also, that text should be wrapped by one heading. It is a sentence.
  • Remove <h2 class="sr-only">Heading for section</h2>. There is no need to add visually hidden headings. (Try not to overthink accessibility.)
  • Setting display: none to .sr-only will hide the HTML element from everyone including assistive technologies. So, use the following styling instead for visually hidden class — Improved .sr-only
  • <section> and <article> have no semantic meanings unless you label them with aria-label or aria-labelledby. So, don't overuse them. You can replace them with <div> instead. Source: WebAIM: HTML Semantics and Accessibility Cheat Sheet

  I hope this helps. Happy coding too!

  Marked as helpful

  1