The card pattern is a collection of elements that include an image and other related content. It’s called a card because it usually looks like a playing card. There have been many iterations of this component with variant degrees of success. This component can be deceiving to implement while respecting accessibility standards and best practices, and we usually see more misses than hits. Let’s look at what you can do to make the Card pattern work for everyone.
Appropriate usage
This pattern has the purpose of displaying a collection of related content. It is ideal when each content is unique, like in an application’s dashboard.
Each card should be composed of at least a title and some content. Cards should not be used solely to compare one item to another. In this case, a list or a table is much better suited.
When more elements are added to a single card, a greater reflection on how to code the cards needs to happen. There are different techniques to consider when creating a simple card (single link) and a complex card (multiple links).
Card examples
The interactions required to make this pattern as accessible as possible to keyboard and screen reader users are as follows:
Cards with multiple links
In this pattern, each card has multiple links and/or buttons. You can find this pattern in social media threads, media showcases, etc.
A card example from Fandango
The online repository of all things movies and television shows uses this pattern on its Theaters and Tickets pages to display the showtimes of featured movies playing at specific theaters. Each card has:
- A link to the movie details which includes: a decorative image, the title of the movie, the duration, the category
- The movie experience type
- Details about the venue and viewing options
- Links to the movie’s future showtimes
A card example from YouTube
YouTube also uses cards to display its rich content.
This screenshot shows a group of videos. Each card has:
- an image
- a time box with the duration of the video
- a logo
- the title of the video
- the name of the channel, which is also a link to the page of this channelthe number of views, and when it was published
Everything except the link to the channel is a link to the specific video.
As you can see, this multi-link card pattern can easily become overcharged with individual elements. Therefore, it is important to ensure that every interactive element within the card responds appropriate
Keyboard Interaction
The focus must move from link/button to link/button within each card, then to the links in the next card. This navigation must be done in sequential and logical order.
Card with a single link
This pattern has only one link on each card. The title is the only visible link on the card. This pattern is found on applications’ dashboards, blog homepages, shopping sites, etc.
A card example
The Desjardins homepage showcases articles using a couple of cards. Each card has the following:
- an image
- a category
- the title of the article
- the date of publication
In this case, the whole card links to a single destination and they are grouped in to a list.
A card example from Amazon
Amazon’s Today’s Deals page also uses this simplified version of the card pattern. A card contains:
- the image of the product
- the percentage of savings
- the title
All these elements are separate links but have the same destination. This implementation could be optimized to be a single link instead of three separate links. It would make reading each card easier and less redundant for screen reader users.
Screen-reader Interaction
Ensure that the screen reader detects only one link from each card.
Both Card patterns
- The title should be the first element of each card. If not, the title must at least be the first element programmatically.
- Do not group in a list or each card as a list item. The titles already give enough structure to the content.
Screen-reader Interaction
- The visual order should match the code order to avoid jumping from one area to another. Desktop screen readers read the information linearly from top to bottom following the code, not what is displayed on the screen. Screen readers usually have a built-in visible indicator of the current element being read. If this indicator is inconsistent, low-vision users and users with reading disabilities that use screen readers will have a hard time with the content.
- Each collection of cards should be in a region with an appropriate name. This will inform the user that the elements are related.
Making the card pattern more user-friendly
Here are some other best practices to consider when implementing a card pattern that will help any user:
- For the simple card pattern, instead of a link inside the card, the entire card can be clickable with a mouse and focusable with a keyboard.
- Limit the content to what’s necessary to ensure that the cards are easily scannable.
- Always use clear and concise titles.
- A link must describe its destination. Avoid “Read more” links.
- A button must describe its purpose. Name it what it does.
- Use consistent heights when cards are in a row. This provides balance and allows for greater readability.
- Ensure each card is responsive and that no information is lost when zooming or is on different devices and screen sizes.
Cards are not appropriate for every situation, but when used wisely, they can be accessible to all. The techniques above will ensure that your cards are usable and effective across platforms and audiences.
Related material: