Card

A contained surface that groups related content — such as a title, description, and call to action — into a single clickable unit without nesting multiple interactive elements.

Demo

Tab to the card and activate it with Enter. Observe that a single link is reachable per card, that the link's accessible name reflects the card's content, and that no other interactive elements inside the card interrupt the tab order unexpectedly.

Featured

Building an export plan

New to international trade? Explore the basics with Exporting 101 and start building your plan today.

Step-by-step guidance
Market research tools
Free consultation included

What to Observe

Exactly one focusable element per card is reachable by keyboard — the primary link
The link's accessible name is descriptive enough to identify the card's destination without surrounding context
The card image is either described through the link text or hidden from assistive technology if it is purely decorative
The clickable surface area is large without requiring multiple redundant links to the same destination
Visual hover and focus states are distinct and clearly communicate the card's interactive nature

Anatomy

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

Card Container — the wrapping element that visually groups the card's content and provides position context for the full-surface link overlay
Card Image — an optional visual element at the top of the card; decorative images are hidden from assistive technology, while meaningful images carry descriptive alternative text
Card Title — a heading or prominently styled text that names the card's subject and provides the primary accessible name for the card's link
Card Description — supporting text that gives additional context about the card's content or destination
Primary Link — the anchor element whose stretched or overlaid click target covers the full card surface, providing a large interaction area without nesting multiple links

Accessibility Behavior

Ensure the card has exactly one focusable element reachable by keyboard — typically the primary link — so keyboard users do not encounter multiple redundant paths to the same destination
Give the primary link an accessible name that is descriptive on its own, without requiring the surrounding card content to provide context
Use a CSS overlay or stretching technique to expand the link's click target to the full card surface, rather than wrapping all card content inside an anchor element
Mark decorative card images with empty alternative text so assistive technology does not announce them as part of the card's content
Ensure the card's focus indicator is visible and clearly indicates that the card surface is interactive

Common Mistakes

Wrapping the entire card in an anchor element, which causes screen readers to announce all card content as part of the link text and produces an overwhelming announcement
Including multiple links inside a card pointing to the same destination, creating redundant tab stops that slow down keyboard navigation
Using a generic link label such as "Read more" or "Learn more" that provides no indication of the destination without the surrounding visual context
Omitting alternative text on meaningful card images, leaving screen reader users without the visual information the image conveys
Making the card clickable via JavaScript on the container div without providing a keyboard-operable link inside it

Why This Matters

Cards are ubiquitous in modern interfaces — article listings, product grids, resource libraries — yet they are routinely implemented in ways that create barriers. Wrapping an entire card in an anchor causes screen readers to read every line of content as one long link. Multiple redundant links force keyboard users to tab through unnecessary stops. Vague link text like "Read more" is meaningless when encountered in a links list. The card pattern requires deliberate decisions about link structure, accessible names, and image handling to work equally well for all users.

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.