stats-preview-card

Community feedback

• 

  Ahmed Bayoumi•6,740

  @Bayoumi-devPosted over 2 years ago

  Hey! It looks good!... You have some accessibility issues that need to fix.

  • Document should have one main landmark, Contain the component with <main>.

  <main>
     <section class="card">
        //...
     </section>
  </main>
  

  • Heading levels should only increase by one, Use h2 instead of h3... 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

  0