Intelligence Community Design System

Interactive and static cards inherit the accessibility features of the components within the card. Clickable cards act as links, and therefore inherit the accessibility features of links.

Screen readers should always read the heading first, even when an image is placed at the top of the card. To achieve this, we've re-ordered content using CSS Flexbox layout so that visually the image appears first but is placed after the heading section in HTML.

The container of interactive and static cards is not clickable, and therefore is not focusable. When navigating within the page, the focus switches between the different interactive components of the card.

In the case of clickable cards, since the whole area is interactive, then the whole container is focusable.

Clickable cards inherit the accessibility features of the link style, using an<a href=""> to wrap the whole component.

Provide as much detail as possible to the purpose of any link or button present within interactive cards, or to the action of a clickable card. If you can't show this within the component, use theclass=”visuallyhidden” to add descriptive text about the purpose of the call to action(s).

When cards are arranged in group, these should be placed within an unordered list<ul> , with each card marked as a list item<li> to provide navigational cues for screen readers.

The cards component has been based on the following resources:

We've tested this component against WCAG 2.2 Level AA. It's been tested with NVDA and VoiceOver, and several different users with different interaction methods.