We detected an element functioning as a checkbox missing a checkbox role
| Field | Value |
|---|---|
| Rule code | Manual_Checkbox_Role_Missing |
| WCAG conformance level | A |
| WCAG success criterion | 4.1.2 Name, Role, Value |
| Must be fixed at source | No |
Description
When custom elements are used to create checkbox-like functionality, they must be assigned the appropriate ARIA role to ensure that assistive technologies understand their purpose. Without the proper role, users of screen readers and other assistive technologies may be unable to identify or interact with these controls correctly.
How to fix
When creating custom checkbox elements, always add role="checkbox" and appropriate ARIA attributes to ensure accessibility:
<div class="custom-checkbox"
role="checkbox"
aria-checked="false"
tabindex="0"
> Whenever possible, use the native <input type="checkbox"> element instead of creating custom checkboxes, as it provides built-in accessibility and behavior.