How to Test Touch Target Size for WCAG Compliance
Has this ever happened to you? You’re scrolling through an app or website on your phone and accidentally tap a link or button you never intended to select. Or perhaps you’re trying to complete an online purchase and, instead of pressing the small “Buy Now” button, you accidentally activate a neighboring link because the controls are too close together.
While these mistakes may seem minor, they can quickly become frustrating, especially when you’re trying to complete an important task. Imagine rushing to book a train ticket before seats sell out, filling out a time-sensitive form, or attempting to make a payment. A single accidental tap can take you away from the page, force you to restart a process, or require several extra steps to get back on track. What should be a quick and seamless interaction suddenly becomes a source of frustration.
In many cases, these issues aren’t caused by user error at all. They’re the result of interactive elements that are too small, too closely spaced, or difficult to activate accurately. These interactive elements, known as touch targets, are a fundamental part of every digital experience and play a crucial role in determining how easily users can navigate and interact with a website or application.
What Are Touch Targets and Why Do They Matter?
Every interaction on a touch-screen device, whether it is on a smartphone, tablet etc. begins with a touch target.
Whether a user is tapping a button, selecting a checkbox, opening a menu, or following a link, they rely on touch targets to successfully navigate and complete tasks. Touch targets are the interactive elements on a webpage that users can activate using touch, a mouse, a stylus, switch devices, or other input methods.
Common examples of touch targets include:
- Buttons
- Links
- Form controls
- Menu items
- Toggle switches
- Dropdown controls
- Icon buttons
- Pagination controls
- Interactive cards
These elements play a critical role in helping users access content, complete tasks, and move through a website. However, when touch targets are too small or positioned too closely together, even simple interactions can become difficult and frustrating.
For users with motor disabilities, limited dexterity, tremors, or mobility impairments, small touch targets can create significant barriers to accessing and using digital content.
The impact extends beyond disability as well. Anyone using a mobile device while walking, carrying objects, using one hand, or navigating on a small screen can struggle to accurately activate tiny or tightly packed controls.
Poorly sized touch targets can lead to:
- Accidental activation of neighboring controls
- Difficulty selecting links and buttons
- Increased cognitive effort and frustration
- Reduced task completion rates
- Higher abandonment rates during critical processes such as registration, checkout, or form submission
It’s important to remember that the visible size of an element does not always reflect its actual touch target size. What matters is the clickable or tappable area available to users.
To address these challenges, the Web Content Accessibility Guidelines (WCAG) include specific requirements for touch target sizing.
WCAG Requirements
WCAG includes requirements for touch target sizing:
WCAG Success Criterion (SC) 2.5.8 Target Size (Minimum) – Level AA
The size of the target for pointer inputs is at least 24 by 24 CSS pixels, except when:
- Spacing
Undersized targets (those less than 24 by 24 CSS pixels) are positioned so that if a 24 CSS pixel diameter circle is centered on the bounding box of each, the circles do not intersect another target or the circle for another undersized target. - Equivalent
The function can be achieved through a different control on the same page that meets this criterion - Inline
The target is in a sentence or its size is otherwise constrained by the line-height of non-target text. - User Agent Control
The size of the target is determined by the user agent and is not modified by the author;EssentialA particular presentation of the target is essential or is legally required for the information being conveyed.
Meeting these requirements helps ensure that users can reliably activate controls without unintended errors.
Targets that allow for values to be selected spatially based on position within the target are considered one target for the purpose of the success criterion. Examples include sliders, color pickers displaying a gradient of colors, or editable areas where you position the cursor.
For inline targets the line-height should be interpreted as perpendicular to the flow of text. For example, in a language displayed vertically, the line-height would be horizontal.
WCAG Success Criterion (SC) 2.5.5 Target Size (Enhanced) – Level AAA
The size of the target for pointer inputs is at least 44 by 44 CSS pixels except when:
- Equivalent
The target is available through an equivalent link or control on the same page that is at least 44 by 44 CSS pixels. - Inline
The target is in a sentence or block of text. - User Agent Control
The size of the target is determined by the user agent and is not modified by the author. - Essential
A particular presentation of the target is essential to the information being conveyed.
Using Bookmarklets to Audit Touch Targets
Manually measuring every interactive element on a page can be time-consuming and impractical, especially on large websites.
Fortunately, bookmarklets can simplify the process by automatically identifying interactive elements and displaying their dimensions directly on the page.
One useful option is the Target Size Tester bookmarklet, which helps testers evaluate compliance with:
The bookmarklet overlays visual indicators on interactive elements, making it easy to identify potential touch target failures.
To learn how to install any Bookmarklet on any browser refer to our How to Install and Use Accessibility Bookmarklets article.
How to Audit Touch Targets Using the Bookmarklet
Step 1: Navigate to the Page You Want to Test
Open the webpage that you want to evaluate for touch target accessibility.
Step 2: Activate the Bookmarklet
Select the Target Size Tester bookmarklet from your bookmarks bar.
This tool will scan the page and identify interactive elements such as:
- Buttons
- Links
- Form controls
- Other actionable interface components
Step 3: Review the Color-Coded Overlays
After activation, color-coded overlays will appear on detected interactive elements.
These overlays provide an immediate visual indication of whether a target is likely to meet or fail the selected WCAG touch target requirement.
Pay special attention to:
- Small icon-only buttons
- Closely spaced links
- Pagination controls
- Mobile navigation elements
- Social media icons
- Form controls and checkboxes
These are common areas where touch target failures occur.
Step 4: Inspect Individual Targets
Hover over an overlay to view detailed information.
The tooltip displays:
- Target dimensions
- Conformance status
Document any targets that fall below the required dimensions.
Step 5: Use the Legend Panel
You can also use the legend panel in the bottom-right corner of the page to change the success criteria and view the findings in a table.
The panel allows you to:
- Switch between AA and AAA evaluation modes
- See target indicator labels
- See indicators as minimum labels
- Hide the target indicators
- Use a Manual test cursor to understand the differece
- Review results in the form of a table
Testing against both standards can help you prioritize immediate compliance requirements while identifying future enhancement opportunities.
Step 6: Test Dynamic Content
Most websites include content that appears only after user interaction, such as:
- Dropdown menus
- Expandable accordions
- Flyout navigation
- Modal dialogs
- Interactive widgets
After triggering the interactive elements, press Alt + = to rerun the bookmarklet and refresh all overlays without reloading the page.
If the legend panel obscures a target you want to inspect, press Alt + T to temporarily hide the panel and review the underlying elements.
Step 8: Close The Bookmarklet
Activate the bookmarklet again to quit.
Common Touch Target Issues to Watch For
During audits, frequently occurring failures include:
- Small Icon Buttons:
Icons used for search, close, share, or settings often have insufficient interactive areas. - Closely Spaced Links:
Links placed immediately adjacent to one another can lead to accidental activation. - Tiny Form Controls:
Checkboxes and radio buttons are common sources of touch target failures, particularly on mobile devices. - Pagination Controls:
Previous, next, and page number links are often designed with limited spacing and inadequate target sizes. - Mobile Navigation Menus:
Hamburger menus and nested navigation items frequently present touch target challenges.
Best Practices for Remediation
When failures are identified:
- Increase the clickable area rather than simply enlarging visible text.
- Provide adequate spacing between adjacent interactive controls.
- Ensure icon-only controls have sufficiently large activation regions.
- Verify touch target size across responsive breakpoints.
- Test on real mobile devices in addition to desktop environments.
- Re-test after remediation to confirm compliance.
Remember that touch target accessibility is not solely about meeting WCAG requirements—it’s about creating interfaces that are easier and more comfortable for everyone to use.
Final Thoughts
Touch target size is one of the most impactful yet frequently overlooked aspects of accessibility and usability. Small or crowded interactive elements can create barriers that prevent users from successfully navigating a website, completing transactions, or accessing important information.
A button that is only a few pixels too small may seem like a minor design decision, but for some users it can mean the difference between completing a task independently and abandoning it altogether. By ensuring touch targets are large enough and properly spaced, organizations create experiences that are not only WCAG compliant but also more usable for everyone.
