Touch Target Size

Link to Touch Target Size copied to clipboard

WCAG 2.1 - 2.5.5 AAA Impact - Moderate

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.

  1. Within Xcode, select Debug View Heirarchy
  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.

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)