Understanding Target Size Under WCAG 2.2 and How It Affects People with Disabilities

On May 11, 2021, Web Accessibility Initiative introduced a new working draft of the Web Content Accessibility Guidelines (WCAG) 2.2. The new document adds several guidelines, including revised language for Success Criterion (SC) 2.5.8, which covers pointer target spacing — now simplified as “Target Size.” 

It’s important to understand that the guidelines have three levels of conformance: Level A (lowest), Level AA, and Level AAA (highest). SC 2.5.8 applies to all sites aiming for Level AA conformance or higher, and it reduces the minimum target size to 24 by 24 CSS pixels (we’ll explain what those terms mean later in this article). Your site can still be reasonably accessible without conforming to this criterion, but it’s often an easy change that improves the user experience for all visitors. 

What is target size, and how does it affect people with disabilities? 

A target is the region of a display that will accept a pointer action. Common examples include buttons and hyperlinks. When a target is too small or located near another target, users may experience issues when operating controls or navigating to another page. 

Small pointer targets can affect anyone, including people who don’t live with permanent disabilities. Large, distinct targets can provide a better user experience for:

• People with fine motor control impairments
• People who use eye-tracking or motion-tracking assistive technologies
• People with large fingers accessing a site using a touchscreen device
• People accessing a website or app during a bumpy ride on public transportation

As with other accessibility issues, small targets can drive users away from your content. For example, a user who has fine motor control impairments may be unable to select a small “submit" button on a form entry. Rather than struggle with the form, the user might simply leave the site.

The WCAG 2.2 Working Draft makes changes to target size requirements

Pointer size issues often occur when developers prioritize one version of a site (for instance, a desktop view) over others, or when developers fail to consider assistive technologies and alternative input devices.

If your content contains small interactive elements, make sure that they’re accessible for all users. WCAG 2.2 requires targets to have an area of at least 24 by 24 CSS pixels, except in these circumstances:

• The target offset is at least 24 CSS pixels to every adjacent target.
• The target is in a sentence or block of text (for instance, two hyperlinks contained in a single paragraph).
• A particular presentation of the target is essential to the information being conveyed. For example, if users select a point on a map, the target will need to be relative to the geographic location. In this case, a larger target size would prevent the content from conveying accurate information.
• The size of the target is legally required. Some legal forms may be designed to replicate paper forms, so target size may not be changeable.

Another important note: For the purpose of WCAG conformance, an interactive element that allows users to make a selection based on spatial position is considered a single target. For instance, if your site has a color picker tool, the entire tool is a single target — you won’t need to ensure that every color is at least 24 by 24 CSS pixels. 

Make sure your website conforms with the latest WCAG standards

WCAG 2.5.8, “Target Size,” is applicable to Level AA and Level AAA websites, so failing this success criterion won’t prevent a site from earning Level A conformance. However, adjusting target size is often a simple fix, and the goal of accessible site design isn’t to mark off checkboxes — the goal is to create a better website that doesn’t limit your audience.

Adjusting the size of your interactive elements can be a simple way to improve the user experience for everyone, not just users with disabilities. Remember, your content can pass this criterion by simply increasing the spacing between extremely small targets, so you don’t necessarily need to redesign your site to make this accommodation. We should also note that WCAG SC 2.5.8 defines a minimum target size, but larger targets are often preferable. 

Webmasters will want to make these changes as part of a larger accessibility initiative. Start by auditing your website thoroughly, then make sure you understand the core principles of accessible design. Accessibility can deliver a better browsing experience for everyone, and WCAG 2.2 provides an excellent framework for learning about potential barriers.