Skip to content.

Quick test

Large touch targets

By: Eric Bailey. Published: .

Table of Contents

A touch target is the total area a person can click or tap on to activate an interactive element such as a link, input, or button.

Background

Ensuring that interactive elements have sufficiently large touch targets helps people with motor control issues use your website or application. Providing a too-small touch target may make it difficult or impossible for some people to be able to reliably reach the area required to activate the element. Think of it like trying to thread a needle.

The Web Content Accessibility Guidelines (WCAG) specify a minimum size of 44 by 44 CSS pixels for all interactive elements. The exceptions are:

  • If the interactive element's functionality can be activated by another element of acceptable size on the same page.
  • If the interactive element is rendered inline within a block of text, such as a link.
  • If the interactive element's size is controlled by the browser or operating system's UI.
  • If the interactive element has a design whose presentation requires a certain size or shape.

Only the inline element exception case typically applies to web design. Even then, a recommended larger body type size will help both increase inline touch target size and help accommodate people with low vision.

Small touch targets such as icon buttons can use padding to expand their interactive area without increasing the visible size:

A translate button with a square purple area surrounding it. The button is labeled, "Button, 32 CSS pixels. The purple area is labeled, "Interactive area, 44 CSS pixels."

It is also recommended that you add space between large interactive elements, to help prevent people from accidentally clicking or tapping the wrong one.

How to test

To determine the CSS pixel size of an interactive element, use a browser's Inspector feature to check it's computed value.

Two common methods to open a browser's Inspector panel are typing Command/Control + Option + i on your keyboard, or by right clicking on an element on your page and choosing the Inspect option.

If you right click on the interactive element you want to test, it will automatically be highlighted when you choose the Inspect option in the right click menu. For most browsers, this method of selecting an element will also display its CSS pixel height and width:

Chrome's inspector highlighting the height and width of Wikipedia's logo, which serves as a link back to the Wikipedia homepage. The logo's computed size is 160 by 160 CSS pixels. The inspector also has the code for the logo highlighted, as well as its computed properties. Screenshot.

The inspector also has a Computed panel. It will display the selected element's height and width values, as well as an alphabetical list of the other computed CSS properties. This can be good for checking how the browser ultimately renders your site's CSS.

Further reading