Touch Target Audit
Interactive control audit showing hit areas at true scale in 44px frames with measured sizes, AA and AAA badges, and fix hints.
Interactive control audit showing hit areas at true scale in 44px frames with measured sizes, AA and AAA badges, and fix hints.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Touch Target Audit renders interactive controls from the Acme workspace at true scale inside a dashed 44px reference frame. Each row pairs the live swatch with the control name, its selector, the measured width and height, and two badges for WCAG AA and AAA target sizes. Undersized controls carry a fix hint, and a summary chip reports how many pass each level. The tag remove control and the slider thumb fail AA outright; the row overflow menu meets the 24px minimum exactly.
Targets are one typed array with both boolean fields on every object, so the summary counts, the swatches, and the badges never drift. Each swatch uses inline style clipped to the 44px frame, so the preview reflects the real measured size rather than a fixed box.
Reach for this block in an internal accessibility tooling area or an audit report, wired to the dimensions your test runner reports. Touch density matters most on small screens, so clear the failing controls before shipping a mobile layout.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the workspace control hit area audit. Other target size shapes:
Tip: measure the hit area, not the glyph; padding and pseudo-elements often make a target larger than the icon alone suggests.