my solution

Community feedback

• Account deleted

  Hello Coder 😊

  Your solutions is just fabulous

  I have a small suggestion for you regarding <h1> tags

  <h1> tag :

  It is mandatory to use a <h1> tag in your solution because <h1> tag is most important aspect in accessibility and it helps screen reader to navigate with your page in easy way

  And H1 tags also help Google to understand the structure of a page. So if you're using H1s as Google recommends for your page title or content heading, your H1 is effectively telling Google “here's what my page is about.

  In this solution you can use <h1> tag with .sr_only class

  Like in HTML

  <h1 class="sr_only"> 3 column preview card component </h1>
  

  CSS :

  .sr_only:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  }
  

  Now you have a <h1> tag for screen readers and it is visually hidden from screen

  Hope that will be helpful

  0