Cards

A card is a container that groups related information and actions about a single subject into a compact block. It usually contains a call-to-action element, like a button or a link. Cards are typically presented in grids or lists to display multiple items at once in an easily scannable layout.

Cards can be used to present a collection of similar items where each item has a consistent set of details that can be scanned at a glance. They are less suitable for displaying long-form content or complex data, where a list or table communicates the structure more clearly.

Accessibility Features

  • Off-screen cards in a scrollable list must scroll into view automatically when they (or the buttons and links inside them) receive screen reader or keyboard focus.
  • The card itself must not be a button or a link. If the entire card should be clickable, the call-to-action element's click area can be extended to cover the full card using a ::before pseudo-element.
  • aria-labelledby combines the call-to-action's own label with the card heading. This ensures a unique name for screen readers in case there are multiple cards with identical call-to-actions.
  • Left and right buttons must be provided to allow pointer users to navigate between cards without path-based gestures like swiping. aria-hidden="true" and tabindex="-1" hide these buttons from screen readers and the keyboard.
  • role="group" and aria-roledescription="card" identify the card as a distinct unit for screen readers, with aria-labelledby pointing to the heading.
  • The card heading should be the first element in DOM order so that screen reader users associate the related content with it.
  • A skip link before the card list lets keyboard users bypass all cards and jump directly to the content that follows.

Example

Code Snippet