# Large touch targets

DevFeed: [Large touch targets](<https://devfeed.tech/articles/large-touch-targets-9398.md>)

Original publisher: [Read original article](<https://a11yproject.com/posts/large-touch-targets/>)

Author: Eric Bailey

Published: 2018-11-21T00:00:00Z

Content type: article

Language: en

Sources: [The A11Y Project](<https://devfeed.tech/sources/the-a11y-project.md>)

Topics: [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [Web Content Accessibility Guidelines](<https://devfeed.tech/topics/web-content-accessibility-guidelines.md>), [web design](<https://devfeed.tech/topics/web-design.md>), [CSS](<https://devfeed.tech/topics/css.md>), [browser](<https://devfeed.tech/topics/browser.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [browser](<https://devfeed.tech/tags/browser.md>), [css](<https://devfeed.tech/tags/css.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [padding](<https://devfeed.tech/tags/padding.md>), [space](<https://devfeed.tech/tags/space.md>), [web-content-accessibility-guidelines](<https://devfeed.tech/tags/web-content-accessibility-guidelines.md>), [web-design](<https://devfeed.tech/tags/web-design.md>)

## AI overview

This article explains why interactive elements need sufficiently large touch targets to support people with motor control issues. It presents the WCAG minimum of 44 by 44 CSS pixels, describes relevant exceptions, recommends padding for small icon buttons and spacing between controls, and explains how to inspect dimensions in a browser.

## Source excerpt

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: 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