Why it matters
WCAG 2.2 added success criterion 2.5.8: anything people tap or click must be at least 24 by 24 pixels, or spaced so that a 24px circle around it doesn't overlap its neighbours. Tiny social icons and close buttons are the usual failures, and they're as frustrating for someone with a tremor as they are for anyone using a phone on a bus.
Keyboard users need to see where they are (2.4.7 Focus Visible), and screen reader users need every control to have a name (4.1.2). These three problems are quick to fix once you can see them, so this checker lists every control with a number on the preview.
How to use it
- Paste the HTML of a page, a component or a form, including its <style>. Or load the example.
- Pick the screen width to test at and press Check.
- Read the table: red rows need attention. The numbers match the outlines on the preview.
- Download the report as Markdown or CSV for your ticket or audit.
FAQ
Why does a link in a sentence pass?
WCAG 2.5.8 exempts links inside a sentence or block of text, because their size is set by the text around them.
How is the focus style detected?
The checker focuses each control and compares its outline, border, shadow, background and text colour before and after. If nothing changes, there's no visible focus style. It can't judge whether a change is clear enough, so check that by eye.
Why don't my scripts or images run?
The preview is a locked-down frame: scripts are switched off and nothing is fetched, so your HTML can't do anything unexpected. Image sizes still count if you set width and height in HTML or CSS.
Is my HTML uploaded?
No. It's rendered in a sandboxed frame on this page.
