The target size, or "clickable" area, of a pointer input (such as a button or link) can be difficult for some users to activate, depending on how big it is. Those with certain physical or mobility limitations may not be able to exercise the precision necessary to select an object on a page, and that goes double when handheld touchscreens are in use, since users, in general, don't possess the same level of control as they would with a standard mouse.
For this reason, the target size for pointer inputs should be at least 44 by 44 CSS pixels, except under the following circumstances:
- Equivalent. If the same link or what-have-you is featured elsewhere on the page with the requisite target size.
- Inline. If the link is in a line or block of text. Since text content on a page reflows to fit the size of the desktop, the target size for inline links cannot be larger than that of the text or of the spacing between sentences or paragraphs.
- User Agent Control. If the target size is not modified by the author.
Essential. If the target must be a particular size and the object cannot be featured elsewhere on the page.
Recommended, But Not Required (Who Doesn't Like Extra Credit?)
While the minimum target size cited in this rule is 44 by 44 CSS pixels, WCAG says that it's best practice to increase the target size further whenever possible, as it will reduce the chances of a user accidentally selecting the wrong thing. This is stressed, particularly, in the following situations:
- When a control is used frequently
- When the results of a user interaction cannot be easily cancelled or undone
- When the object is located where it'll be hard for the user to reach, like on the edge of the screen
- When the object is part of a sequential task.
WCAG has designated this criterion to be Level AAA, since it is not strictly needed for your page to be operable, though it will help ensure your page is more accessible. See our post on WCAG's levels of conformance for more information.