Here’s a common accessibility issue that impacts all users — not just people with disabilities: User controls must be large enough to be operable.
The Web Content Accessibility Guidelines (WCAG) 2.1 addresses this issue in Success Criterion (SC) 2.5.8, “Target Size (Minimum),” which sets a minimum target size for pointer inputs of at least 24 by 24 CSS (Cascading Style Sheets) pixels.
The criterion includes a few exceptions, but it’s certainly achievable. In fact, it’s a little too achievable: A 24 by 24 target may still be too small for some users to operate comfortably.
Remember, the purpose of digital accessibility is to enhance experiences for real users. You want to make improvements that actually help people, and pointer targets certainly impact your audience.
Where possible, make pointer input targets at least 44 by 44 CSS pixels
The 44 by 44 requirement comes from WCAG SC 2.5.5, “Target Size (Level AAA).” Meeting that requirement isn’t strictly necessary if your goal is Level AA conformance; read about the differences between WCAG conformance levels.
But a slightly larger pointer target won’t negatively impact your site’s aesthetics, and it may be extremely helpful for your users. You can easily meet the requirement by reviewing pointer inputs and making slight adjustments:
- If you’re using radio buttons, make the entire option clickable (including the text), not just the button.
- If you provide multiple targets on a single page that provide the same function (for instance, an “Add to Cart" button and a larger link on each page that leads to the same shopping cart), make sure that at least one of them meets the 44 by 44 pixel threshold.
- Pay special attention to controls that are used frequently and controls that are part of a sequential task (such as a checkout process).
- Make sure your web designers are aware of WCAG’s requirements for pointer target size.
- Make sure that all controls are positioned appropriately to minimize accidental activation.
If you absolutely can’t meet the 44 by 44 pixel threshold for a certain element, you can use the 24 by 24 pixel minimum.
However, this is one situation where following the Level AAA requirement makes sense: You don’t want to create unnecessary frustrations for your visitors. A tiny button or icon can certainly create those frustrations, particularly for mobile users.
Related: WCAG Level AAA Success Criteria Are Strict, But They're Still Worth Your Attention
WCAG provides some exceptions for pointer target sizing
You don’t need to worry too much about pointer input size for targets that are inline (part of a sentence or a block of text). For example, if your sentence ends with a footnote in superscript, that’s part of the sentence, and WCAG’s target size requirements do not apply.
As we discussed earlier, you’ve also got some leeway if your content has several pointer targets that serve the same purpose. Make sure that users can easily determine the purpose of each target and that images have appropriate alternate text explaining what will happen when the target is activated.
WCAG also provides an exception for user agent controls — situations where the size of the target is determined by the user agent and isn’t modified by the author. This isn’t a common issue for websites, but it may be an important consideration when developing a mobile app.
Related: How "Drag-And-Drop" Movements Affect Web Accessibility
When addressing any web accessibility issue, stay focused on real users
Once again, it’s important to remember your goal: You want your website to be useful, usable, and intuitive. Pointer inputs are important; they allow people to complete processes, navigate your website, and find the information they need.
To that end, if you can easily implement larger targets, go ahead and take that step. Consider auditing your user controls for accessibility (automated tools from AudioEye and the Bureau of Internet Accessibility can be especially helpful here).
If you’re ready to build an accessibility strategy, we’re here to help. Get started with a free automated analysis or send us a message to connect with a subject matter expert.
