Card button

Use the right style over images

‘Default’ and ‘on dark’ styles are transparent by design to stand out on solid backgrounds. Avoid placing these styles over images as the buttons become hard to see, especially for people with low vision. Use the contained style over images.

Add accessible labels

For assistive technology users, such as screen readers, add descriptive labels to convey the meaning of card buttons.

If there are multiple cards on the page, think about how to communicate card buttons with accessibility labels to enhance the experience for screen reader users.

Use accessible target sizes

To support people with dexterity limitations, or difficulty with fine motor control, targets need to be large enough to operate.

Apple’s Human Interface Guidelines and Androids Material Design recommend their own sizes. Although we recognise the platform's recommendations, we have chosen sizes, which exceed WCAG AA recommendations.