Test Page Notice
This page contains intentionally problematic accessibility patterns for testing and demonstration purposes only.
Do not use these examples in production websites. They violate accessibility guidelines and best practices.
This page is designed to work with the Accessibility Visualizer browser extension to help developers identify and understand accessibility issues.
Target Size
Interactive targets such as buttons and links need to be large enough, and spaced far enough apart, to be operated comfortably by touch and pointer users. WCAG 2.5.8 (AA) requires a minimum target size of 24×24 CSS pixels, and WCAG 2.5.5 (AAA) recommends at least 44×44 CSS pixels. Undersized targets can still pass if there is enough spacing around them. The following examples use buttons to show target size and spacing patterns.
Single Target Size
Comfortably sized button (44×44px)
✅ A button at least 44×44 CSS pixels. This meets the AAA recommendation (WCAG 2.5.5) and is easy to operate for touch and pointer users.
Minimum sized button (24×24px)
⚠️ A 24×24 CSS pixel button meets the AA minimum (WCAG 2.5.8) but is on the edge. A larger target of 44×44px is recommended for comfortable operation.
Too small button (16×16px)
❌ A 16×16 CSS pixel button is below the 24×24px minimum. It is hard to tap accurately and fails WCAG 2.5.8.
Spacing Between Targets
Too small buttons packed together
❌ Several undersized buttons placed right next to each other with no spacing. Each target is too small and too close to its neighbors, making them easy to mis-tap.
Large and small buttons adjacent
❌ A large button next to a small button with no spacing. Even though one target is large, the small one is undersized and sits too close, so it is easy to activate the wrong one.
Adequate spacing around small targets
✅ The same small buttons, but with enough spacing that a 24px circle centered on each target does not overlap its neighbors. This satisfies the WCAG 2.5.8 spacing exception. Making the targets 44×44px is still preferable.