Loading...
Loading content...
Loading content...
Comprehensive guide to creating accessible card components with proper heading hierarchy and keyboard support.
Users often navigate by headings (H key). If a card's title isn't a heading, it's invisible to this navigation mode. If it skips levels (H2 to H4), it confuses the document structure.
A card with an image link, a title link, and a "Read More" link pointing to the same place forces keyboard users to tab three times for one operational item.
<h2>, <h3>, etc.) appropriate to the page structure. Use semantic HTML elements and ensure the card content is readable in a logical order. If the card is clickable, use a link or button, not a div with onClick.Testing Guide
This is a semantic card with proper heading structure and accessible content.
When a card is clickable, wrap it in a link or button element, not just a div with onClick.
Using generic divs for cards makes content difficult to navigate and understand.
No semantic value. Screen readers treat it as plain text.
<div className="card">
<div className="title">Title</div>
<div>Description...</div>
</div>Article role and Heading structure provide context and navigation points.
<article className="card">
<h3>Title</h3>
<p>Description...</p>
</article>Linking the image, title, and 'read more' separately creates a noisy experience.
Keyboard user tabs 3 times for the same destination.
<a href="/post"><img ... /></a>
<h3><a href="/post">Title</a></h3>
<a href="/post">Read more</a>Single link covers the whole card (via CSS) -> single tab stop.
<div className="card relative">
<img ... />
<h3><a href="/post" className="after:absolute after:inset-0">Title</a></h3>
<p>Read more</p>
</div>