Card List

A structured group of cards presented in a vertical or grid layout, where each card links to a detail view with a single keyboard-accessible link and a large clickable surface.

Demo

Tab through the card list and observe that each card contributes exactly one stop to the tab order. Notice how the list structure communicates the number of items to screen reader users, and how each card's link is labeled distinctly from the others.

What to Observe

• The list container communicates the total number of cards to screen reader users
• Each card contributes a single focusable element, keeping the tab sequence efficient
• Every card's link is uniquely and descriptively labeled — no two cards share the same accessible name
• The visual grouping of cards into a list is reflected semantically in the markup
• Keyboard focus order follows the visual reading order of the cards

Anatomy

[Anatomy image placeholder — will be added when assets are available]

1. List Container — a semantic list element that groups all cards and communicates their count and relationship to screen readers
2. List Item — the wrapper for each individual card within the list, establishing it as a discrete member of the group
3. Card — the individual content unit containing an image, title, description, and a primary link that covers the full card surface
4. Primary Link — the single interactive element per card, with a descriptive accessible name that identifies the card's destination uniquely within the list
5. Section Heading — an optional heading above the card list that names the collection and helps users navigate to it by landmark or heading

Accessibility Behavior

• Use a semantic list element to wrap the collection of cards so assistive technology communicates the total item count and list structure
• Ensure each card has exactly one keyboard-reachable link so users can move through the list efficiently without encountering redundant tab stops
• Give each card's link a unique and descriptive accessible name that identifies its specific destination within the list
• Maintain a focus order that matches the visual layout so keyboard users and sighted users encounter cards in the same sequence
• Ensure the list is preceded by a heading or label that gives context for what the card collection represents
• Handle card images as decorative when the card title already conveys the card's subject, to avoid redundant announcements

Common Mistakes

• Using a div container instead of a semantic list, causing screen readers to miss the item count and grouping information
• Giving all cards the same link text such as "Read more," making it impossible for screen reader users to distinguish between items when navigating by links
• Including multiple links per card that all point to the same destination, requiring extra tab stops for no informational benefit
• Placing interactive elements inside the card in a DOM order that does not match the visual layout, creating a confusing focus sequence
• Omitting a heading or label for the card list, leaving users without context for what the collection represents

Why This Matters

A card list is a collection, and collections carry meaning for screen reader users — the item count tells them how much content to expect, the list structure tells them they can navigate item by item, and unique link names tell them what each item leads to. When these structural and naming conventions are absent, screen reader users must listen to or read through every card's full content to understand what is available, rather than scanning efficiently by links. For keyboard users, redundant links and mismatched DOM order can make navigating a card list exhausting. Getting the structure right respects all users' time and effort.

Accessibility Validation

This component is validated against internal accessibility criteria aligned with WCAG standards, using our internally developed system, Resonance Specs.

To learn more, please contact us.

Code

Reference Implementation

• Back to Home
• GitHub Code