Touch Target Size

All active controls should have a minimum of 44pt by 44pt 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 small targets.

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

Use a frame modifier on the view to set the proper height and width.

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