Why
The SPA has solid tab/aria-selected wiring for Board / Memory / Portfolio / Advise, but keyboard users still tab through chrome before reaching the main surface. A skip link is a small, standard win and signals the project cares about a11y.
Size
XS–S — HTML + a few CSS rules.
Task
- Add a visually hidden Skip to main content link as the first focusable element in
web/index.html (after <body>).
- Target a stable landmark (e.g.
#app / #stage / a new id="main" wrapper) with tabindex="-1" so focus moves correctly.
- Style: hidden until
:focus (no permanent floating badge/chip).
- Confirm Settings / auth screens don’t break.
Acceptance
Tips
Match existing CSS variables in the <style> block of web/index.html. Keep the Telivity palette; don’t introduce a new design system.
Why
The SPA has solid tab/
aria-selectedwiring for Board / Memory / Portfolio / Advise, but keyboard users still tab through chrome before reaching the main surface. A skip link is a small, standard win and signals the project cares about a11y.Size
XS–S — HTML + a few CSS rules.
Task
web/index.html(after<body>).#app/#stage/ a newid="main"wrapper) withtabindex="-1"so focus moves correctly.:focus(no permanent floating badge/chip).Acceptance
Tips
Match existing CSS variables in the
<style>block ofweb/index.html. Keep the Telivity palette; don’t introduce a new design system.