stats-preview-card-component-main using react.js&tailwindcss

Community feedback

• 

  Ahmed Bayoumi•6,740

  @Bayoumi-devPosted over 2 years ago

  Hey Mohamed, It looks good!... you have some accessibility issues that need to fix.

  • Document should have one main landmark, Contain the component with <main>.
  • Page should contain a level-one heading, Change h2 to h1 You should always have one h1 per page of the document.
  • Heading levels should only increase by one, Use h2 instead of h4... Ordered headings make it easier to navigate and understand when using assistive technologies.
  • I suggest you put the status of the preview card component into the list item to add more semantics to your project, Div's don't do much for semantics but a list is much more meaningful..:

  <ul class="stats-preview__stats">
     <li>
        <span class="stat-number">10K+</span>
        <span class="stat-name">Companies</span>
     </li>
     <li>
        <span class="stat-number">314</span>
        <span class="stat-name">Templates</span>
     </li>
     <li>
        <span class="stat-number">12M+</span>
        <span class="stat-name">Queries</span>
     </li>
  </ul>
  

  I hope this is useful to you... Keep coding👍

  Marked as helpful

  1