Forms - Target size (Desktop and Advanced Editor)

WCAG 2.2, Success Criteria 2.5.8, requires that the target size for “pointer inputs” be at least 24 by 24 CSS pixels.  There are, of course, some exceptions to the rule, one being that, if “targets” are too small then they at least have to be spaced far enough apart.

Let’s break this down.

What’s a “pointer input” and what’s a “target?” 

A “pointer input” is something that can, for example, click on something on the screen.  Examples include mice, pens, styluses, and your finger.

The “target” is the clickable “thing” on the screen that the pointer is clicking on.  So, in a form, that would be the form field, checkbox, or radio button, for example.   

How big is “big enough?”

The W3C, the creators of the WCAG standard, have defined “big enough” as 24 by 24 CSS pixels.  But what’s a “CSS pixel?”  This gets technical.  However, if your form fields are at least 6 ¼ mm (or about ¼ inch) wide, and at least 6 ¼ mm (or about ¼ inch) tall, you’re good to go. 

How far is “far enough apart?”

The W3C states, in the “Spacing” exception to Success Criteria 2.5.8, “if a 24 CSS pixel diameter circle is centered on the bounding box of each target (checkbox, for example), the circles do not intersect another target or (one circle does not intersect) the circle for another undersized target.”

This is even further explained in their article “Understanding SC 2.5.8: Target Size (Minimum) (Level AA).”  In that article, if you scroll down, you’ll find screenshots as they relate to not only the size requirement but also to spacing.  In fact, they include “passing” examples as well as “failing” examples.

What if my form fields are out of compliance?

You can resize form fields in Adobe Acrobat.  In the “Tools” section, in Acrobat, open “Prepare Form,” where you can select form fields and resize them as needed.

If you need to increase the spacing between fields, you may need to use a combination of Acrobat’s “Prepare Form” functionality and their “Edit PDF” functionality. 

Important Note:  If you are editing the PDF, for example, moving text boxes to increase spacing, that is going to impact the tagging in the PDF.  Do this first, before you remediate the document! 

What happens in CommonLook PDF

In CommonLook PDF, if link or form annotations are less than 24 x 24 CSS pixels, or if the target’s “diameter circle” intersects with another object’s diameter circle within 24 pixels, those annotations will be flagged for User Verification.  The Description for the checkpoint reads, “Is the target of the pointer input constrained by the line-height of non-target text, or is this particular presentation of the target essential or legally required? Pass if Yes, Fail if No.”

It’s important to note that, when targets are too small, they are not an immediate failure due to the allowed exceptions.  For more information on “diameter circles,” and the allowable exceptions to the Target Size requirement, please review the article, “Understanding SC 2.5.8: Target Size (Minimum) (Level AA).”

Didn't find what you're looking for? Navigate to our "Forms" section for more related articles that may help!