Target Size Accessibility Checker

WCAG 2.5.8 (Target Size Minimum, Level AA) is a new criterion introduced in WCAG 2.2 (October 2023). It requires that interactive targets (buttons, links, form controls) have a size of at least 24x24 CSS pixels, or have sufficient spacing from adjacent targets to create an equivalent target area. The earlier WCAG 2.5.5 (Target Size Enhanced, Level AAA) from WCAG 2.1 requires 44x44 CSS pixels. Exceptions to 2.5.8 include: inline text links within sentences, targets where the size is essential (a pixel-level color picker), targets whose size is determined by the user agent (default checkboxes), and targets with sufficient spacing. This criterion addresses a real-world problem: mobile users and users with motor impairments struggle with small touch targets, leading to errors, frustration, and abandonment.

Undersized targets create barriers for large user populations:

• Motor disabilities: Users with tremors, limited dexterity, or conditions like Parkinson's disease need larger targets to avoid accidental taps. A 16x16px icon button is nearly impossible for many motor-impaired users
• Mobile users: Apple's Human Interface Guidelines recommend 44x44pt minimum touch targets. Google's Material Design specifies 48x48dp. Targets below 24px are problematic even for users without disabilities on touchscreens
• Elderly users: Age-related decline in fine motor control makes small targets increasingly difficult. With 16% of the global population aged 65+ by 2050, target size is a growing concern
• Situational impairments: Users wearing gloves, on a moving bus, or holding a child use reduced precision. Larger targets accommodate these real-world conditions

Studies show that increasing button size from 16px to 44px reduces touch errors by up to 70%.

Frequent target size failures and their solutions:

• Icon-only buttons: <button><svg width="16" height="16">...</svg></button> — the button is only 16x16px. Fix: add padding: button { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
• Close buttons: Modal close "X" buttons are often 12-16px. Fix: increase the click area with padding even if the visible icon remains small
• Pagination links: Small numbered links (1, 2, 3) cramped together. Fix: add padding and gap: .pagination a { min-width: 44px; min-height: 44px; display: inline-flex; gap: 4px; }
• Footer link lists: Dense lists of small links. Fix: increase line-height and add padding: .footer a { padding: 8px 0; display: inline-block; }
• Form checkboxes/radios: Default browser controls may be small. Fix: use appearance: none with custom sizing, or use the spacing exception by ensuring adequate gap between controls

CompliScan evaluates interactive elements against the 24x24px minimum using computed element dimensions from the live DOM. The scanner identifies buttons, links, inputs, and custom interactive elements (role="button", role="link") whose computed size falls below the threshold, accounting for padding, borders, and the spacing exception. Each finding reports the element's actual computed size, the required minimum, and an AI-generated CSS fix to increase the target area — often just adding min-width, min-height, and padding. CompliScan also checks for inline links (which are exempt) and distinguishes them from standalone interactive targets. For mobile-optimized sites, consider targeting the AAA criterion of 44x44px — this aligns with Apple and Google design guidelines. As WCAG 2.2 is adopted into legislation (the European Accessibility Act and future US regulations), target size will become a legal requirement. Run a free scan to identify all undersized targets on your site.