Have you ever unintentionally clicked the wrong button or struggled to hit the right link on a website or mobile app? You’re not alone. Trying to tap those tiny buttons on my phone with my fat fingers – it's like playing that game Operation. But instead of removing the wishbone, I'm trying not to accidentally order 100 widgets. I need a 'target size for fat fingers' option in the settings! 😭
Luckily, the W3C has success criteria to help my fat fingers stay on target.
What is Target Size?
Target size refers to the size of a clickable element, like a button or link. The target size can determine the success or failure of interaction for people with disabilities, such as hand tremors, decreased dexterity, fine motor control, and low vision (proper target size can make it easier to see the target).
As well as people with temporary or situational barriers, such as someone accessing their mobile device with just one hand because they are holding a bag of groceries with the other or someone on a bumpy ride in a car or bus, causing their hands to shake.
WCAG 2.2 provides guidelines for designing accessible targets to serve our desktop and mobile app users better, no matter their abilities. Those guidelines are defined in WCAG 2.5.8 - Target Size (Minimum) AA.
The guidelines state that the target size for pointer inputs should be at least 24 by 24 CSS pixels. Pointer inputs include a person’s finger, a mouse, a stylus, or a stick (such as a mouth stick). Please note: The guidelines are very specific about that 24 by 24.
"For a target to be 'at least 24 by 24 CSS pixels,' it must be possible to draw a solid 24 by 24 CSS pixel square, aligned to the horizontal and vertical axis such that the square is completely within the target (does not extend outside the target's area)." ~ W3C
If that target size can not be obtained, the criterion can still be met using minimum spacing around the target. For example, in the screenshot below, notice that the target size is 18px on all sides, and the spacing between and around each target is 24px.
The Exceptions to the Rule
It is also important to take into consideration the exceptions to WCAG 2.5.8, which are:
- If smaller targets (less than 24 x 24 CSS pixels) are arranged so that, when a 24 CSS pixel diameter circle is centered on each target's bounding box, the circles don't overlap with other targets or their circles.
- Equivalent: The function can be achieved through a different control on the same page that meets this criterion. For instance, in the following screenshot, the targets in the upper right corner are 15px with no minimum spacing, while the ones further down the page are 24px with no minimum spacing. Therefore, the criterion has been met.
- Inline: The target is in a sentence, or its size is otherwise constrained by the line height. For example, contextual links may be constrained by the vertical spacing between lines of text or the leading.
- User-agent control: The size of the target is determined by the user agent and is not modified by the author. For example:
- the options list of <select> dropdowns
- date picker for the HTML date input
- color picker for the HTML color input
- Essential: A particular presentation of the target is essential or is legally required for the information being conveyed. For example, the target must be a certain size or shape.
Testing Your Targets
The easiest way to test the targets on your website is to use the browser Inspect feature in desktop mode. Place your cursor over the target you want to inspect, right-click, and choose "Inspect" at the bottom of the menu. In this example, the target is an icon linked to Facebook.
Most browsers automatically display the selected element’s CSS pixel height and width. In the screenshot below, you can see the Facebook target measures 23 x 35. This target does not pass WCAG 2.5.8.
To make testing a bit easier, you may want to try the 24×24 Pixel Cursor Bookmarklet by Adrian Roselli. It turns your cursor into a 24 x 24 square, allowing you to move around the screen and test various target areas.
Remember, the goal of WCAG 2.5.8 is to "make controls easier to activate" for all users. Make your website a place where everyone can click, tap, and navigate barrier-free!
