Card Accessibility

An item card is a display element that is not itself interactive, but houses elements, such as an image wrapped by an anchor, an add to favorites button, item title that is also wrapped in an anchor, etc.

Best Practices

Cards must be implemented with accessibility in mind. Self-actionable cards should have clear, descriptive accessible names.

Avoid nesting complex structures like headings or lists within self-actionable cards, as screen readers will only announce the button or link text.

A self-actionable card cannot contain interactive elements such as buttons or links within it.

For hybrid cards, ensure they use a <div> container with JavaScript event handling rather than nested interactive elements, which would violate accessibility guidelines.

Interaction Design

Keyboard

Interaction differs depending on whether the card is self-actionable or not.

For self-actionable cards, keyboard focus lands only on the card itself, which is typically an anchor tag or button element.

For non-self actionable cards, keyboard focus lands on nested interactive elements.

Grouped Item Cards

Item cards typically display in groups. Grouped item cards use and inherit the a11y setup of Layout Grid. For more information about using the grouped item cards, please see the Layout Grid pattern .