This page provides guidance on designing accessible cards for your user interface.
What is a card?
A card is a commonly-used design component for home pages and landing pages. The Nielsen Norman Group defines a card as “a container for a few short, related pieces of information… a snapshot-like display intended to encourage users to click to view more details.” Cards are flexible– they function as individual units that can be presented in a different order without affecting the meaning.
A card may include any or all of the following elements:
- Image
- Heading
- Link(s)
- Descriptive paragraph text
- Subject, date, or other categorical tags
- Button / Call to action
The card container often looks much like a playing card, a rectangle with rounded corners. However, sometimes the card area is only implied, and lacks a visual border.
Tile components are similar to cards but are generally simpler, contain only one or two elements, and perform a single action.
What are some considerations for cards?
- Size of clickable area; can a user with a tremor or on mobile easily select this link?
- Link appearance; how does the user know where to click?
- Handling of image links if they're clickable separately from linked text
- Focus indicator appearance
- Focus indicator behavior; can you avoid redundant links in the focus order?
- Appearance on mouse hover (visual confirmation)
There isn’t a single correct way to design cards and there are a wide variety of opinions and approaches. Our intention is to provide a few options for card patterns that meet accessibility requirements and offer good usability.
Three accessible card options
1. The entire card area is clickable:
Features:
- Alternative text describing the image content is applied to meaningful images. (required)
- A heading (H2 or H3) is applied to the card title. (required)
- The card title is underlined to convey that the card functions as a link. (recommended)
- The chevron provides an additional affordance to convey that the card functions as a link. (optional, but recommended if title is not underlined)
- A visual cue is provided on mouse hover. (recommended)
- A visible focus indicator (required)
Benefits:
- A large clickable area benefits mobile users, touchscreen users, and users with tremors.
- Images and headings function as expected for assistive tech users.
- The alt text for the image can describe the image content (instead of the link destination, as required for linked images).
Drawbacks:
Only one action is available for each card.
2. Only the heading link is clickable:
Features:
- Alternative text describing the image content is applied to meaningful images. (required)
- A heading is applied to the card title. (required)
- The card title is underlined to convey that this text functions as a link. (strongly recommended)
- The chevron provides an additional affordance to convey that the heading functions as a link. (optional, but recommended if the title isn’t underlined)
- A visual cue is provided on mouse hover. (recommended)
- Visible focus indicator (required)
Benefits:
- The action area is clearly defined and easily understood.
- Links to multiple locations can be used.
Drawbacks:
If linked text is not underlined, it may not be clear to users which element(s) are clickable.
3. Only the call-to-action is clickable:
Features:
- Alternative text describing the image content is applied to meaningful images. (required)
- A heading (H2 or H3) is applied to the card title. (required)
- The call-to-action clearly identifies the clickable region. You may also use this design if the entire card is clickable. (recommended)
- Use unique call-to-action text whenever possible. Use ARIA to apply meaningful link text for screen reader users if all cards use the same text (for example, “read more”). (required)
- A visual cue is provided on mouse hover. (recommended)
- A visible focus indicator (required)
Benefits
- The action area is clearly defined and easily understood.
- Avoids text underlines, which some designers dislike.
Drawbacks
- It may be difficult to provide unique call-to-action text in the space provided.
- If you use repetitive call-to-action text along with ARIA to provide meaningful text links, this will benefit screen reader users, but degrade the user experience for voice control users.
Frequently asked questions
Do I have to underline text links on cards?
In some cases, it’s a WCAG requirement, and sometimes it’s a well established best practice that we recommend. Underlining text links is required when:
- Color is used to identify links for sighted users -AND-
- the difference between the colors of linked text and unlinked text has less than a 3:1 contrast ratio.
Underlining is strongly recommended when linked and unlinked text are the same color. Even when linked and unlinked text meets the 3:1 contrast ratio requirement, we recommend underlining links. This benefits all users, but especially users with low vision and color blindness.
Do my links have to be a different color?
At this time, it is not required that linked text be a different color from unlinked text. However, if they are different colors, it is a requirement that they have a contrast ratio of 3:1.
For WCAG 2.1 AA compliance (required in 2026), links will be required to be a different color with a 3:1 contrast ratio against unlinked text (under SC 1.4.11).
If I don’t design my entire card to be clickable, is it OK if my card title and card image both link to the same URL?
Redundant links are not a WCAG failure, but it is a well established best practice to avoid them. They create a poor user experience for:
- Users who are blind and use screen readers, who have to listen to the link read twice as they Tab through content.
- Sighted screen reader users and sighted keyboard-only users, who have to Tab through twice as many links to navigate the page.
If you’re determined to design your card so the title and image function as separate links, you can apply tabindex=-1 to the images so they are removed from the tab order. (If you use tabindex=-1, your alt text should describe the image content, not the link destination, since the image won't function as a link for screen reader users.)
How do I make my entire card area clickable?
W3C has information about implementing block link cards. (Do NOT wrap your cards with <a> links!)