Repository navigation
[a11y][Fab] Assess WCAG 2.2 conformance #49406
Description
Context
Wave 1, item 2. Tracking issue: #49260.
Fab reuses most of the Button report. Check the accessible name of icon-only Fabs (1.1.1, 4.1.2) and the color contrast of the variants (1.4.3, 1.4.11).
Scope
- Add axe tests and fixtures in
test/regressions/a11y/fixtures/. - Write
Fab/accessibility.md. - Enroll it in the CSS-dependent suite (1.4.10, 1.4.4, 1.4.12).
- 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.1.1, 4.1.2 — With a screen reader, focus an icon-only Fab and an extended Fab. The icon-only Fab announces its
aria-label. The extended Fab announces its visible text. - 1.4.3 — With a contrast checker, measure the label and the icon against the fill for each color, in the resting, hover and active states.
- 1.4.11, 2.4.7 — Press Tab to the Fab. The focus indicator shows, and it is at least 3:1 against the fill and the page.
- 2.4.11 — Put the Fab in a fixed position at the bottom of a long page. Press Tab through the content behind it. The Fab does not fully hide a focused element.
- 1.4.1 — In grayscale, the purpose of the Fab stays clear.
Done when
- Fab has a report and is in the scorecard.
- Each manual test in this issue has steps and a result in the report.
Search keywords:
Activity