Ahmed Bayoumi• 6,740
@Bayoumi-dev
Posted
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
, Useh2
instead ofh3
...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 moresemantics
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