Web Governance
Pointer-interactive elements such as linked icons must be easy to target
This document gives information about the related accessibility checks:
Pointer targets, such as buttons, links, and other interactive elements, must be at least 44 by 44 CSS pixels.
Note:
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.
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.”
This section provides some examples of the issue.
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.
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 to fix it.
The Web Governance 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.
This document gives information about the related accessibility checks:
Pointer targets, such as buttons, links, and other interactive elements, must be at least 44 by 44 CSS pixels.
Note:
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.
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.”
This section provides some examples of the issue.
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.
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 to fix it.
The Web Governance 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.
If this content did not answer your questions, try searching or contacting our support team for further assistance.
If this content did not answer your questions, try searching or contacting our support team for further assistance.
Web Governance