Touch Target Spacing

Actionable controls should have a minimum dimension of 24 x 24 dp or must be positioned so that if a circle with a diameter of 24 dp is placed on the center of control, the circle will not intersect with another target or with the circle for another target.

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.

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: 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

An issue found by this rule occurs when the frame of an active control does not have a height and width of 24pt or more.

• Setting the minimum height and width of the view to 24x24pt.
• Adjust neighboring clickable-views to allow for ample space between clickable components.
• Remove obstructions around sliders.
• Add a margin around clickable views.
• Set the minimum height and width of the view to 24dp.

XML

Adjust minimum height and width in code:

Button button = findViewById(R.id.an_accessible_button_yay)
button.setMinimumHeight(24);
button.setMinimumWidth(24);

Adjust minimum height and width in layout definition:

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

Compose

Adjust minimum height and width in code:

Button(modifier = modifier
  .constrainAs(textButtonBottom) {
      top.linkTo(slider.bottom)
      start.linkTo(parent.start)
      bottom.linkTo(parent.bottom)
  }
  .padding(start = 24.dp, top = 24.dp), onClick = { }) {
  Text(stringResource(id = R.string.button))
}

React Native

Adjust height and width of interactive components:

const styles = StyleSheet.create({
    button: {
        alignItems: 'center',
        backgroundColor: 'lightblue',
        width: 24, 
        height: 24
    }
});

Some components that don't allow spacing so easily can be wrapped in a view component with a flex layout, and setting the gap property to achieve proper spacing:

<View style={{ flex: 1, flexDirection: 'column', gap: 24 }}/>
   <Slider>
      step={1.0}
      maximumValue={100}
      style={{ width: 200, height: 60 }}
      value={sliderValue}
      accessible={true}
      onValueChange={setSliderValue}
      onSlidingStart={sliderValue => {
        setSliderValue(sliderValue);
      }}
      onSlidingComplete={sliderValue => {
        setSliderValue(sliderValue);
      }}
      accessibilityValue={{ now: "value: " + a11yValue }}
   </Slider>
</View>