Touch Target Spacing
WCAG 2.2 is currently in a draft state, therefore results for this rule will be automatically marked as "IGNORED". Results can still be viewed using the Issue Status
dropdown in the dashboard. Once the success criteria has been finalized, the rule will be reinstated in a future release.
Views that can be interacted with must have spacing of at least 24x24 DP between itself and other clickable views.
Supported within:
Impact
On a touch device, small controls are a usability issue for everyone. Additionally, people experiencing motor limitations have increased difficulty interacting with small targets.
What's the difference?
You may have noticed this rule is very similar to our Touch Target Size rule! Touch Target Spacing aims for WCAG AA compliance, while Touch Target Size aligns closer with Googles recommendation of 48 by 48 points. We highly recommend supporting both rules as compliance with Apple's guidelines will ensure there are no issues when submitting to the Play Store.
Confirmation
- Identify the pixel density of your Android device.
- Utilize the view hierarchy inspector to confirm how big the control is in pixels.
- One of the following will happen:
- Accessible: The view will be larger than the minimum requirement and not have overlapping views that cause the available target to be smaller than 24x24.
- Accessible: The view will be smaller than the 24x24 minimum, but the padding around the view will make the button have enough space to be tapped reliably by users.
- Accessible: Sliders maintain a space of 24dp along the length of the control.
- Inaccessible: There is another clickable view that reduces the tappable area of the tested view below the minimum threshold.
How to Fix
- Set the minimum height and width of the view to 24dp.
Button button = findViewById(R.id.an_accessible_button_yay)
button.setMinimumHeight(24);
button.setMinimumWidth(24);
<Button
android:id="@+id/an_accessible_button_yay"
android:minimumHeight="24dp"
android:minimumWidth="24dp"
android:text="@string/batman_likes_accessible_buttons" />
-
Adjust neighboring clickable-views to allow for ample space between clickable components.
-
Remove obstructions around sliders.
-
Add a margin around clickable views.