Getting startedAccessibility
Accessibility
Accessible components with keyboard navigation, focus management, accessible labels, and reduced-motion support. Explore the test results below.
On this page
The report includes the test date, code revision, browsers, screen sizes, themes, and results. Each accessibility scan includes its axe results, with any detected issues and checks that need manual review.
Download and unzip the report. Run npx playwright show-report followed by the extracted folder path. Select a test to view its results and axe JSON attachments.
- Axe checks tagged WCAG 2.0 and 2.1 A/AA on representative component docs and recipes, in the default brand palette's light and dark themes at desktop and mobile sizes, using Chromium, Firefox, and WebKit.
- Open dialog and menu states, plus keyboard focus trapping, Escape dismissal, and focus return to the trigger.
- Form descriptions and invalid states, table sorting semantics, keyboard interaction, narrow layouts, and enlarged text with RTL.
- Separate component tests cover accessible names and states. Motion tests check reduced-motion behavior on representative surfaces.
A passing scan means the selected rules found no violations on the tested page. Results apply to the listed examples, themes, and states. Checks marked incomplete need manual review. WCAG conformance requires a full accessibility assessment.
VoiceOver, NVDA, and testing with disabled users remain to be completed. The report covers automated browser, semantics, and keyboard checks.
When adapting components, verify your labels, content, color contrast, focus order, error recovery, and complete user journeys. Custom themes and application code can change accessibility outcomes.
Include the component, reproduction steps, expected behavior, browser, and any assistive technology involved when reporting an issue.
Report an accessibility issue