Interactive component distance

Silktide measures the size and spacing of buttons, links, and form controls on your pages. Small controls packed closely together are easy to press by mistake, so each one should either be at least 24 by 24 pixels or have enough clear space around it.

Why this matters

Anyone can miss a small button, but for people with tremors, arthritis, or limited fine motor control, tightly packed controls make a page genuinely hard to use - tapping the wrong link, submitting the wrong form, or giving up entirely. The problem is worst on touch screens, where a fingertip is far less precise than a mouse pointer.

This is success criterion 2.5.8 (Target Size Minimum), a requirement in WCAG 2.2, so it is part of the conformance target most organisations aim for.

How to fix it

Make each interactive element at least 24 by 24 pixels. Setting min-width and min-height, or adding padding, is usually enough.
Alternatively, add space between controls so that a 24 by 24 pixel area centred on each control does not overlap its neighbours - smaller targets are acceptable when nothing else is close by.
Pay particular attention to icon buttons, pagination links, and social media icons, which are commonly undersized and tightly grouped.

/* Problem: 16px icon buttons touching each other */
.toolbar button {
  width: 16px;
  height: 16px;
}

/* Fix: enlarge the clickable area to at least 24x24 */
.toolbar button {
  min-width: 24px;
  min-height: 24px;
}

How Silktide tests this

Test both the mobile and desktop versions of every page; results may differ between the two.
Find the interactive elements: links, buttons, form fields, and image-map areas.
Ignore elements that are not normally visible, such as content positioned off-screen for , and any elements you have excluded from checking.
Pass any element at least 24 pixels wide and 24 pixels tall.
Ignore controls that sit inside a sentence or block of text, which WCAG exempts from this rule.
For each remaining small element, measure the gap to every other interactive element. The required gap is 24 pixels minus the element's width (horizontally) and 24 pixels minus its height (vertically).
Report the element if another control falls inside that gap, unless both are links to the same destination. Elements pinned to the screen, such as sticky headers, are compared with other pinned elements rather than with the content that scrolls underneath them.

Troubleshooting

A small control passed the check

Size alone is not a failure: a small control passes when it has enough clear space around it, sits inline in text, or only neighbouring links pointing to the same place. This mirrors the exceptions WCAG itself allows.

Only some failures are listed

Silktide reports up to the 10 most severe examples per page. Fixing a shared style usually resolves many findings at once.

I want the stricter standard

This check tests the Level AA minimum of 24 by 24 pixels. The related Large enough controls check tests the stricter Level AAA recommendation of 44 by 44 pixels.