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.

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 

<h2>
  Card testing criteria
</h2>

<div class="cards">
  <div class="card interactive">
    <div class="card-content">
      <a class="category" href="/design/">Design</a>
      <h3>
        <a class="title" href="/accessible-design/card/">Card box design criteria</a>
      </h3>
      <p>
        Base your design on WCAG's POUR principles or design experiences by disability
      </p>
    </div>
  </div>


  <div class="card interactive">
    <div class="card-content">
      <a class="category" href="/web/">Web</a>
      <h3>
        <a class="title" href="/accessible-web/card/">Web card box criteria</a>
      </h3>
      <p>
        Based on WCAG success criteria, you can define your accessibility criteria for cards on the Web
      </p>
    </div>
  </div>

  <div class="card interactive">
    <div class="card-content">
      <a class="category" href="/ios/">iOS</a>
      <h3>
        <a class="title" href="/accessible-ios/card/">iOS card box criteria</a>
      </h3>
      <p>
        Based on Apple's Human Interface Guidelines, you can define your accessibility criteria for cards on iOS apps
      </p>
    </div>
  </div>

  <div class="card interactive">
    <div class="card-content">
      <a class="category" href="/android/">Android</a>
      <h3>
        <a class="title" href="/accessible-android/card/">Android card box criteria</a>
      </h3>
      <p>
        Based on Google's Material design, you can define your accessibility criteria for cards on Android devices
      </p>
    </div>
  </div>

</div>

Related card box entries