Accessibility conformance report
How Material UI components conform to WCAG 2.2 Level A and AA, reported in VPAT terms for procurement and accessibility review.
About this report
This is a Voluntary Product Accessibility Template (VPAT®) style report: it states how far Material UI meets the Web Content Accessibility Guidelines 2.2 at Levels A and AA, using the conformance vocabulary defined by the Information Technology Industry Council.
Each component is rated criterion by criterion in its own report, kept next to the source code at packages/mui-material/src/<Component>/accessibility.md. Those reports carry the reasoning, the responsibility split, and reproducible manual test steps for every criterion. The table below summarizes them; follow a component link for the detail.
| Field | Value |
|---|---|
| Product | Material UI (@mui/material) |
| Product type | React component library (software) |
| Version assessed | @mui/material v9.4.0 |
| Vendor | MUI |
| Standards applied | WCAG 2.2 Level A and AA |
| Report type | Self-assessment, published as source-controlled documentation |
Conformance by component
Each row counts only the criteria that apply to that component; criteria that are Not Applicable are excluded. Levels are cumulative — AA includes all of A.
- Rated — applicable Level A and AA criteria.
- Verified — criteria confirmed by a test or a recorded review. The remainder are assessed from the source but not yet re-verified; they are flagged 🚩 in the component report. The flag concerns evidence, not conformance.
- Automated — criteria a deterministic test proves on its own, so they cannot silently regress.
| Component | Level A | Level AA | Rated | ✅ Supports | ⚠️ Partially Supports | Verified | Automated |
|---|---|---|---|---|---|---|---|
| Accordion | 11 | 8 | 19 | 19 | 0 | 16/19 | 9 |
| AccordionSummary | 13 | 11 | 24 | 23 | 1 | 21/24 | 11 |
| Avatar | 5 | 6 | 11 | 9 | 2 | 6/11 | 2 |
| Button | 15 | 12 | 27 | 24 | 3 | 20/27 | 11 |
| Checkbox | 14 | 11 | 25 | 24 | 1 | 22/25 | 11 |
| LinearProgress | 6 | 5 | 11 | 8 | 3 | 6/11 | 1 |
| Radio | 14 | 11 | 25 | 24 | 1 | 23/25 | 11 |
| RadioGroup | 6 | 1 | 7 | 7 | 0 | 4/7 | 2 |
| Switch | 14 | 11 | 25 | 24 | 1 | 23/25 | 11 |
| TextField | 14 | 14 | 28 | 25 | 3 | 24/28 | 12 |
| ToggleButton | 13 | 11 | 24 | 21 | 3 | 22/24 | 11 |
| ToggleButtonGroup | 2 | 2 | 4 | 4 | 0 | 3/4 | 1 |
No component records a ❌ Does Not Support rating for any Level A or AA criterion.
Rolled up to the library level, where each criterion takes the worst rating any assessed component receives, 32 success criteria are exercised: 27 Supports, 5 Partially Supports, 0 Does Not Support.
The Level A and AA criteria absent from every row apply at the page or application level — 2.4.1 Bypass Blocks, 3.1.1 Language of Page, the 1.2.x Time-based Media set — and are the responsibility of the application.
How to read the ratings
| Symbol | Term | Meaning |
|---|---|---|
| ✅ | Supports | Met, with no known defects. |
| ⚠️ | Partially Supports | Some functionality does not meet the criterion. |
| ❌ | Does Not Support | Most functionality does not meet the criterion. |
| ➖ | Not Applicable | The criterion does not apply to this component. |
Each criterion in a component report also records who is responsible for meeting it — ● the component, ◐ shared when used as documented, or ○ you, depending on your implementation and surrounding content. This distinction matters more for a component library than for an application, and the reports state it per criterion.
Known gaps
Five issues account for every ⚠️ rating. Two of them can be fixed through the theme today.
| Gap | Criteria | Affected | Workaround |
|---|---|---|---|
| By default, the keyboard focus indicator is the ripple or a background tint, with untested contrast | 1.4.11 | AccordionSummary, Button, Checkbox, Radio, Switch, Toggle Button | Enable focusVisible in your theme — see below |
| Some default palette colors fall short of contrast minimums | 1.4.3, 1.4.11 | Avatar, Button, LinearProgress, Switch, TextField, Toggle Button | Override the affected palette entries |
| The selected state of colored Toggle Buttons is conveyed almost entirely by hue | 1.4.1 | Toggle Button (primary, error, info, success) |
Add a non-color cue to the selected state, such as an icon |
| Dynamic state changes are not announced | 4.1.3 | Button (loading), LinearProgress, TextField (error) |
Render your own aria-live region alongside |
| Indefinite animation cannot be paused | 2.2.2 | LinearProgress (indeterminate, query, buffer) |
Show it only while an operation is in flight |
The theme's focusVisible option draws an outline ring on keyboard focus that does not depend on the ripple, so it also stays visible under disableRipple. See Focus visible for the options:
const theme = createTheme({ focusVisible: true });
Scope and limitations
- Component coverage is partial. 12 components are assessed. Widely used components including Select, Autocomplete, Dialog, Menu, Table, Tabs, Slider, Tooltip, Snackbar, and Drawer are not yet assessed, and this report says nothing about them.
- No assistive-technology testing. No screen-reader passes have been performed. Criteria that depend on how a specific assistive technology behaves are assessed from the exposed accessibility tree, not from observed behavior.
- Level AAA is out of scope, as it is for a standard VPAT.
- Components are rated in isolation, as rendered with default props and the default theme. Customization, composition, and your surrounding page can change the result.
- Evidence strength varies. See the Verified column above; the shortfall is assessed from the source but not yet re-verified.
- This is a self-assessment, not audited by an independent third party.
- Section 508 and EN 301 549 chapters are not yet included. The WCAG results above supply the substance those chapters incorporate by reference, but the chapter-by-chapter mapping has not been written.
Feedback
Accessibility defects are treated as bugs. Report them on GitHub with the component, the success criterion, and steps to reproduce.