Accessibility

A card is a visual grouping, not a widget: it has no role, keyboard behaviour or state of its own. Its accessibility comes from the markup inside it. Two patterns cover most cards: a card that holds its own links and buttons, and a card that is one link. A link card follows the WAI-ARIA Link pattern. The target is WCAG 2.1 AA.

For designers

• Text over media needs a layer. Text on a photo meets 1.4.3 Contrast (Minimum) only over a backdrop or scrim. Don’t rely on a dark photo.
• One destination or many, not both. A card that is one link can’t also hold buttons or other links. If it needs several actions, give each its own control.
• Keep link cards short. Everything inside a link card becomes the link’s name, read out in one go.
• Focus stays visible (2.4.7 Focus Visible). The ring sits outside the card, on the page background, so it holds on cards with media.

For developers

• <article> for self-contained cards. Use <article> when the card would make sense on its own, such as a story or an offer, and start it with a heading. Use a <div> when the card only groups part of a larger section. A list of cards can be a <ul> of cards (1.3.1 Info and Relationships).
• A link card is an <a class="tng-card">. The whole card is the target and its text is the link’s name (2.4.4 Link Purpose). Never nest other links or buttons inside it. The focus ring is built in.
• Decorative media gets alt="". Media behind the content is usually decoration. When it carries meaning, describe it in alt (1.1.1 Non-text Content).
• Hover zoom respects reduced motion. The media of a link card only zooms under prefers-reduced-motion: no-preference.