Proposed SC Target Size

From Mobile Accessibility Task Force

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

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