Proposed SC Target Size

SC Shortname

Target Size

SC Text

The size of the target in relation to the visible display at the default viewport size is at least:

• 48px by 48px for pointer inputs with coarse pointing accuracy (such as a touchscreen)
• 24px by 24px for pointer inputs with fine pointing accuracy (such as a mouse, trackpad or stylus)

where px is a CSS pixel when the page using the device ideal viewport.

Note: In situations where multiple input mechanisms with both coarse and fine pointing accuracy are present, and where no mechanisms are present to determine the user's current input (either manual - e.g. providing the user with an explicit toggle to switch to a "touch-optimized" interface - or automatic - e.g. an application switching dynamically based on the type of input the user is currently using), targets must follow the larger minimum dimensions for coarse pointer inputs.

Editor's Note: this criterion borrows the distinction of "coarse" and "fine" pointing devices from Media Queries Level 4 - Pointing Device Quality: the pointer feature

Suggested Priority Level

Level A

Related Glossary additions or changes

Target: Region of the display that will accept a touch action. If a portion of a touch target is overlapped by another touch target such that it cannot receive touch actions, then that portion is not considered a touch target for purposes of touch target measurements.

CSS Pixel: https://www.w3.org/TR/CSS2/

What Principle and Guideline the SC falls within

New Proposed Guideline

Pointer Accessible: Make it easier for users to operate pointer functionality.

Editorial Note for WCAG group: Pointer includes "Touch" in its definition

Description (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 greatly in having positive outcomes on the web page.

Touch is particularly problematic as it is an input mechanism with coarse precision. Users lack the same level of fine control as on 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 on for responsive/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, 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 control is used frequently;
• the result of the interaction cannot be easily undone;
• the control is positioned where it will be difficult to reach, or is near the edge of the screen;
• the control is part of a sequential task.

Examples of Success Criterion

• Three buttons are on-screen and the visible portion of each button is 48px by 48px
• Button on the screen is defined at 48px by 48px with the viewport width is set to device-width
• Pointer clickable region is 24px by 24px

Benefits

• Users who use a mobile device where touch screen is the primary mode of interaction
• Users with mobility impairments, such as hand tremors
• Users who find fine motor movements difficult
• Users who access a device using one hand
• Users with large fingers, or who are operating the device with only a part of their finger or knuckle
• Users who have low vision may better see the target

Evidence

• Apple touch target size recommendations (44 points X 44 points) (note that Apple's "points" is a density-independent unit of measure unique to Apple - not related to CSS pt nor real-world physical points as measured in traditional print; 1 point = 1 CSS px - see explanation http://ivomynttinen.com/blog/ios-design-guidelines)
• Android touch target size recommendations (48 CSS pixels X 48 CSS pixels) (note that Google generally use "dp" - density-independent pixels - as unit of measure https://material.google.com/layout/units-measurements.html#units-measurements-density-independent-pixels-dp - but as noted "When writing CSS, use px wherever dp [...] is stated.")
• Microsoft’s Windows Phone UI Design and Interaction Guide (PDF) suggests a touch target size of 34px with a minimum touch target size of 26px
• Human Fingertips to Investigate the Mechanics of Tactile Sense (PDF) - found that the average width of the index finger is 1.6 to 2 cm (16 – 20 mm) for most adults. This converts to 45 – 57 pixels, which is wider than what most mobile guidelines suggest. A touch target that’s 45 – 57 pixels wide allows the user’s finger to fit snugly inside the target. The edges of the target are visible when the user taps it. This provides them with clear visual feedback that they’re hitting the target accurately. They’re also able to hit and move to their targets faster due to its larger size. This is consistent with Fitt’s Law, which says that the time to reach a target is longer if the target is smaller.
• One-Handed Thumb Use on Small Touchscreen Devices - target sizes should be at least 9.2 mm for single-target tasks and 9.6 mm for multi-target tasks in order to keep the dimensions of the targets as small as possible without decreasing performance and preference
• Microsoft Guidelines for Building Touch Friendly Sites - a target is at least 11mm (about 40px) square with at least 2mm (about 10px) of padding around (note that if 11mm is roughly equivalent to 40px, then 2mm should actually be roughly equivalent to 7.5px, but rounding up to 10px seems appropriate for simplicity's sake)
• Microsoft Design Language (PDF) - minimum touch target size of 44 EP × 44 EP ("effective pixels", Microsoft's own density-independent unit of measure - roughly equivalent to 1 CSS px when using ideal viewport)

Testability

1. Locate all touch targets/actionable items and identify if the inputs are defined for course or fine pointing accuracy
2. Review the page is set to the device ideal viewport (e.g. the viewport is set to device-width)
3. Identify what size in pixels the touch target is set to in the CSS
4. Verify the visible target size is at least 48px by 48px for pointer inputs with coarse pointing accuracy or 24px by 24px for pointer inputs with fine pointing accuracy

Techniques

M030 Multiple Elements: When multiple elements perform the same action or go to the same destination (e.g. link icon with link text), these should be contained within the same actionable element. This increases the touch target size for all users and benefits people with dexterity impairments. It also reduces the number of redundant focus targets, which benefits people using screen readers and keyboard/switch control.

M002 Touch Target: Ensuring that touch targets are at least 48px by 48px.

Pointer Target: Ensuring that pointer targets are at least 24px by 24px.

FM005 Failure: touch target is less than 48px x 48px at the default viewport size

Failure: pointer target is less than 24px x 24px at the default viewport size

Boneyard

Summary of Research on Touch Target Size