Interactive Card

How it works

A card groups related content so it has to be tagged by using the HTML tag article.

A simple interactive card has one interactive element with a single purpose: a link stretched over the card with a ::after of position: absolute and inset: 0. It has one tab stop, and focusing it highlights the whole card. Use it for blog and news teasers, category tiles, team member cards and promo cards with one call to action.

A complex interactive card has two or more controls, each with its own purpose. They are siblings not nested and each interactive element has atab stop. It may have a stretched link only if it has one clear destination, such as the product page. It must not have one when it has two calls to action (“Start trial” and “Compare features”) or contains swatches, a quantity stepper or inline links.

Avoid

• tabindex="0" or onclick on the article. It fails 2.1.1 Keyboard and 4.1.2 Name, Role, Value.
• Wrapping the whole card in a link that holds other interactive elements. It is invalid HTML, and the click bubbles, so “Add to cart” also leaves the page.
• A div with role="button" as a card. A button cannot semantically be a group container.

Screen readers

• The article is announced with its accessible name, then the heading with the primary link, then the description, then the other actions.

WCAG 2.2

• 1.3.1 Info and Relationships (A): every card is an article named by its heading through aria-labelledby.
• 2.1.1 Keyboard (A): every action is a native a or button.
• 2.4.3 Focus Order (A): tab order follows the DOM and the stretched link adds no extra stop.
• 2.4.4 Link Purpose in Context (A): link text is clear next to the heading.
• 2.4.7 Focus Visible (AA): the whole card is outlined through :has(:focus-visible).
• 4.1.2 Name, Role, Value (A): native elements, and aria-pressed on a save toggle.