tappable-area

Provide ample touch targets for interactive elements.

Who might be affected

Motor/Mobility

Low Vision

Description

Providing sufficient size or sufficient spacing between targets will reduce the likelihood of accidentally triggering the wrong control.

Four rows of icons with measurements, the first three passing,the last failing the requirement.

The figure above is taken from the WC3's Understanding Success Criterion 2.5.8: Target Size (Minimum) page

Evinced's validation relies on the requirements presented in the WCAG success criterion 2.5.5 Target Size (Enhanced) and 2.5.8 Target Size (Minimum). This criterion requires a minimum target size of at least 24 by 24 CSS pixels or alternatively have a space of at least 24 pixels between interactive elements.

However this can configured in the following ways:

[Default behavior]: For iOS: 44x44pt (points) and Android: 48x48dp (density-independent pixels) without considering spacing between elements (as per guideline 2.5.5 Target Size (Enhanced) (AAA)). This is to align best with the mobile guidelines, as mentioned in the Android and iOS quick fixes sections.
24x24 (pt and dp) with considering spacing between elements (as per guideline 2.5.8 Target Size (Minimum) (AA))
Custom size and spacing configuration

The two units (pt and dp) of measure are derived from pixels and refer to the display when the pixel density of the screen is higher than 163 pixels per inch.

Quick Fixes

Android

On Android the recommended touch target size is a minimum of 48x48 dp.

Note: In Android webviews, pixels are generally translated directly to dp (24 CSS pixels = 24dp). It's important to remember that using flex within the containers may affect the final size of the element, adjusting it to fit.

iOS

Apple's Human Interface Guidelines recommend to maintain a default target size of 44x44 pt for controls on iOS and iPad.

How Users Are Affected

People with motor disabilities like hand tremors or fine motor movement difficulties will find it challenging to use the UI properly and likely to develop frustration regarding the app and might even abandon its use.

WCAG Success criteria

This issue might cause elements to fail one or more of the following Success criteria:
2.5.8 Target Size (Minimum) (AA) | 2.5.5 Target Size (Enhanced) (AAA)