2.5.8 Target Size (Minimum) (Level AA)

In today's digital world, using websites and apps has become a part of our everyday lives. But have you ever struggled to click on a button or link because it was too small? That's where WCAG 2.2 comes in, with its guidelines on target sizes. Let's explore what this means and why it's important for everyone, especially those with disabilities.

What are Target Sizes?

Target sizes refer to the clickable areas on a website or app, such as buttons, links, or form fields. WCAG 2.2 sets guidelines to ensure that these targets are large enough and spaced well to be easily clickable, especially for people with motor disabilities or those using touch screens.

Why Target Sizes Matter:

Larger target sizes make it easier for everyone to interact with websites and apps, regardless of their abilities. For people with motor impairments or dexterity issues, larger targets reduce the risk of accidental clicks and make navigation smoother.
Touchscreen-Friendly Design: With the rise of smartphones and tablets, many users rely on touchscreens to interact with technology. Adequate target sizes ensure that users can tap on buttons and links accurately, enhancing the overall user experience.

How can we meet 2.5.8 Target Size (Minimum) (Level AA) ?

Touch targets, like buttons or links you tap on a touchscreen, should be at least 24 by 24 pixels in size. Imagine drawing a box around the target – it should be at least this big. If it's too small, it needs to be at least 24 pixels away from other touch targets to make sure you can easily tap on it without accidentally hitting something else.

How to test?

For Designers:

When designing prototypes in tools like Figma, you can easily view the dimensions of elements and factor in spacing between controls. Here's how to do it:

1. Display Element Dimensions: In Figma, select the control or element you want to inspect. The dimensions of the selected element will be displayed either directly on the canvas or in the properties panel.
2. Factor in Spacing Between Controls: To view the spacing between controls, follow these steps:

• On Mac: Press the Option key.
• On Windows: Press the Alt key.
• While holding down the Option or Alt key, hover over another element on the canvas. Figma will display the distance between the two elements, helping you ensure adequate spacing.

By utilizing these features in Figma, you can accurately design prototypes with appropriate target sizes and spacing between controls, contributing to the accessibility and usability of your designs.

For Developers/ Testers: 

1. Open your web page in Google Chrome.
2. Right-click on the target element you want to inspect.
3. From the context menu, choose "Inspect".
4. Alternatively, you can access the development tools panel by going to the Chrome settings menu, selecting "More Tools", and then "Development Tools".
5. In the development tools panel, navigate through the list of HTML elements or directly select an element by clicking on it with your mouse.
6. With the element selected, you'll be able to view its size in the development tools panel.
7. Take into account any spacing between controls to accurately assess the target size.

Apart from the above mentioned method one can use the following bookmarklets to test target size:

• 24×24 Pixel Cursor Bookmarklet by Adrian Roselli
• Quick and Very Dirty Target Size Checker by Steve Faulkner
• DigitalA11Y Tublets – Chrome Extension

Conclusion:

Ensuring adequate target sizes is a crucial aspect of creating accessible and user-friendly websites and apps. By following WCAG 2.2 guidelines, developers can make digital experiences more inclusive and enjoyable for everyone, regardless of their abilities or the devices they use. Let's strive to design websites and apps that are accessible to all, one click at a time.