Touch Target Min
All interactive targets (buttons, links, form controls, custom widgets) on touch surfaces MUST present a hit area of at least 44×44 CSS pixels, per Apple Human Interface Guidelines and WCAG 2.2 SC 2.5.…
$ aoe install @community/rule-touch-target-minProjection
Always in _index.xml · the agent never has to ask for this.
TouchTargetMin [rule] v1.0.0
All interactive targets (buttons, links, form controls, custom widgets) on touch surfaces MUST present a hit area of at least 44×44 CSS pixels, per Apple Human Interface Guidelines and WCAG 2.2 SC 2.5.8 (Target Size, Minimum: 24×24).
Loaded when retrieval picks the atom as adjacent / supporting.
TouchTargetMin [rule] v1.0.0
All interactive targets (buttons, links, form controls, custom widgets) on touch surfaces MUST present a hit area of at least 44×44 CSS pixels, per Apple Human Interface Guidelines and WCAG 2.2 SC 2.5.8 (Target Size, Minimum: 24×24).
Checks
- @community/check-touch-target-min
Applies To
@community/type-html-artifact
Meta
- License: Apache-2.0
- License Provenance: package-authorship-claim
Severity
high
Severity Combination
interactive element < 24×24 CSS px (WCAG AA fail) → BLOCK
interactive element 24×24 to 44×44 CSS px (HIG miss, WCAG ok) → WARN
interactive element ≥ 44×44 CSS px → PASS
Failure Mode
Users mis-tap adjacent controls; mobile error rates spike; users with motor impairment are excluded; older users abandon. WCAG 2.2 SC 2.5.8 fails Level AA conformance.
Remediation
- Add
min-height: 44px; min-width: 44px;to the button base style — visual size can stay smaller via inner padding. - For icon-only buttons, expand the hit-area with
padding: 12px(yielding 24+padding ≥ 44). - For inline links inside dense text, ensure ≥ 24×24 by using
padding: 0.25em 0and adequate line-height. - For custom widgets, wrap the visual icon in a
<button>withdisplay: inline-flex; align-items: center; justify-content: center;and a 44px box.
Exceptions
- Case: Inline text link
- Allowed When: The control is a link inside a paragraph; WCAG 2.2 explicitly exempts inline links provided 24×24 is met.
- Case: Equivalent control adjacent
- Allowed When: A small target has a same-action sibling control ≥ 44px (e.g. tiny X close + large 'Cancel' button).
- Case: User-agent default control
- Allowed When: A native
<select>arrow or scrollbar is sized by the platform.
Loaded when retrieval picks the atom as a focal / direct hit.
TouchTargetMin [rule] v1.0.0
All interactive targets (buttons, links, form controls, custom widgets) on touch surfaces MUST present a hit area of at least 44×44 CSS pixels, per Apple Human Interface Guidelines and WCAG 2.2 SC 2.5.8 (Target Size, Minimum: 24×24).
Checks
- @community/check-touch-target-min
Applies To
@community/type-html-artifact
Meta
- License: Apache-2.0
- License Provenance: package-authorship-claim
Severity
high
Severity Combination
interactive element < 24×24 CSS px (WCAG AA fail) → BLOCK
interactive element 24×24 to 44×44 CSS px (HIG miss, WCAG ok) → WARN
interactive element ≥ 44×44 CSS px → PASS
Failure Mode
Users mis-tap adjacent controls; mobile error rates spike; users with motor impairment are excluded; older users abandon. WCAG 2.2 SC 2.5.8 fails Level AA conformance.
Remediation
- Add
min-height: 44px; min-width: 44px;to the button base style — visual size can stay smaller via inner padding. - For icon-only buttons, expand the hit-area with
padding: 12px(yielding 24+padding ≥ 44). - For inline links inside dense text, ensure ≥ 24×24 by using
padding: 0.25em 0and adequate line-height. - For custom widgets, wrap the visual icon in a
<button>withdisplay: inline-flex; align-items: center; justify-content: center;and a 44px box.
Exceptions
- Case: Inline text link
- Allowed When: The control is a link inside a paragraph; WCAG 2.2 explicitly exempts inline links provided 24×24 is met.
- Case: Equivalent control adjacent
- Allowed When: A small target has a same-action sibling control ≥ 44px (e.g. tiny X close + large 'Cancel' button).
- Case: User-agent default control
- Allowed When: A native
<select>arrow or scrollbar is sized by the platform.
Relations
related: [@community/rule-spacing-rhythm, @community/rule-keyboard-accessible, @w3c/source-wcag-22, @community/anti-pattern-tiny-touch-targets, @community/counter-example-icon-button-24px, @community/example-calcom-scheduler, @community/rule-mobile-first] see-also: [@community/check-touch-target-min] validates-with: [@w3c/source-wcag-22]
Applies To
@community/type-html-artifact
Meta
- License: Apache-2.0
- License Provenance: package-authorship-claim
Severity
high
Validates With
- @w3c/source-wcag-22
Severity Combination
interactive element < 24×24 CSS px (WCAG AA fail) → BLOCK
interactive element 24×24 to 44×44 CSS px (HIG miss, WCAG ok) → WARN
interactive element ≥ 44×44 CSS px → PASS
Failure Mode
Users mis-tap adjacent controls; mobile error rates spike; users with motor impairment are excluded; older users abandon. WCAG 2.2 SC 2.5.8 fails Level AA conformance.
Remediation
- Add
min-height: 44px; min-width: 44px;to the button base style — visual size can stay smaller via inner padding. - For icon-only buttons, expand the hit-area with
padding: 12px(yielding 24+padding ≥ 44). - For inline links inside dense text, ensure ≥ 24×24 by using
padding: 0.25em 0and adequate line-height. - For custom widgets, wrap the visual icon in a
<button>withdisplay: inline-flex; align-items: center; justify-content: center;and a 44px box.
Exceptions
- Case: Inline text link
- Allowed When: The control is a link inside a paragraph; WCAG 2.2 explicitly exempts inline links provided 24×24 is met.
- Case: Equivalent control adjacent
- Allowed When: A small target has a same-action sibling control ≥ 44px (e.g. tiny X close + large 'Cancel' button).
- Case: User-agent default control
- Allowed When: A native
<select>arrow or scrollbar is sized by the platform.
See Also
- @community/check-touch-target-min
Source
aoe-engine/examples/frontend-design/primes/compiled/@community/rule-touch-target-min/atom.yaml