Cards are just a visual box of content

  • The card box itself has no particular semantic meaning
  • Do not focus the entire card, just the interactive portions.
    • If focus lands on the entire card, it will be difficult for people using a screen reader to understand the content inside.

Cards must have a meaningful heading structure

Card testing criteria

Design

Card box design criteria

Base your design on WCAG's POUR principles or design experiences by disability

Web

Web card box criteria

Based on WCAG success criteria, you can define your accessibility criteria for cards on the Web

iOS

iOS card box criteria

Based on Apple's Human Interface Guidelines, you can define your accessibility criteria for cards on iOS apps

Android

Android card box criteria

Based on Google's Material design, you can define your accessibility criteria for cards on Android devices

Bad examples

These cards ignore logical headings and do not thoughtfully structure content in a meaningful way.

Card bad examples

Design

Card box design criteria

Card uses "Design" as a heading while the meaningful title is just a link, meaning a screen reader won't be able to locate this with shortcuts.

Web Web card box criteria

Card uses no headings, meaning the screen reader user won't be able to locate this with shortcuts, and must read the entire card to guess at the meaning.

iOS

iOS card box criteria

Card uses h1 around the title, which is reserved for the main page title, meaning the page structure makes no sense to a screen reader user.

Android

Android card box criteria

Entire card is wrapped in a link, meaning some screen readers like NVDA will read the entire card before disclosing it's an actionable link.

Related card box entries