Accessible Implementation Patterns for Card Components

Card components are commonly used in article lists and similar layouts. While their appearance is simple, implementing them with accessibility in mind reveals surprisingly deep design considerations.

Consider a typical card layout with, from top to bottom:

• Image
• Article title
• Article summary
• Details link

and explore implementation patterns using this vertical stack layout.

Key design considerations

1. Visual order and HTML structure

Screen readers essentially read content in the order of HTML markup. WCAG 2.0's Success Criterion 1.3.2 (Meaningful Sequence, Level A) establishes that visual order and HTML order should be aligned as a fundamental principle.

However, changing the order with CSS alone does not constitute a WCAG violation. If content remains understandable despite a difference between visual and HTML order, there is no problem. Flexible judgment based on context is important.

2. Handling images

Article card images are often decorative. When an article title is present, content is sufficiently conveyed, so the need to have screen readers announce image descriptions is low.

When treating an image as decorative, alt="" alone is sufficient.

<img src="thumbnail.jpg" alt="">

3. Detail link labels

Generic text like "See details" should be avoided for these reasons:

Visual problem

Without surrounding context, it is impossible to determine what the link refers to

Screen reader issue

When displaying items with the link list feature, all items show "View details," making them indistinguishable

Voice recognition issues

When multiple identical text strings exist, you need to select by number, making the operation cumbersome.

Ideally, link text should be self-contained and convey its purpose, such as "View details about ○○". However, this section covers how to implement a design where the link text reads "View details" alone.

4. Card clickable area

To improve UX, it's common to want the entire card to be clickable. There are multiple implementation approaches, each with different impacts on accessibility.

5. Should cards be article or div elements?

Which approach to choose depends on the nature of your content.

When is appropriate:

• Card content functions as standalone, independent content

If is acceptable:

• Functions as a simple group of links
• The card has no independent semantic meaning

For typical blog post lists and product listings, is appropriate. However, when using multiple elements, it is recommended to use aria-labelledby or aria-label to identify each article, taking into account landmark navigation in screen readers (WCAG 2.4.6, Level AA).

When using aria-labelledby, ensure that IDs are unique values.

Visual order and HTML structure

Pattern 1: Align visual order with HTML order

<article class="article-card" aria-labelledby="article-title">
  <img src="thumbnail.jpg" alt="">
  <h3 id="article-title"><a href="#" class="card-link">記事タイトル</a></h3>
  <p>記事の概要...</p>
  <a href="#" class="card-detail-link">
	  <span class="visually-hidden">記事タイトル:</span>詳細を見る
  </a>
</article>

Since the HTML markup order matches the visual order exactly, it is simple and intuitive.

Note: While it is recommended that the first element of be a heading, it is not an absolute requirement. If prioritizing alignment with visual order, this pattern is acceptable.

Additional notes:

Voice recognition software (Dragon, Voice Control, etc.) operates based on the text displayed on the screen. By using visually-hidden (sr-only), visual text is preserved and voice recognition control becomes possible. Below are implementation examples showing both OK and NG patterns for link label handling.

<!-- 以下は可視テキストがアクセシブルな名前に含まれているのでOK -->
<a href="#" id="link-text" class="card-detail-link" aria-labelledby="link-text article-title">
  詳細を見る
</a>
<a href="#" aria-label="詳細を見る：記事タイトル">
  詳細を見る
</a>
<!-- 以下は可視テキストがアクセシブルな名前に含まれていないのでNG -->
<a href="#" class="card-detail-link" aria-labelledby="article-title">
  詳細を見る
</a>
<a href="#" class="card-detail-link" aria-label="記事タイトル">
  詳細を見る
</a>

Pattern 2: Adjust visual order with CSS order

<article class="article-card" aria-labelledby="article-title">
  <h3 id="article-title"><a href="#">記事タイトル</a></h3>
  <p>記事の概要...</p>
  <a href="#" class="card-detail-link">
	  <span class="visually-hidden">記事タイトル:</span>詳細を見る
  </a>
  <img src="thumbnail.jpg" alt="">
</article>

.article-card {
  display: flex;
  flex-direction: column;
}

.article-card img {
  order: -1;
}

Because the first element within becomes the heading, this structure is semantically more desirable.

For decorative images (alt=""), there is no impact on reading order (images are skipped).

Note:

• If the image has meaning and an alt attribute is specified, this structure is not suitable because the visual order and reading order will differ.
• Keyboard Tab order follows HTML order, so if there are multiple focusable elements within a card, verify that the focus sequence does not break the logical flow.

When you want the entire card to be clickable

Pattern 3: Make the entire card clickable with pseudo-elements

In this method, the pseudo-element of the title link covers the entire card, and "See details" becomes visual decoration as a .

Leaving "See details" as even with tabindex="-1" or aria-hidden="true" will still create noise in screen reader link lists and element navigation mode, so converting it to is the better approach.

<article class="article-card" aria-labelledby="article-title">
  <img src="thumbnail.jpg" alt="">
  <h3 id="article-title"><a href="#" class="card-link">記事タイトル</a></h3>
  <p>記事の概要...</p>
  <span class="card-detail-link">詳細を見る</span>
</article>

.article-card {
  position: relative;
}

.card-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

.card-link:focus-visible {
  outline: none;
}

.card-link:focus-visible::after {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* カード内に複数のリンクがある場合の例 */
.article-card a:not(.card-link) {
  position: relative;
  z-index: 2;
}

Benefits:

• Maintain semantic structure
• Reads naturally with screen readers
• Place multiple links within a card (category, tag, author links, etc.)

Drawbacks:

• z-index management is required (though once set, it's not an issue)

Pattern 4: Wrap the entire card in

With this approach, since the entire card becomes a single link, "View details" naturally becomes a .

<article class="article-card" aria-labelledby="article-title">
  <a href="#" class="card-link">
    <img src="thumbnail.jpg" alt="">
    <h3 id="article-title">記事タイトル</h3>
    <p>記事の概要...</p>
    <span class="card-detail-link">詳細を見る</span>
  </a>
</article>

Benefits:

• Simple to implement
• Easy CSS adjustments

Drawbacks:

• Some screen readers may concatenate and read all text continuously (particularly with VoiceOver, it becomes "article title article summary... view details, link")
• Cannot place multiple links within a card

Sample patterns for each approach

Summary

There are multiple approaches to implementing accessible card components. What matters is that there is no single correct implementation pattern—the optimal solution changes depending on the situation.

When implementing, it is important to keep the following in mind.

1. Choose an implementation that doesn't burden actual users
2. Consider the image meaning, card purpose, and overall site structure
3. Prioritize practical and maintainable implementation