You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: packages/mui-material/src/Checkbox/accessibility.md
+10-10Lines changed: 10 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -8,7 +8,7 @@ Rated against WCAG 2.2 Level A and AA. See the [reports legend](../accessibility
8
8
| ⚠️ Partially Supports | 3 |
9
9
| ❌ Does Not Support | 0 |
10
10
| ➖ Not Applicable | 30 |
11
-
| 🚩 Flagged |12/25 |
11
+
| 🚩 Flagged |7/25|
12
12
13
13
## Known gaps
14
14
@@ -22,7 +22,7 @@ Rated against WCAG 2.2 Level A and AA. See the [reports legend](../accessibility
22
22
23
23
#### 1.3.2 Meaningful Sequence · A
24
24
25
-
`🚩` · `✅ Supports` · `○ Author`
25
+
`✅ Supports` · `○ Author`
26
26
27
27
- The checkbox is one control: the hidden `<input>` followed by the `aria-hidden` checkmark icon, with `FormControlLabel` placing the label and control in source order, so the exposed reading order matches the visual order. The component applies no CSS reordering to itself.
28
28
- Order carries meaning only across several controls, which the surrounding layout sets. `labelPlacement="start"` flips the label/control visually with `row-reverse`, so confirm the reading order of a checkbox group still matches its visual order.
@@ -37,7 +37,7 @@ Rated against WCAG 2.2 Level A and AA. See the [reports legend](../accessibility
37
37
38
38
#### 1.3.3 Sensory Characteristics · A
39
39
40
-
`🚩` · `✅ Supports` · `○ Author`
40
+
`✅ Supports` · `○ Author`
41
41
42
42
- The component renders no instructional text of its own, so it introduces no shape-, color-, or position-only instructions.
43
43
- Surrounding copy must not rely on sensory characteristics alone (for example "check the green box" or "the boxes on the right"). That is authored content.
@@ -51,7 +51,7 @@ Rated against WCAG 2.2 Level A and AA. See the [reports legend](../accessibility
51
51
52
52
#### 1.4.5 Images of Text · AA
53
53
54
-
`🚩` · `✅ Supports` · `○ Author`
54
+
`✅ Supports` · `○ Author`
55
55
56
56
- Labels and helper text render as live DOM text; the checkmark icon is a vector graphic, not an image of text, and it carries no textual information.
57
57
- This fails only if an author passes an image of text as the label. Use real text unless it is a logo.
@@ -65,7 +65,7 @@ Rated against WCAG 2.2 Level A and AA. See the [reports legend](../accessibility
65
65
66
66
#### 2.4.11 Focus Not Obscured (Minimum) · AA
67
67
68
-
`🚩` · `✅ Supports` · `○ Author`
68
+
`✅ Supports` · `○ Author`
69
69
70
70
- The checkbox is an ordinary focusable control and never places itself behind other content. Obscuring comes from sticky headers, banners, or overlays in the surrounding layout.
71
71
- It passes as long as that content never hides a focused checkbox completely; partial overlap is fine.
@@ -79,7 +79,7 @@ Rated against WCAG 2.2 Level A and AA. See the [reports legend](../accessibility
79
79
80
80
#### 3.2.4 Consistent Identification · AA
81
81
82
-
`🚩` · `✅ Supports` · `○ Author`
82
+
`✅ Supports` · `○ Author`
83
83
84
84
- The author supplies the name through a `FormControlLabel` or an `aria-label`. Whether the same function is identified consistently across pages is up to the author.
85
85
- Consistency is a cross-page property. Confirm that checkboxes with the same function share a label, and that one label is not reused for different functions.
@@ -103,7 +103,7 @@ Rated against WCAG 2.2 Level A and AA. See the [reports legend](../accessibility
103
103
104
104
**Manual testing steps**
105
105
106
-
1. In the accessibility tree, inspect a labelled checkbox (`Checkbox` inside a `FormControlLabel`) and confirm it shows `role=checkbox` with the visible label as its name.
106
+
1. In the accessibility tree, inspect alabelledcheckbox (`Checkbox` inside a `FormControlLabel`) and confirm it shows `role=checkbox` with the visible label as its name.
107
107
2. Inspect a bare `<Checkbox />` with no label and confirm its name is empty, the failure mode authors must avoid.
108
108
3. Confirm the checkmark icon's SVG is `aria-hidden`.
109
109
@@ -120,7 +120,7 @@ Rated against WCAG 2.2 Level A and AA. See the [reports legend](../accessibility
120
120
121
121
**Manual testing steps**
122
122
123
-
1. For a required labelled checkbox (`Checkbox required` inside a `FormControlLabel`), confirm `role=checkbox`, the name, `required`, and the wrapping `<label>`.
123
+
1. For a requiredlabelledcheckbox (`Checkbox required` inside a `FormControlLabel`), confirm `role=checkbox`, the name, `required`, and the wrapping `<label>`.
124
124
2. Toggle indeterminate and confirm `aria-checked` cycles `true`/`false`/`mixed`.
125
125
3. In a fieldset group (`FormControl component="fieldset"` + `FormLabel component="legend"` around a `FormGroup`), confirm the `<fieldset>`/`<legend>` name is exposed but any error or required constraint is not (no `aria-describedby`/`aria-invalid`).
126
126
@@ -229,7 +229,7 @@ Rated against WCAG 2.2 Level A and AA. See the [reports legend](../accessibility
229
229
230
230
**Manual testing steps**
231
231
232
-
1. For a labelled checkbox (`Checkbox` inside a `FormControlLabel` reading "Remember me"), confirm the accessible name contains "Remember me".
232
+
1. For alabelledcheckbox (`Checkbox` inside a `FormControlLabel` reading "Remember me"), confirm the accessible name contains "Remember me".
233
233
2. If an `aria-label` is set, confirm it includes the visible text.
234
234
3. Try a voice command speaking the visible label and confirm it activates the checkbox.
235
235
@@ -262,7 +262,7 @@ Rated against WCAG 2.2 Level A and AA. See the [reports legend](../accessibility
262
262
263
263
**Manual testing steps**
264
264
265
-
1. Inspect a labelled checkbox (`Checkbox` inside a `FormControlLabel`) and confirm `role=checkbox` with a non-empty name in the accessibility tree.
265
+
1. Inspect alabelledcheckbox (`Checkbox` inside a `FormControlLabel`) and confirm `role=checkbox` with a non-empty name in the accessibility tree.
266
266
2. Toggle it with a screen reader running and confirm the state change is announced.
267
267
3. With `indeterminate` set, confirm "mixed" or partially checked is announced.
0 commit comments