Understanding SC 2.5.3 Target Size

Intent

The intent of this success criterion is to help users who may have trouble activating a small target because of hand tremors, limited dexterity or other reasons. If the target is too small, it may be difficult to aim at the target. 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 be further complicated for responsive layouts on small screens and mobile which need to accommodate different types of fine and coarse inputs (e.g. 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).

While this criterion defines a minimum target size, as a best practice it is recommended that larger sizes are used to reduce the possibility of unintentional actions. This is particularly relevant if any of the following are true:

The targets on a screen can have different purposes and uses, and this Success Criterion specifies how each is to be handled.

Equivalent targets: If there is more than one target on a screen that performs the same action then that is that is available, 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 making 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 screen available. Since targets can appear anywhere on the line, the size cannot be larger than the available text and spacing between the paragraphs otherwise the targets could overlap. It is for that reason that targets that are contained within one or more sentences are excluded from the target size requirements.
Note 1: 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.
Note 2: A footnote or an icon at the end of a sentence is considered to be part of a sentence and therefore are excluded from the minumum 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 meet the target size of 44 by 44 CSS pixels.

Essential: If the target is required to be a particular target size and changing it would fundamentally change the information and functionality of the content and if the target function cannot be provided in another way, then the target does not need to meet the target size of 44 by 44 CSS pixels.

Benefits

Examples

Resources

Techniques

Each numbered item in this section represents a technique or combination of techniques that the WCAGWorking Group deems sufficient for meeting this Success Criterion. However, it is not necessary to use these particular techniques. For information on using other techniques, see Understanding Techniques for WCAG Success Criteria, particularly the "Other Techniques" section.

Sufficient

Techniques that are sufficient to meet the Guideline or Success Criterion.

  • Ensuring that touch targets are at least 44 by 44 CSS pixels.
  • Providing a mechanism to change the size of the target independent of magnification.

Advisory

Although not required for conformance, the following additional techniques should be considered in order to make content more accessible. Not all techniques can be used or would be effective in all situations.

Failure

The following are common mistakes that are considered failures of Success Criterion 2.5.3 by the WCAG Working Group.