Small, crowded click target

Why does it matter?

Tiny icons packed close together — social links in the footer, pagination numbers, close buttons — are hard to hit for people with tremors or limited dexterity and for anyone using a phone. WCAG 2.2 asks for targets of at least 24 × 24 pixels, or enough space around smaller ones that a miss does not land on something else.

Who it affects: Keyboard, screen reader and low-vision users — every visitor meets the page title, language, landmarks, keyboard focus, target sizes and zoom settings on every page.

What does Lumtera flag?

Checked in review mode's Whole page tab, measuring the rendered size of links, buttons, form controls and other clickable elements. A target smaller than 24 × 24 pixels is reported only when it is crowded (another target lies within 12 pixels of its center, or another small target is less than 24 pixels away), so small targets with enough space pass. Links inside a sentence, and checkboxes and radio buttons that have a label or are drawn by the browser, are exempt. Similar targets are grouped. For review.

Check ID page-target-size, as shown in review mode and saved results.

How do I fix it in WordPress?

Make the link or button at least 24 × 24 pixels (padding counts), or add space so nothing else is within 12 pixels of its center. Icon links in headers and footers, and pagination, are the usual suspects. This is fine if another control on the page does the same thing at a good size.

Example

.social-links a { width: 16px; height: 16px; margin: 0 2px; }

.social-links a { width: 16px; height: 16px; padding: 4px; margin: 0 4px; }

How do I check the fix?

1. Reload the page in review mode and run the Whole page tab again. The finding disappears once the rendered page passes.
2. Load the page and press Tab: a "Skip to content" link should appear first, and you should always see where focus is, even under a sticky header. Pinch-zoom on a phone, and check the browser tab shows a meaningful title.