Figure 1 Example of 3 side-by-side Card widgets consisting of heading, image, text information and link.

Cards are widgets consisting of different types of objects:

  • Images
  • Text
  • List groups
  • Links, and more.

Although they look like physical cards, they can come in a variety of shapes and sizes.

The key advantage of using a card widget on the website are:

  • Well suited for mobile layouts along with the desktop layouts.
  • Typically provides a clickable or tappable area that is large enough.
  • Simplifies the layout by maintaining the consistency of stacking the content.


  • New to accessibility or uncertain of requirements, it will be helpful to review all sections below.
  • Already familiar with requirements, skip to the “Working Example” section for sample HTML, CSS and JavaScript (when needed), along with a working demo.