Accessibility QA · browser-local focus tracing · 2026 · Solo — product framing, test-first focus analysis, interaction design, accessibility, responsive verification, production deployment
Focus Relay
A keyboard-route workbench that turns invisible focus order into an inspectable, drivable trace.
The problem
Frontend developers and accessibility reviewers checking a small interface fragment can read DOM order or tab through a page, but they still have to reconstruct the keyboard journey mentally. Positive tabindex can silently reorder controls, icon-only buttons can lose their accessible names, and a technically valid sequence can jump across the visual surface. Focus Relay keeps that bounded review visible: paste a fragment, sanitize it into a scriptless preview, derive the browser-relevant route, then drive the sequence stop by stop while findings remain attached to the affected control. It is a focused inspection aid rather than a full accessibility audit: accessible-name extraction covers common HTML patterns, the spatial threshold is heuristic, and script-created controls are intentionally out of scope. Fragment text remains in ephemeral browser state; there is no upload, account, persistence, paid API, tracking SDK, outbound email, advertising, payment, or destructive operation. Production deployment dpl_H1CnkHcydQcJcFEWsw65Pgmdfp21 reached READY before independent Foundry HTTPS marker and six-step behavior checks passed at the stable alias.
Architecture
Key decisions
Make the route operable, not merely reported
The result is a transport: reviewers can step forward or backward, select any stop, and see the matching preview control receive an unmistakable focus treatment. The route and surface stay causally linked.
Keep untrusted fragments behind a browser boundary
The sanitizer removes executable and embedded content, inline handlers, srcdoc, and dangerous URL schemes. The resulting document runs in an iframe without script permission, while remaining measurable by the parent workbench.
Prefer explainable findings over a false audit score
Focus Relay reports concrete positive tabindex, missing-name, and long-jump evidence. It does not roll them into a compliance percentage or claim to reproduce the complete browser accessibility tree.
Use an editorial accessibility workbench
Warm paper, graphite, moss, one acid-yellow action color, Georgia display text, condensed operational labels, and monospaced evidence create hierarchy without generic indigo, glass, feature tiles, icon toppers, or decorative dashboard metrics.
Let real-browser failures harden the boundary
Production prerender first exposed a server-side DOMParser call, and responsive interaction verification later exposed that an unchanged sample did not reload its iframe. Both failures were reproduced before narrow fixes and the complete local and HTTPS gates were rerun.