• Success Criterion 2.4.4
  • Conformance level A

Card Component Link With No Accessible Name of Its Own

2.4.4 — Link Purpose (In Context)

Scenario

Setting

A community forum's discussion thread

What’s wrong

Card patterns where the clickable area's name is empty and the visible title is a sibling not referenced.

Example 

<a href="/thread/482" class="card-link"></a>
<div class="card-content">
  <h3>Best hiking trails near Denver?</h3>
  <p>12 replies, last post 2h ago</p>
</div>

Why it matters

A screen reader announces an empty, nameless link before the actual thread title, so the user can't tell what thread it opens.

How to test

Inspect a clickable card component in DevTools: if the wrapping link/element has no accessible name and the visible title is a sibling not referenced by it, it fails.

How to fix

aria-labelledby lets a full-card link borrow its name from the visible heading without duplicating text.

<a href="/thread/482" class="card-link" aria-labelledby="thread-482-title"></a>
<div class="card-content">
  <h3 id="thread-482-title">Best hiking trails near Denver?</h3>
  <p>12 replies, last post 2h ago</p>
</div>

Outcome

A user browsing threads hears Best hiking trails near Denver announced directly on the link.

Who is affected

Screen reader users browsing forum threads hit blank links and must guess or backtrack to find the topic.

Learn more

Related scenarios