Touch Target Size

All active controls should have a minimum of 44pt by 44pt 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, such as through the use of a gesture recognizer. 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 44pt.

Confirmation

Run the application within Xcode and navigate to the screen containing the active control to test.

1. Within Xcode, select Debug View Hierarchy
2. Select the control to test
3. Open the inspector panel if not visible
4. Select the size inspector
5. Observe the width and height of the selected control

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 44pt or more.

UIKit

In storyboard:

1. Navigate to the active control
2. Open the inspector panel if not visible
3. Select the size inspector
4. Under View, update the width and height parameters to be a minimum of 44pt.

In code:

Update the width and height of the active control's frame to be a minimum of 44pt.

This may be set through the initializer and a specific frame:

let button = UIButton(frame: CGRect(x: 0, y: 0, width: 44, height: 44))

or, may be set through view constraints. If there is a current constraint on the button, go ahead and update the width and height to be a minimum of 44 points. Otherwise, you can add constraints:

// Update Height:
myButton.heightAnchor.constraint(greaterThanOrEqualToConstant: 44).isActive = true

// Update Width:
myButton.widthAnchor.constraint(greaterThanOrEqualToConstant: 44).isActive = true

SwiftUI

TextFields

Please note that currently in SwiftUI there is no consistent way to increase the size of the tappable area of a TextField, so a SwiftUI TextField will return .INCOMPLETE for this rule. A radar report has been filed with Apple.

Buttons

Use a frame modifier on the contents of the Label parameter rather than on the entire button.

1. Use the Button's label-based initializer - it has 'action' as the first parameter and 'Label' as the second parameter as shown below.

Button(action: {
  print("button tapped
}, label: {
  Text("Tap here")
}

2. Add a frame modifier to the contents of the Button's Label parameter, specifying a height and width of at least 44.

Button(action: {
  print("button tapped
}, label: {
  Text("Tap here")
    .frame(width: 80, height: 45)
}

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 44pt by 44pt. 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!