Touch Target Spacing

What We Check For

Interactive elements should have a minimum dimension of 24 × 24 points, or have enough padding around it so that if a circle with a diameter of 24 points is placed on the center of the element, the circle will not intersect with another target nor with the circle for another target.

The hit area of an interactive element can potentially be expanded beyond its visual bounds — for example, by attaching a gesture recognizer with a larger activation region. After careful consideration, Deque maintains 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 24pt.

At a Glance

• This rule has a serious impact for users
• Interactive elements must be at least 24pt × 24pt, OR positioned so that a 24pt-diameter circle centered on the element doesn't overlap any adjacent target
• Both the visual and interactive (hit area) bounds must meet the minimum
• Sliders must maintain at least 24pt of space along their length
• Small, tightly packed controls are especially difficult for users with motor limitations

Impact to Users

On a touch device, small controls are a usability issue for everyone. Furthermore, people experiencing motor limitations have increased difficulty interacting with small targets that are too close together to activate independently.

Confirm Touch Target Spacing Issue

Run the application within Xcode and navigate to the screen containing the interactive element to test.

1. Within Xcode, select Debug View Hierarchy
2. Select the element to test
3. Open the Inspectors Panel if not visible
4. Select the Size Inspector
5. Observe the width, height, and position of the selected element, relative to neighboring interactive elements

One of the following outcomes applies:

• Passes: The element is at least 24pt × 24pt, and there are no overlapping elements that reduce the available tappable area below the minimum
• Passes: The element is smaller than 24pt × 24pt, but the padding around it is large enough that a 24pt-diameter circle centered on the element does not intersect any adjacent target
• Passes: Sliders maintain at least 24pt of space along the length of the element
• Fails: The element is smaller than 24pt × 24pt, with insufficient spacing between itself and adjacent interactive elements
• Fails: A neighboring interactive element reduces the tappable area of the tested element below the minimum threshold

Fix Issues

To resolve Touch Target Spacing issues, ensure each interactive element is either at least 24pt × 24pt or has enough margin that a 24pt-diameter circle centered on it doesn't intersect any adjacent interactive target.

UIKit

Set the minimum height and width to 24pt and add margin between neighboring interactive elements.

In storyboard:

1. Navigate to the interactive element
2. Open the Inspectors Panel if not visible
3. Select the Size Inspector
4. Under View, update the width and height parameters to at least 24pt

In code:

Update the width and height of the element's frame to be at least 24pt.

let button = UIButton(frame: CGRect(x: 10, y: 20, width: 24, height: 24))

SwiftUI

Use a .frame modifier on the interactive element to set the minimum height and width.

Button("Next")
    .frame(minWidth: 24, minHeight: 24, alignment: .leading)

React Native

Adjust the height and width of interactive elements, and use layout properties to add spacing between them.

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

Certain elements don't easily allow size adjustments. These can be wrapped in a View with a flex layout, using the gap property to achieve proper spacing between elements:

<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 }}
   />
</View>

Flutter

Flutter's Material widgets enforce a 48pt by 48pt touch area by default, which typically provides adequate spacing. Violations are most likely with custom tap targets built using GestureDetector, where spacing must be managed manually.

// Passing — spacing added between targets
Row(
  spacing: 8.0,
  children: [
    GestureDetector(                                                          
      onTap: () {},
      child: Container(                                                       
        width: 20,                                                          
        height: 20,
        color: Colors.blue,
        child: const Icon(Icons.thumb_up, size: 14, color: Colors.white),
      ),                                                                      
    ),
    GestureDetector(                                                          
      onTap: () {},                                                         
      child: Container(
        width: 20,
        height: 20,
        color: Colors.blue,
        child: const Icon(Icons.thumb_down, size: 14, color: Colors.white),
      ),                                                                      
    ),
  ],                                                                          
)                                                                           

Can I Ignore This Rule?

Touch Target Spacing has a Serious impact for users. We recommend remediating this issue except in rare cases where layout constraints make it genuinely infeasible. Learn more about ignoring rules.

Resources

Deque University Course Pages

• WCAG 2.2 - 2.5.8 Touch Target (AAA)

Note: Full access to Deque University resources requires a subscription.

Other Resources

• Web Content Accessibility Guidelines (WCAG) 2.2, W3C Recommendation
  • Success Criterion 2.5.8 - Target Size (Minimum)
• WCAG 2.2 Understanding Docs
  • Understanding 2.5.8 AA - Target Size (Minimum)