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.
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 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
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
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.