Responsive & accessibility contract
Mobile-first isn't a breakpoint — it's the design origin. Every layout is conceived at 360px, then earns extra columns. Accessibility is a spec, not a pass: contrast ratios, focus order, keyboard maps and reduced-motion behaviour are defined here and audited in Phase 17.
1
Layout restructure, not shrink
Three canonical layouts at each breakpoint. Notice what changes role, not just width: filters become a sheet, the order summary becomes sticky, tables become cards, the admin sidebar becomes a drawer.
Homepage
360px
768px
1440px
Shop / listing
360 · filters in bottom sheet
768 · filters collapse right
1200 · sticky sidebar + sort bar
Checkout & admin
360 · pay bar pinned
992 · summary right, sticky
1200 · sidebar pinned; <1200 drawer
Header 56
Hero
Cat
Cat
Prod
Prod
Rail scroll →
Trust
Bottom nav
Header 72 + nav
Hero split
Cat
Cat
Cat
Prod
Prod
Prod
Trust ×4
Announce
Header + search
Category nav
Hero 21:9 + CTA left
Cat
Cat
Cat
Cat
Prod
Prod
Prod
Prod
Trust ×4 · newsletter
Header
Sort + Filter btn
P
P
P
P
Load more
Header + nav
P
P
P
P
Filters 240
Header + nav
Breadcrumb + count
Filters 280 sticky
P
P
P
P
P
P
P
P
Pagination
Slim header
Steps 1–5
Form stack
Summary accordion
Sticky pay bar
Slim header + secure badge
Steps
Form
Summary sticky
Side
Topbar
KPI
KPI
KPI
KPI
Chart
Donut
Table
2
Component behaviour by breakpoint
| Component | Mobile <576 | Tablet 768+ | Desktop 992+ / 1200+ |
|---|---|---|---|
| Header | 1 row 56px · drawer nav · search expands | same, 2-row from 992 | 2 rows · mega menu · inline search 544px |
| Category nav | in drawer + bottom nav Shop | in drawer | horizontal row, scroll-snap overflow |
| Product grid | 2 cols, condensed card | 3 cols, full card | 4 cols / rails become grids |
| Filters | bottom sheet + active-chips row | collapsible right rail | sticky 280px left sidebar |
| Tables | stacked data rows | scroll-x with pinned first col | full table |
| Modals | bottom sheet + handle | centred 520px | centred 520–720px |
| Toasts | above bottom nav, full width | top-right | top-right, max 4 |
| Checkout | stacked + sticky pay bar + summary accordion | 2-col from 992 | sticky summary |
| Admin sidebar | drawer + scrim | drawer | pinned 264px at 1200 |
| Charts | horizontal scroll or sparkline swap | full chart, fewer ticks | full chart + legend |
3
Touch & pointer ergonomics
44px mobile min
40px desktop
46px default btn
52px primary CTA
Hit areas may be larger than visuals: 36px icons get 44px
::before targets on touch devices.8px minimum spacing between adjacent touch targets to prevent mis-taps.
No hover-only functionality: everything revealed on hover has a visible equivalent on touch (quick-add becomes a card button in cart/wishlist contexts).
Swipe: rails snap horizontally; drawers swipe-to-close; no swipe-only gestures anywhere.
4
Accessibility contract (WCAG 2.1 AA)
Keyboard map
Live focus order demo
Rules
| Key | Behaviour |
|---|---|
| Tab / Shift+Tab | DOM order = visual order; skip link first; focus ring always visible |
| Enter | Activate focused link/button; submit form; open highlighted suggestion |
| Space | Toggle checkbox/switch; activate button; page-down outside controls |
| Esc | Close drawer → modal → dropdown → search suggestions, in that priority; focus returns to trigger |
| ↑↓ | Move within menus and suggestion lists; quantity input arrow-step |
| ←→ | Product gallery thumbs; tab list; rating input; carousel rails |
Contrast: body ≥ 4.5:1 (we run 6:1+ for ink), large text ≥ 3:1, UI boundaries ≥ 3:1. Verified per token on page 01.
Every image/figure has alt or
aria-label; decorative icons are aria-hidden.Forms: visible labels,
aria-describedby for help/error, aria-invalid, error summary focused on failed submit.Live regions: toasts (
role=status/alert), cart count (aria-live=polite), checkout step changes announced.Motion:
prefers-reduced-motion collapses all animation; carousels become static grids; shimmer removed.Touch: 44px targets; pinch-zoom never blocked; inputs use correct
inputmode (numeric postcode, tel phone, email).Colour is never the only signal: status dots pair with text, validation pairs with icons + copy, sale pairs with struck price.
Forbidden: focus traps without Escape, autoplaying media with sound,
outline:none without replacement, placeholder-as-label.