Target Size

Target size refers to the physical dimensions of interactive elements on a web page, such as buttons, links, form controls, and any other clickable or tappable areas. In accessibility, target size requirements ensure these elements are large enough to be activated accurately and comfortably by all users, including those with motor impairments, tremors, limited dexterity, or those using touchscreens where precision is inherently lower. WCAG 2.2 introduced two success criteria addressing target size. Success Criterion 2.5.8 (Target Size Minimum) at Level AA requires that targets are at least 24x24 CSS pixels, with specific exceptions and a spacing-based alternative. Success Criterion 2.5.5 (Target Size Enhanced) at Level AAA recommends targets be at least 44x44 CSS pixels. The addition of target size at Level AA was one of the most impactful changes in WCAG 2.2. Previously, only the AAA criterion existed, meaning most compliance targets did not include a target size requirement. The new Level AA criterion ensures that basic target size standards are part of mainstream accessibility compliance.

Small interactive targets create significant barriers for multiple user groups. People with tremors, arthritis, or limited fine motor control struggle to tap or click small elements. People using touchscreens operate with the imprecise tip of a finger rather than a pixel-precise mouse cursor. People using assistive devices like head pointers or mouth sticks have limited precision. When targets are too small, users miss-tap repeatedly, accidentally activate adjacent controls, or simply cannot use the interface at all. This is not a minor inconvenience. For someone with Parkinson's disease trying to schedule a medical appointment, small buttons can make the difference between completing the task independently and needing assistance. Research consistently shows that larger targets reduce error rates and improve task completion times for all users, not just those with disabilities. Mobile design guidelines from Apple (44pt minimum) and Google (48dp minimum) reflect this, though these are platform-specific recommendations, not web standards. The cost of compliance is minimal. Making buttons and links slightly larger is one of the simplest accessibility improvements to implement, yet it has a meaningful impact on usability for a large population of users.

WCAG 2.5.8 (Target Size Minimum, Level AA) requires one of the following: **The target is at least 24x24 CSS pixels:** ```css button, a.button, [role="button"] { min-width: 24px; min-height: 24px; } ``` **Or, undersized targets have sufficient spacing** so that the 24px circle centered on each target does not overlap with the 24px circle of any adjacent target. This spacing-based approach allows smaller targets as long as they are not crowded together. **Exceptions to the 24px requirement include:** - **Inline targets.** Links within a paragraph of text are exempt because sizing them would disrupt the text flow. - **User agent controlled.** Targets whose size is determined by the browser and not modified by the author (default checkboxes, radio buttons). - **Equivalent alternative.** A larger target for the same function exists elsewhere on the page. - **Essential.** The specific size is essential to the information being conveyed, such as a pin on a map. WCAG 2.5.5 (Target Size Enhanced, Level AAA) sets a higher standard of 44x44 CSS pixels, with fewer exceptions. This is the ideal to aim for. **Practical implementation guidance:** ```css /* Minimum compliant button */ .btn { min-width: 44px; /* Aim for AAA */ min-height: 44px; padding: 12px 16px; } /* Icon buttons */ .icon-btn { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; } /* Link spacing in navigation */ nav a { display: inline-block; padding: 8px 12px; /* Padding increases the clickable area */ } ``` **Key techniques for meeting target size requirements:** - **Use padding to increase clickable area** without changing the visual size of the text or icon. - **Set minimum dimensions** on buttons and interactive controls. - **Space adjacent targets adequately** so users don't accidentally activate neighbors. - **Use `touch-action` CSS** to prevent double-tap-to-zoom delays that shrink effective target areas. - **Test on actual touch devices** to verify that targets are comfortably tappable. **Common failures:** - Icon-only buttons (close, menu, settings) rendered at 16x16 or 20x20 pixels - Dense toolbars with tightly packed small icons - Data table rows with tiny action links - Pagination controls with small page number links - Social media share icon rows