Target Size

Guideline

The size of the target for pointer inputs is at least 44 by 44 CSS pixels except when:

Equivalent: The target is available through an equivalent link or control on the same page that is at least 44 by 44 CSS pixels;
Inline: The target is in a sentence or block of text;
User Agent Control: The size of the target is determined by the user agent and is not modified by the author;
Essential: A particular presentation of the target is essential to the information being conveyed.

Intent

The intent of this guideline is to ensure that target sizes are large enough for users to easily activate them, even if the user is accessing content on a small handheld touch screen device, has limited dexterity, or has trouble activating small targets for other reasons. For instance, mice and similar pointing devices can be hard to use for these users, and a larger target will help them activate the target.

Touch is particularly problematic as it is an input mechanism with coarse precision. Users lack the same level of fine control when using inputs such as a mouse or stylus. A finger is larger than a mouse pointer, and generally obstructs the user's view of the precise location on the screen that is being touched/activated.

The issue can even be further complicated with responsive layouts on small screens like mobile, which need to accommodate different types of fine and coarse inputs. Both input types must be supported for a site that can be accessed both on a traditional desktop/laptop with a mouse, as well as on a tablet or mobile phone with a touch screen.

Equivalent targets: If there is more than one target on a screen that performs the same action, only one of the targets need to meet the target size of 44 by 44 CSS pixels.
Inline: Content displayed can often be reflowed based on the screen width available. This is known as responsive design and makes it easier to read since you do not need to scroll both horizontally and vertically. In reflowed content, the targets can appear anywhere on a line and can change position based on the width of the available screen. Since targets can appear anywhere on the line, the size cannot be larger than the available text and spacing between the sentences or paragraphs, otherwise the targets could overlap. It is for this reason targets which are contained within one or more sentences are excluded from the target size requirements.
NOTE: If the target is the full sentence and the sentence is not in a block of text, then the target needs to be at least 44 by 44 CSS pixels also a footnote or an icon within or at the end of a sentence is considered to be part of a sentence and therefore are excluded from the minimum target size.
User Agent Control: If the size of the target is not modified by the author through CSS or other size properties, then the target does not need to meet the target size of 44 by 44 CSS pixels.
Essential: If the target is required to be a particular target size and cannot be provided in another way, while changing it would essentially change the information or functionality of the content, then the target does not need to meet the target size of 44 by 44 CSS pixels.

Finding and Inspecting Applicable Components

Open up the Web page or Web-based application in a suitable Web browser.

Find each occurrence of interactive elements on a page that are not inline or are not an unmodified user agent control.

Failure Conditions

Interactive element does not meet minimum 44 by 44 CSS pixels and is not inline and/or is not an unmodified user agent control
- Fails 2.5.5: Target Size
Interactive element does not meet minimum 44 by 44 CSS pixels, and does not have an equivalent that does meet the minimum size requirement
- Fails 2.5.5: Target Size