[a11y][Card] Assess WCAG 2.2 conformance #49443

Context

Wave 4, item 14 (lower risk). Tracking issue: #49260.

Include CardHeader, CardContent, CardMedia and CardActions. Focus on the heading level of CardHeader (1.3.1), the text alternative of CardMedia (1.1.1) and the contrast of the outlined variant boundary (1.4.11).

Scope

1. Add axe tests and fixtures in test/regressions/a11y/fixtures/.
2. Write Card/accessibility.md.
3. Enroll it in the CSS-dependent suite (1.4.10, 1.4.4, 1.4.12).
4. Run pnpm a11y:scorecard.

Manual tests

Write each check in the report as numbered Manual testing steps, as in Button/accessibility.md. pnpm a11y:scorecard then adds them to manual-testing.md. For screen-reader steps, use NVDA with Chrome and VoiceOver with Safari.

• 1.3.1, 2.4.6 — With a screen reader, list the headings. Record if the CardHeader title is a heading. The author sets the level through slotProps.
• 1.1.1 — A CardMedia img has an alt text. A CardMedia with a background image has role="img" and an aria-label, or it is decorative.
• 1.3.2 — The reading order is header, media, content and actions, as on the screen.
• 1.4.10 — At 320 CSS px width, the Card content scrolls vertically only.
• 1.4.3 — With a contrast checker, measure the title and the subheader text. Each is at least 4.5:1.

Done when

• Card has a report and is in the scorecard.
• Each manual test in this issue has steps and a result in the report.

Search keywords: