[a11y][ImageList] Assess WCAG 2.2 conformance #49447

Context

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

Include ImageListItem and ImageListItemBar. Focus on list semantics (1.3.1), image text alternatives (1.1.1), the text contrast of ImageListItemBar over images (1.4.3) and the masonry and quilted reading order (1.3.2).

Scope

1. Add axe tests and fixtures in test/regressions/a11y/fixtures/.
2. Write ImageList/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 — With a screen reader, go to an ImageList. The screen reader announces "list" and the item count.
• 1.1.1 — Each image announces a meaningful alt text, or it is silent when it is decorative.
• 1.4.3 — With a contrast checker, measure the ImageListItemBar title and subtitle over light and dark images. Each is at least 4.5:1 against the bar background.
• 4.1.2 — An action icon in the ImageListItemBar announces a name that identifies the image, for example "Info about Breakfast".
• 1.3.2, 2.4.3 — In the masonry and quilted variants, the reading order and the Tab order match the visual order.
• 1.4.10 — At 320 CSS px width, the images reflow, and the page does not scroll horizontally.

Done when

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

Search keywords: