Small clickable area #58
Description
Alert: Label Would Increase Clickable Area
An associated would increase the clickable area of this element.
Why did ANDI alert this?
This radio button or checkbox does not have an associated and the size of the radio button or checkbox is less than 21px by 21px.
Why is this an accessibility concern?
People with motor disabilities who can used a mouse may have trouble clicking on a small target less than 21px by 21px. Note: This size limit (21px by 21px) is arbitrarily determined and not an official WCAG requirement.
What should be done?
Adding an associated to a radio button or checkbox allows a mouse user to click on the label to select the radio button or checkbox. This increases the size of the clickable area. An associated is also a standard way of providing an accessible name for a radio button or checkbox.
Steps to reproduce the behavior:
- Log in to https://swarthmore-a11ygator.vercel.app/
- Note small clickable area for dark/light mode.
Add an associated label to the switcher.
Desktop (please complete the following information):
- Mac OS 15.4.1 (24E263)
- Chrome
- Version 136.0.7103.93 (Official Build) (arm64)