Canon / review
Interface Quality Checklist
Operational review rubric synthesized from Vercel Web Interface Guidelines, WAI-ARIA APG, WCAG 2.2, and Apple HIG foundations. Each item has severity and verification mode.
Interactions
| ID |
Rule |
Severity |
Verify |
| IQ-INT-01 |
All flows keyboard-operable (APG patterns) |
critical |
keyboard |
| IQ-INT-02 |
Visible :focus-visible rings |
critical |
visual |
| IQ-INT-03 |
Focus trap/return for dialogs/menus |
critical |
keyboard |
| IQ-INT-04 |
Hit target ≥24px (desktop), ≥44px (mobile) |
high |
measure |
| IQ-INT-05 |
Inputs ≥16px on mobile (no iOS zoom) |
high |
mobile |
| IQ-INT-06 |
Never disable zoom |
high |
meta |
| IQ-INT-07 |
Hydration-safe inputs (no focus/value loss) |
high |
browser |
| IQ-INT-08 |
Never block paste |
high |
manual |
| IQ-INT-09 |
Loading buttons keep label + spinner |
medium |
visual |
| IQ-INT-10 |
URL as state for shareable UI |
high |
Back/Forward |
| IQ-INT-11 |
Optimistic update + rollback/undo |
medium |
manual |
| IQ-INT-12 |
Confirm destructive or provide undo window |
high |
manual |
| IQ-INT-13 |
Links are real links (a/Link) |
high |
code |
| IQ-INT-14 |
Announce async updates (aria-live polite) |
high |
a11y |
| IQ-INT-15 |
No dead zones on interactive chrome |
medium |
pointer |
Motion
| ID |
Rule |
Severity |
Verify |
| IQ-MOT-01 |
Honor prefers-reduced-motion |
critical |
media |
| IQ-MOT-02 |
Prefer CSS/WAAPI over main-thread JS |
medium |
code |
| IQ-MOT-03 |
Animate transform/opacity primarily |
high |
perf |
| IQ-MOT-04 |
Interruptible input-driven motion |
high |
manual |
| IQ-MOT-05 |
Never transition: all |
medium |
code |
Layout & content
| ID |
Rule |
Severity |
Verify |
| IQ-LAY-01 |
Optical alignment when geometry lies |
low |
visual |
| IQ-LAY-02 |
Safe-area insets respected |
high |
device |
| IQ-LAY-03 |
Skeletons match final geometry |
high |
visual |
| IQ-LAY-04 |
Empty/sparse/dense/error designed |
critical |
states |
| IQ-LAY-05 |
No dead ends — always a next step |
high |
UX |
| IQ-LAY-06 |
Locale-aware dates/numbers |
high |
i18n |
| IQ-LAY-07 |
Icons have accessible names |
critical |
a11y |
| IQ-LAY-08 |
Status not color-only |
high |
a11y |
Agent review command
When reviewing UI, agents must:
- Cite violated
IQ-* or rule.* IDs
- State severity
- Propose minimal fix
- Note verification method
Linked rules
rule.interaction.interface-qualityrule.a11y.wcag-aarule.motion.purpose-first
Source file: design-system/review/interface-quality-checklist.md