Accessibility

Accessible card requirements

Keep these considerations in mind if you are modifying the Design System or creating a custom component.

Best practice

Card lists

To improve accessibly, use unordered lists and list items. Each card should be contained in an <li> element within a <ul> element. This allows screen readers to read the items in the card group and enables shortcuts between list items.

Card links

Having an anchor tag wrapping these contents has the benefit of having a large click area. A user is able to click anywhere in this card and view the full article or blog post.

However this can cause difficulties for screen readers. When a screen reader user focuses on this anchor tag, the entire contents of the card are read out. This can be a frustrating experience, particularly when there is a lot of content inside the cards. Furthermore when there is a large amount of cards (wrapped by anchors) on a single page, the links landmark menu of screen readers can get extremely convoluted.

Given this, the alternative is to have a single anchor tag inside the card, and have the hit area of this anchor tag wrap the card. This approach yields the benefits of having a large click area, but avoids issues for screen readers.

WCAG guidelines

1.1.1 Non-Text Content

Provide alternatives for any non-text content so it can be changed into other forms, like large text, braille, speech, symbols, or simpler language (W3C, 2018). This includes images, icons, etc. contained in the card. Use alt tags for images.

Background image example:

<div class="qld__responsive-media-img--bg" role="img" aria-label="Description of image"></div>

Standard image element example:

<img src="card_image.jpg" alt="Description of image">

1.3.2 Meaningful Sequence

When a sequence affects the meaning, it must be determined programmatically or available in text (W3C, 2018). This means the order of elements within the card should make sense when read by a screen reader. Make sure to use the appropriate heading level for your page to ensure card headings are in the correct order.

1.4.3 Contrast (Minimum)

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1 (W3C, 2018). Check text-colour to background-colour contrast.

2.1.1 Keyboard

All content should be operable through a keyboard interface, without needing specific timings for individual keystrokes (W3C, 2018). This includes all interactive elements within the card.

2.4.4 Link Purpose (In Context)

The purpose of each link should be clear from the link text or its context (W3C, 2018). If links are present, their purpose should be understandable.