Cards

Understand how to create and test for accessible cards.

What are cards?

A ‘card’ (sometimes called a ‘tile’) is an interactive component that usually combines:

Typically, the card as a whole acts as a single link or button. Sometimes a card includes other links or buttons.

A card is almost always one in a set of cards.

Example of a card

Screenshot of a card containing an image followed by a linked heading and a paragraph of text.

Card for the New Zealand Government’s SmartStart service for people having or raising babies.

Make a card accessible

For information on how to design and develop accessible cards, see:

Put cards in a list

If there is more than 1 card, use a list to semantically group the cards. If there’s an important and meaningful order to the cards, use an ordered list (<ol>). Otherwise, use an unordered list (<ul>). This gives screen reader users more information about the structure of the content, such as how many cards are in the list.

Meeting the Web Accessibility Standard

When a set of related cards is marked up as a list (<ul> or <ol> as appropriate), this meets WCAG 2 Success Criterion 1.3.1 Info and Relationships (Level A).

Making the whole card interactive

Typically, a card’s title or heading is marked up as a link, or a button, but the entire surface area of the card is made clickable. The best way to achieve this is to use CSS to expand a link or button’s hitbox across the entire surface area of the card. For more on this approach, see:

Developers might be tempted to wrap the entire card in a link or button, but this can cause accessibility issues, because the link or button’s accessible name will include all the text (and text alternatives) in the card as one long text string. Depending on the card, this could result in overly verbose and confusing output for screen reader users.

Provide visible focus indicators

If a card acts as a single clickable component, make sure that it has a clearly visible keyboard focus indicator. For some ideas on how to approach this, see Affordance — Cards — Heydon Pickering.

Meeting the Web Accessibility Standard

When a card includes or is used as a link or button, and the link or button has a visible focus indicator, this meets WCAG 2 Success Criterion 2.4.7 Focus Visible (Level A).

Provide text alternatives for images where required

Cards often contain an image. If the image is decorative, make sure that the <img> element has an empty alt attribute (alt=""). If the image contributes meaning to the card, make sure that the <img> element has an alt attribute with an appropriate text alternative.

Meeting the Web Accessibility Standard

When an image in a card has a suitable text alternative, this meets WCAG 2 Success Criterion 1.1.1 Non-text Content (Level A).

Using a heading for the card title

Depending on the content that a set of cards presents, and the content in each card, it might be reasonable to put the card’s title inside a heading element (<h1>–<h6>). Otherwise, a prominently displayed paragraph (<p>) is sufficient for marking up a card’s title.

Meeting the Web Accessibility Standard

If a card includes a heading element (<h1>–<h6>), and the heading and its level match the card’s content and position in the page’s heading hierarchy as visually displayed, this meets WCAG 2 Success Criterion 1.3.1 Info and Relationships (Level A).

Place the image after the heading

Headings introduce the content that comes after them. If a card has an image and a heading, and the image comes before the heading in the HTML markup, then the heading will not be introducing the image, and the image’s context is lost. This is not important if the image is decorative and has an empty alt attribute. But if the image is meaningful, its context comes from the card’s heading, and so the image needs to come after the heading in the markup.

At the same time, cards are usually presented visually with the image above the heading. To enable this visual presentation while maintaining the correct source order in the markup so that the heading comes before the image, use the CSS Flexbox order property to visually reorder the elements.

For more on how to use the order property in this way, see:

Meeting the Web Accessibility Standard

If a card includes an image (<img>) and an associated heading (<h1>–<h6>), placing the image after the heading in the HTML markup meets WCAG 2 Success Criterion 1.3.1 Info and Relationships (Level A).

To visually position the image before or above the heading, use the CSS order property as described above.

Depending on the card, it can sometimes make sense to include other links or buttons in addition to the card’s primary link or button. Be mindful of overloading the card with multiple interactive components, as this adds items to the focus order, forcing keyboard users to press the Tab key several times to advance to the next card.

For some guidance on adding extra links or buttons to a card, see:

Testing cards