Card accessibility

WCAG 2.1 AA requirements

Semantics

• Card is a purely visual container — it renders a <div> with no implicit ARIA role. Screen readers treat it as a generic grouping.
• If a card represents a distinct landmark (e.g., a settings section), add role="region" and an aria-labelledby pointing to the CardTitle id.

Heading hierarchy

• CardTitle renders an <h3>. Ensure this fits the page heading hierarchy. If cards are inside a section that already uses <h3>, override with <CardTitle as="h4"> or pass className to restyle a different heading element.

Interactive cards

• If the entire card is clickable (e.g., linking to a detail page), wrap the card in an <a> or add an onClick with role="link" or role="button" and tabIndex={0}.
• Ensure the focus ring is visible on the outer card boundary.
• Do not nest interactive elements (buttons, links) inside a clickable card without careful event handling — this creates confusing nested click targets.

Contrast

• Card uses border-border and bg-background which meet contrast requirements in both themes.
• CardDescription uses text-muted-foreground — verify it stays above 4.5:1 against bg-background.

Audit checklist

• Heading level fits the page hierarchy
• Clickable cards have focus ring and keyboard support
• No nested interactive elements without event isolation
• Muted text meets 4.5:1 contrast