Specification · 001-mobile-action-bar

Mobile action bar

A compact bottom bar of icon-only actions that stays tappable — every hit target meeting the accessibility floor, not an assumed one.

Status

Accepted

Spec ID 001-mobile-action-bar Owner Brian Corbin · @briancorbinxyz Reviewers Brian Corbin · @briancorbinxyz Created 25 Jul 2026 Smallest demoableRender the bar with three icon buttons; every button measures at least 24×24 CSS px and is independently tappable. Read time

A mobile screen ends in a fixed bottom bar of icon-only actions (back, share, more). Icon buttons are the easiest control to under-size, so the bar's one load-bearing rule is a minimum interactive target: every button meets the WCAG 2.2 Level-AA floor of 24×24 CSS px (SC 2.5.8), with adequate spacing so a 24 px tap circle never overlaps a neighbour. 44×44 (the AAA / Enhanced target) is available per-control for primary actions, but it is not the baseline. The visual chrome is deliberately out of scope here.

I Independent: A self-contained UI component; depends on no sibling spec, only on the WCAG target-size fact it grounds against.
N Negotiable: Outcome (tappable, conformant, spaced), not a named CSS framework or icon set.
V Valuable: Unlocks SC-001 — a bar every user can actually hit, on a real, cited accessibility floor.
E Estimable: Four requirements over one component; the target-size and spacing rules are measurable up front.
S Small: One component, icon buttons, four functional requirements; theming and animation deferred.
T Testable: Rendered button box size and inter-target spacing are both mechanically checkable in px.

1 · Context

The reflexive answer to "how big is a tap target?" is 44×44 — Apple's Human Interface Guidelines figure, which is also WCAG's AAA SC 2.5.5 (Enhanced), not the AA floor. Treating 44 as the requirement over-shoots what Level AA actually asks and quietly conflates an AAA criterion with the baseline. WCAG 2.2 (a W3C Recommendation since 5 Oct 2023) settled this: SC 2.5.8 Target Size (Minimum), Level AA, is 24×24 CSS px. This spec pins the bar to that real floor and treats 44 as an enhanced target adopted per-control, not by default.

2 · User scenarios & testing

Each story MUST be independently testable.

US1 · Tap an action without mis-hitting a neighbour P1

As a one-handed mobile user, I want each icon button to be big enough and spaced enough to hit reliably, so I don't trigger the wrong action with my thumb.

Acceptance: every button's rendered box is at least 24×24 CSS px, and a 24 px-diameter circle centred on any button does not intersect a neighbouring button's target.

Edge cases

Dense bar. Adding a fourth and fifth action must keep every target at the 24×24 floor with conformant spacing, rather than shrinking buttons below it.
Primary action. A control opting into the 44×44 enhanced target (SC 2.5.5, AAA) must not force its neighbours up to 44 — the baseline stays 24.

3 · Requirements

Conformance keywords (MUST, SHOULD, MAY) follow RFC 2119.

Functional

Every interactive control in the action bar MUST present a pointer target of at least 24×24 CSS pixels, meeting WCAG 2.2 SC 2.5.8 Target Size (Minimum) at Level AA.

Adjacent targets MUST be spaced so a 24 px-diameter circle centred on any target does not intersect another target — the spacing exception path of SC 2.5.8, so a dense bar stays conformant without inflating each button.

A control designated a primary action SHOULD offer the 44×44 CSS px enhanced target (WCAG SC 2.5.5, Level AAA) as a per-control opt-in; this MUST NOT raise the baseline for other controls above the 24×24 floor.

Icon-only buttons MUST carry an accessible name (e.g. aria-label) so the target is identifiable to assistive technology, not merely large enough to tap.

Out of scope (deferred)

Colour, elevation, and light/dark theming of the bar — a later visual-design slice; this spec fixes hit geometry, not chrome.
Show/hide-on-scroll animation and transition timing.
Re-stating the WCAG normative text verbatim — the criteria are grounded by citation, not copied.

4 · Data model

The bar is presentational; it holds only the action descriptors it renders.

Action: { id, iconName, accessibleName, tier } — tier is baseline (24×24 floor) or primary (44×44 enhanced target opt-in).
Target box: The rendered hit rectangle of one control, measured in CSS px; the unit both FR-001 and FR-002 are checked against.

Invariant: 24×24 is the floor for every control, not an average. A control below it is a conformance fault under FR-001, not a styling preference.

5 · Success criteria

Rendering the bar with three or more icon buttons yields, for every button, a target box of at least 24×24 CSS px and inter-target spacing that satisfies the SC 2.5.8 24 px-circle test.

Marking one control primary renders it at the 44×44 enhanced target while every other control stays at the 24×24 baseline.

6 · Assumptions

Targets are measured in CSS pixels at the document's default zoom; the user-agent-controlled and essential exceptions of SC 2.5.8 do not apply to these author-styled buttons.

7 · Open questions

None outstanding — the interactive-target floor is fixed here at the WCAG 2.2 AA figure (24×24, SC 2.5.8), and the 44×44 enhanced target is a per-control opt-in rather than an open choice.

8 · Conformance index

Auto-built from every <spec-requirement> in this document.

9 · Change log

25 Jul 2026Initial draft. A compact mobile action bar whose interactive controls meet the WCAG 2.2 SC 2.5.8 Level-AA minimum target of 24×24 CSS px (FR-001) with conformant spacing (FR-002), a per-control 44×44 enhanced-target opt-in (FR-003), and accessible names on icon-only buttons (FR-004).