Touch Target Size
All active controls should have a minimum of 44pt by 44pt tappable area.
Impact
Touch screen users may experience active controls that are too small to be difficult or impossible to interact with.
Confirmation
Run the application within Xcode and navigate to the screen containing the active control to test.
- Within Xcode, select Debug View Heirarchy
- Select the control to test
- Open the inspector panel if not visible
- Select the size inspector
- 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:
- Navigate to the active control
- Open the inspector panel if not visible
- Select the size inspector
- Under
View
, update thewidth
andheight
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.
let button = UIButton(frame: CGRect(x: 10, y: 20, width: 44, height: 44))
SwiftUI
Use a frame modifier on the view to set the proper height and width.
Button("Next")
.frame(minWidth: 44, minHeight: 44, alignment: .leading)