Accessible touch target sizes and inline links

Accessible user interfaces are important. When crafting components in a Design System, we need to do our best to make sure that our UI is usable by everyone. Much has been written about inclusive design, and it is easier than ever to understand and follow WCAG guidelines.

But it still can be tricky at times to know if you're doing it right. :) There might be a WAI-Aria pattern for the type of UI component your working on. It might be robust, and have all the different scenario's you might need to cover for your use-case.

Other times, it's not so cut-and-dry. Doing just enough research to be confident that you're implementing an accessible UI pattern correctly can be tricky; sometimes it can feel like you get a good understanding of how to approach something, only to read another article by a source that seem like an authority on the topic, that suggests the opposite.

Here's the result of some research I recently did into accessible touch target sizes, and how they apply to elements within the flow of text.

Minimum touch target sizes don't apply to links within the flow of text

Making interactive elements like buttons or links that are large enough to click with a mouse or tap on a touch device is important. Simply clicking on these elements at the best of times can be tricky if the text is small, and it's important to consider that people who live with a disability that impacts their fine-motor skills may find these interactions particularly challenging.

The WCAG 2.1 Guidelines recommend a minimum touch-target size of 44px by 44px as a way to ensure elements can be interacted with successfuly in as many ways possible. Accessibility rules like this are categorized under the acronym POUR, standing for Perceivable, Operable, Understandable and Robust.

Touch-target size falls under Operable > Input modalities. Checkout the documentation for Success criterion 2.5.5 Target Size (Level AAA) for more information.

This is an important piece of context to know when commencing design of interactive elements like buttons and links; a fundamental building block of a Design System, and usually one of the first go-to's when we start creating UI components.

If we know from the get-go that we are aiming to reach Level AAA for accessibility for our target audience, then we have to make our buttons and links at least 44 pixels tall by 44 pixels wide.

Or do we...? 🔥

Well, generally yes. But there is a use-case where the touch target doesn't have to meet the criteria: Inline links.

When we have a link that's placed in the body of a paragraph, it's considered an inline element. If we were to make all links a minimum of 44 pixels tall, we might run into an issue when placing a link into text, where the line-height isn't a minimum of 44 pixels.

It's for this very reason that the WCAG Guidelines offer a caveat for target size in the case of inline elements like links.

From the spec:

"Since targets can appear anywhere on the line, the size cannot be larger than the available text and spacing between the sentences or paragraphs, otherwise the targets could overlap. It is for this reason targets which are contained within one or more sentences are excluded from the target size requirements." WCAG Guidelines

With this in mind, we can make block level or 'standalone' links meet the success criteria, but allow links that display inline to be smaller.

Creating a React component, we might set the user of our link up for success by baking these sizes in, creating an <InlineLink /> and a <StandaloneLink /> component for different use-cases. Describing usage in the name helps the user know it's intended use, and the accessibility consideration of target size is easily implemented.

This all may seem somewhat obvious; the spec clearly states the caveat when using inline links. But one thing I found in researching the issue is that there are a lot of articles out there recommending a minimum touch target size. But you need to dig that bit deeper and read the guidelines to find the "inline link" exception.

I've come across interfaces where an icon button, or a link with an icon to indicate that the link is external is made a certain size, therowing the line-height out for that particular line. It's not a great look, and it's good to know that the WCAG have a solution for it. Read more about links and target size in this great article on CSS tricks.

Conclusion

If you're aiming to achieve Level AA compliance, then 24 x 24 pixel touch targets are sufficient. If you're aiming for AAA, then 44 x 44 pixels is sufficient.

If you're placing an element within the flow of a paragraph of text, like a link, or an icon, then it doesn't need to adhere to the minimum target size. If it did, it could potentially cause other interactive elements on other lines to overlap with it, which would cause further issues.

This wasn't immediately obvious to me, and I can understand that if we're trying to follow recommended touch target sizes, and this caveat is missed, it could be a bit of a head scratcher. Let you're fellow designers an developers know about it :)