About this block

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.

When to use

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

• A11y checklist panel

After

• Keyboard nav guide
• Screen-reader labels table

What you can display

One strong use is the workspace control hit area audit. Other target size shapes:

• Mobile layout pass. The same controls measured at touch density instead of desktop.
• Form control audit. Checkboxes, radios, and switches sized against the 24px minimum.
• Spacing exceptions. Undersized targets that still pass thanks to the offset around them.

Tip: measure the hit area, not the glyph; padding and pseudo-elements often make a target larger than the icon alone suggests.