WCAG Score - Not compliant
Provided by the component
- Do not change the checkbox colors, as these combinations are ensured to comply with WCAG AA requirements.
- The checkbox must be a native HTML <input type="checkbox"> element or have the correct ARIA role (role="checkbox") assigned
- State Communication: The checkbox needs to accurately communicate its current state—whether it's checked, unchecked, or indeterminate—to assistive technologies. This is typically done using ARIA attributes, such as aria-checked="true" or aria-checked="false". Without these attributes, a screen reader may not inform the user about the checkbox's status.
Screen Reader
Implementation considerations
Developers must do the following in the implementation to be considered fully accessible:
- Label Association: A checkbox must have a clearly associated <label> element. The label's text provides a human-readable name for the option. The association can be made by using the for attribute on the label, which points to the checkbox's id, or by wrapping the checkbox within the label. This allows a user to click on the label to toggle the checkbox and ensures that screen readers announce the label text when the checkbox is focused.