Touch target size

Must

Touch targets must be large enough to touch accurately.

Description

All users benefit from larger touch targets. For young users, and users with motor and/or vision impairments, this is even more important as accuracy 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.

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

Group adjacent related elements that link to the same resource as a single linked touch target. This increases the touch area and simplifies the interface.

IOS

For text elements include some white space around the text in the element frame. The autoResizingMask property can be set to ensure that if an object is resized it still meets the requirements. Use larger controls or increase the padding around content to ensure a large touch area.

All actionable controls must be 44pt x 44pt or larger. This sits within the comfortable hit area size for touch screen finger touch (7-10mm). See iOS Human Interface Guidelines for details.

iOS failure

 A button that has a fixed width and does is not scaled up:

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

ANDROID

Include white space around text elements in the element frame using setPadding. Use layout_width and layout_height attributes of a LayoutParams object to set an appropriate width and height for the targeted device. Use larger controls or increase the padding around content to ensure a large touch area.

All actionable controls must be 48dp x 48dp or larger. This sits within the comfortable hit area size for touch screen finger touch (7-10mm). See Android Material Design guidelines for details.

Android example (padding)

For padding around an element:

//A large enough element with sufficient area to tap.
setPadding(10, 10, 10, 10);                        

For touch targets themselves:

<ImageView
    android:id="@+id/addBookmark"
    android:layout_width="50dp"
    android:layout_height="50dp"/>

// or

int dimensionInPixels = 50 * context.getResources().getDisplayMetrics().density
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams (dimensionInPixels, dimensionInPixels);
addBookmarkImageView.setLayoutParams(layoutParams);                        
<ImageView
    android:id="@+id/addBookmark"
    android:layout_width="25dp"
    android:layout_height="25dp"/>

// or

int dimensionInPixels = 25 * context.getResources().getDisplayMetrics().density
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams (dimensionInPixels, dimensionInPixels);
addBookmarkImageView.setLayoutParams(layoutParams);                        

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.

HTML example

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:

<style>
    .main-nav {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .main-nav li {
        float: left;
    }
    .main-nav a {
        display: block;
        margin: 0 0.2em;
        padding: 0.5em 1em;
    }
</style>

<ul class="main-nav">
    <li><a href="/">Home</a></li>
    <li><a href="/news">News</a></li>
    <li><a href="/sport">Sport</a></li>
</ul>                        

Don't use white space and printable characters to create spacing within or around touch targets:

<a href="/">Home</a> | <a href="/news">News</a> | <a href="/sport">Sport</a>                        

TESTING

 

Procedures
  1. Activate the app.
  2. Locate all touch targets/actionable items.
  3. Measure the size.
  4. Verify the size is larger than 9.6mm.
Results

 The following checks is true:

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