In this post, we’ll be touching on how interactive targets in your UI can be sized to ensure accessibility and overall usability.
So what exactly is a target? The WCAG defines a target as a “region of the display that will accept a pointer action, such as the interactive area of a user interface component.”
Having accessible target sizes is important, as it supports users in easily activating controls and prevents them from inadvertently performing unintended actions.
Typically, we hear about target sizes being important for users on touch devices as it’s important to increase the tappable area of many UI controls. However, increasing target size also benefits:
- Users with hand tremors
- Users with decreased dexterity or fine motor control
- Users who are in an environment that can increase hand shaking, such as a bumpy ride on public transportation
Now let’s look at what the Web Content Accessibility Guidelines have to say about target sizes:
Related Success Criteria
2.5.8: Target Size (Minimum) (Level AA)
This criterion is still in the draft stage for WCAG 2.2, so it’s liable to change. However, anyone who’s aiming for AA compliance should start taking these draft recommendations into consideration.
At the time of publication, this requires that the target size for pointer inputs is 24 x 24 pixels. The success criterion includes exceptions; these include situations where the target is inside a paragraph of text, or when there is spacing of at least 24px between adjacent targets. Read the draft content for other exceptions to Target Size (Minimum).
One thing to keep in mind is that just meeting the WCAG guidelines doesn’t necessarily result in the most usable or accessible experience. While this SC provides us with a minimum size to aim for, it doesn’t necessarily equate to the most usable and accessible design solution.
Which brings us to…
2.5.5 Target Size (Level AAA)
This is a WCAG 2.1 AAA level requirement. Even if it isn’t your goal to meet the AAA conformance level, this recommendation most closely aligns with best practices for target sizes.
This guideline requires all targets — with some exceptions — measure at least 44 by 44px.
You can look to existing UX research and established design systems in support of larger target sizes. For example, Material Design recommends that target sizes are at least 48x48 device-independent pixels (dp) for targets on touch devices, and at least 44x44 dp for pointer devices like mouse and/or styluses.
Designing accessible touch targets
Identify unique targets
First, go through your designs (or existing UI) and identify all of the unique interactive targets.
These can include:
- CTA buttons
- Inputs like checkboxes, text inputs, etc.
- Navigation linklists
- Video player controls
Remember to reference the list of exceptions in the Success Criteria. For example, links that are part of paragraph text are exempt from these guidelines. So are targets that have an equivalent control that does meet the guideline.
Got it? Great, let's go to the next step.
Measure size and spacing
Now, take some time to analyze the target and decide if it would benefit from changes to its size or spacing in relation to nearby targets.
Let’s take a look at an example component that’s very common in web interfaces: pagination.
Many times, you’ll see pagination that looks something like what’s presented below: a horizontal list of numbered links.
Here we see what our initial component looks like in the design file; I’ve zoomed in a bit, but for reference, the text in the design file is 16px. Just below that, I’ve drawn a bounding box around two of the clickable links to demonstrate the target sizes.
You’ll see that the target size only wraps the text content of the links, and that the offset between adjacent targets is only 20px.
This is one component that can definitely use some improvement in terms of target sizing.
Update target size and/or spacing
How you design your new and improved targets will depend on which conformance level you’re targeting.
If you’re targeting the draft AA guidelines, you might simply add some horizontal spacing between the pagination links via a margin. This may result in fewer accidental taps on the wrong page for touch device users (i.e. accidentally tapping page 3 when you meant to tap page 2).
But what about users who have trouble activating small targets for other reasons? Imagine a mouse user with a hand tremor who is trying to hit the correct page number.
Increasing the spacing doesn’t make it any easier for them to successfully click on such a small target. But increasing the target size does.
The more inclusive and accessible solution would be to increase the padding — or set a minimum height and width — on each link element so that the target itself is larger.
Test your UI
Pesticide
One way you can start identifying small targets is by using the browser extension Pesticide.
This browser extension draws an outline around all elements on the page. This enables us to start identifying target sizes that should be larger.
As an example, let’s turn on the Pesticide extension on the category index page.
Two areas clearly stand out here.
First, there’s a bit of overlap between the category parent toggle and the reordering target. Increasing the spacing between these items or increasing the target size would help increase the usability of these items.
Next, the icon links to view the category pages are very small at around 12px by 16px. It’s an acceptable implementation under the 2.5.8 draft guidelines because it falls under the spacing exception; there are no adjacent targets. However, we could easily increase the link size — and improve the user experience — without affecting the overall page design.
Bookmarklets
There are several bookmarklets out there that you can use to test for accessible target sizes. These bookmarklets will draw a box around your cursor so you can test your UI targets against the WCAG requirements:
(Note: these aren’t the bookmarklets themselves, but pages that include the bookmarklets and instructions for how to use them.)
When your interactive components don’t have a clear border, it’s helpful to activate both Pesticide and a cursor bookmarklet simultaneously. This allows you to see both the bounding box of the element and the cursor box simultaneously.