2.5.5 Target Size (Enhanced)

Introduction¶

This document gives information about the related Acquia Optimize checks:

• Pointer-interactive elements such as linked icons must be easy to target

What¶

Pointer targets, such as buttons, links, and other interactive elements, must be at least 44 by 44 CSS pixels.

Note:

• A pointer target refers to any interactive element on a webpage, such as buttons, links, or form controls, that can be activated using a pointer.
• A pointer is any input device that allows users to interact with on-screen elements by pointing, such as a mouse, stylus, or touch input on a touchscreen.

Why¶

When pointer targets such as buttons or links, are too small, they become difficult to accurately select with devices like a mouse, stylus, or touch input. This can lead to frequent errors, such as clicking the wrong element or struggling to activate the intended control. These issues particularly affect users with limited dexterity, tremors, or other motor impairments, which makes it challenging to interact with websites efficiently.

Larger pointer targets reduce the likelihood of accidental clicks and provide a more comfortable, reliable experience for all users. Ensure that targets meet the minimum size requirement so that users can navigate, select, and interact with content more easily, regardless of their physical abilities or the device they use.

This check affects the following users who have¶

• Mobility impairments: Such as hand tremors or limited dexterity
• Motor impairments: Includes any user who finds it difficult to perform fine motor movements
• All users on a mobile device: Most mobile devices use a touch screen for the primary mode of interaction

User story¶

Michael is a 45-year-old Director of Operations at a global tech company. He is an avid runner who participates in marathons and enjoys early morning jogs. He lives with his spouse and two teenage children, and he values family game nights.

"When I am out on a long run in the cold, I lose a lot of feeling in my fingers. It drives me crazy when the buttons in my training app are so tiny I cannot even hit them properly. Getting my times right is super important to me, and it is just so frustrating when I have to struggle to start or stop a workout. It is like the designers never even thought about how we actually use the app. I got so fed up I switched to a different app now.”

Examples¶

This section provides some examples of the issue.

Example: Small hit targets with multiple controls in a restaurant ordering webpage¶

On a restaurant's mobile ordering webpage, each menu item is displayed with a large, attractive image. Below each image are three small interactive icons: a plus sign (+ icon) to add the item to the cart, a minus sign (- icon) to remove it, and a Customize button to add extras.

Each of these icons is only 40x40 pixels and they are placed directly next to each other with no spacing.

The tiny, closely packed buttons make the actual ordering process difficult, especially for users with limited dexterity or those who use one hand on a mobile device.

When they try to add an item to the cart, the user may accidentally open the customization menu or unintentionally remove the item from the cart.

Example: Large hit targets with spaced controls in a restaurant ordering webpage¶

On a restaurant's mobile ordering webpage, each menu item is displayed with a large, attractive image. Below each image are three interactive icons: a plus sign (+ icon) to add the item to the cart, a minus sign (- icon) to remove it, and a Customize button to add extras.

Each of these icons is 60x60 pixels and spaced sufficiently, making it easier for users to accurately select the desired action.

The large, well-spaced buttons improve the ordering process, especially for users with limited dexterity or those using one hand on a mobile device. When they try to add an item to the cart, the user can confidently press the correct button without accidentally opening the customization menu or unintentionally removing the item from the cart.

How¶

How to fix it.

The Acquia Optimize platform flags interactive elements with a hit target smaller than 48x48 CSS pixels. However, this only applies to elements that do not fall under specific exceptions. Inline elements such as links within text and elements whose size is controlled by the browser without customization through CSS or other styling methods, are not flagged.

To fix this issue:
Increase the size of the interactive element to at least 48x48 CSS pixels.

Additional resources¶

WCAG success criteria¶

2.5.5 Target Size (Enhanced)