Test minimum touch target
Touch targets should be at least 44×44 CSS pixels, with at least 24×24 for enhanced (AAA). Google Material Design recommends 48×48dp minimum for comfortable touch.
Click to measure
💡 Click each button to measure its actual rendered size
Compare accessible vs inaccessible
Click buttons to see measurements
Size recommendations
Automation hints
// Verify touch target sizes
const MIN_SIZE = 44;
test('touch targets meet WCAG', async ({ page }) => {
// Get all interactive elements
const buttons = page.locator('button, a, [role="button"]');
const count = await buttons.count();
const tooSmall: string[] = [];
for (let i = 0; i < count; i++) {
const btn = buttons.nth(i);
const box = await btn.boundingBox();
if (box && (box.width < MIN_SIZE || box.height < MIN_SIZE)) {
const text = await btn.textContent();
tooSmall.push(
`${text}: ${box.width}x${box.height}px`
);
}
}
if (tooSmall.length > 0) {
console.log('Too small:', tooSmall);
}
expect(tooSmall.length).toBe(0);
});
// Measure specific target
const target = page.getByTestId('target-44');
const box = await target.boundingBox();
expect(box.width).toBeGreaterThanOrEqual(44);
expect(box.height).toBeGreaterThanOrEqual(44);
// Check computed styles
const minWidth = await target.evaluate(el =>
getComputedStyle(el).minWidth
);
expect(parseInt(minWidth)).toBeGreaterThanOrEqual(44);/* Always set minimum touch size */
button, a, [role="button"] {
min-width: 44px;
min-height: 44px;
}
/* Use padding for larger hit area */
.icon-button {
padding: 12px; /* makes ~44px with icon */
}
/* Touch-action for better response */
button {
touch-action: manipulation;
}
/* Spacing between targets */
.button-group button {
margin: 4px; /* prevent mis-taps */
}
/* Media query for touch devices */
@media (pointer: coarse) {
button {
min-height: 48px;
min-width: 48px;
}
}
/* Tailwind approach */
<button className="min-w-[44px] min-h-[44px] p-3">
Icon
</button>
/* Or use Tailwind's size utility */
<button className="size-11"> {/* 44px */}
Icon
</button>