Checkbox > Accessibility Audit
Refer to the parent epic description for more information on this effort.
Purpose
Audit the accessibility of the GitLab UI Checkbox component in all variants and states in order to update the Pajamas component Status table, and provide more documentation on the component’s page in Pajamas.
Component description
A checkbox form element represents a boolean option. This applies to the native <input type="checkbox"> and not the ARIA checkbox role.
Methods and Tools
Review the initial testing methods in the parent epic. List the testing methods used for your audit below, including any additional testing methods needed for this component that is not listed in the parent epic.
- Evaluate all of the checkbox variants and options in GitLab UI.
- Visual review for contrast and states.
- Semantic and functional review.
- Screen reader: VoiceOver + Safari on macOS
- Screen reader: NVDA + Chrome on Windows
- axe DevTools extension in browser) variants and configurations in GitLab UI.
Audit Criteria
Review the general audit criteria in the parent epic. Add applicable criteria to this section, including any additional criteria needed for this component that is not listed in the parent epic. A check indicates that the audit has been performed, not that it passes.
-
Color combinations have sufficient contrast. -
All actions and functionality can be done with a keyboard. -
Checked/unchecked states are distinguishable. -
Focus state is visible. -
Label text provides additional selection affordance. -
Help text is announced.
Results
| Problem | Solution | Related MR |
|---|---|---|
Help text is part of the label. |
Help text should be in its own <span> and associated with the input via aria-describedby. |
TBD |
| Help text not announced by VoiceOver (announced as part of the label in NVDA). CleanShot_2022-03-28_at_10.17.22 | See above solution for associating help text. | TBD |
| Unsure why `tabindex="-1" is used on many elements. | Remove tabindex from legend, role="group". |
TBD |
<legend> doesn't contain any text in default example (checkbox tree example has text in the legend that uses the .sr-only class. |
<legend> should contain meaningful text to describe the <fieldset>. |
TBD |
Unsure of the purpose for role="group" surrounding inputs. |
Consider removing unnecessary div. |
TBD |
| Indeterminate checkboxes announced as "unchecked" in VoiceOver (announced as "half checked" in NVDA). CleanShot_2022-03-28_at_10.32.42 | Ensure indeterminate checkboxes are announced correctly in VoiceOver. | TBD |
Completing the audit
After the solutions have been explored and applied, review the completing the audit section in the parent epic. Complete all items prior to closing this issue.
accessibility ~"Category:FE/UX Foundations" ~"component:checkbox"