Touch Target Size

All active controls should have a minimum of 44dp by 44dp visual and tappable area.

Impact

On a touch device, small controls are a usability issue for everyone. Additionally, people experiencing motor limitations have increased difficulty interacting with, and aiming for, small targets.

Expectations

Interactive elements have the potential to expand the hit area of a target without increasing the visual bounds of the target. After careful consideration, Deque persists that it's best practice to have the visual and interactive bounds of the target align. This gives the end-user a clear area to engage with for the best chance of success. Therefore, this rule is also testing that the visual bounds of interactive elements meet the minimum 44dp.

Confirmation

1. Identify the pixel density of your Android device.
2. Utilize the view hierarchy inspector to confirm how big the control is in pixels.
3. One of the following will happen:
   • Accessible: Ensure the control is the correct number of density-independent pixels (dip).
   • Inaccessible: The control is not either 44 dip wide or 44 dip high.

How to Fix

An issue found by this rule occurs when the 'height' and/or 'width' values are not 44dp or more.

XML

Button button = findViewById(R.id.my_button);
button.setMinimumHeight(44);
button.setMinimumWidth(44);

<Button
     android:id="@+id/an_accessible_button_yay"
     android:minimumHeight="44dp"
     android:minimumWidth="44dp"
     android:text="@string/batman_likes_accessible_buttons" />

Compose

Button(
     onClick = { },
     modifier = Modifier.size(width = 44.dp, height = 44.dp)
) {
     Text(text = "My Button")
}

React Native

Some components from React Native are not customizable to allow for size adjustments, such as the Button component. Where possible, ensure all controls are at least 44dp by 44dp. Where not possible, explore alternative components that do allow you to adjust the size. Tip: when using custom controls be sure the accessibility role is set properly!