91Èȱ¬

All users benefit from larger touch targets. For young users, and users with motor and/or vision impairments, this is even more important as precision can be difficult.

Content touch targets must be large enough to read and have a large enough interactive target area to tap comfortably with one finger.

The recommended size of touch targets is 7 – 10mm. This size is equivalent to the smallest average finger. An interactive target area should be at least 7 x 7 mm. If not, it must be no smaller than 5 x 5 mm inside an exclusion zone of at least 7 x 7 mm that does not overlap with any other touch target. The recommendation is to provide a bigger touch target where possible.

Also refer to

Sometimes text that is big enough to read is too small to touch. For example, a linked letter in an A-Z listing would be too fine to touch accurately and should be placed in a linked container to increase the target area.

Tip . This increases the touch area and simplifies the interface.

---

iOS

Make sure that all actionable controls have a touch target size of at least 44 x 44pt or equivalent in pixels. Additionally, make sure there is at least one pixel between targets.

Minimum sizes can be specified in the Size Inspector utility in XCode’s Interface Builder’s View panel, or can be set at code level:

See for details.

iOS Example (Objective-C)

[myButton setFrame:CGRectMake(50, 50, 10, 10)];

---

Android

Make sure that all actionable controls have a touch target size of at least 48 x 48dp, with at least 8dp or more space between these controls. Additionally, make sure there is at least one pixel between targets.

Use the setPadding method to apply white space around the text. Use the layout_width and laytout_height attributes of the LayoutParams object to provide an appropriate width and height.

See guidelines for details.

Android Pass Example

<ImageView
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_margin="1"
    android:paddingLeft="10dp"
    android:paddingRight="10dp"
    android:paddingTop="10dp"
    android:paddingBottom="10dp"
  </ImageView>

You can also use the setPadding method in code rather than XML:

setPadding(10,10,10,10)

---

HTML

Provide padding around links to ensure all actionable controls are at least 7mm across. Use larger controls, i.e. 9mm, or increase the padding around the content to ensure a large touch area.

Use elements such as lists to provide structure to page content such as navigation, and CSS to add padding and margins around each touch target.

HTML Pass Example

<style>
  button {
    box-sizing: border-box;
    min-width: 44pt;
    min-height: 44pt;
  }
 </style>
  …
  <button>Tap me!</button>

---

Testing

Procedures

Touch target size can only be verified during design as all phones will have varying screen sizes.

During design:

1. Locate all touch targets/actionable items.
2. Check the sizes are larger than 7mm.

Outcome

The following checks is true:

• All touch targets/actionable items are larger than 7mm across.

---