Skip to content

a11y: add skip-to-main-content link in site layout #13

Description

@ulises-jeremias

Context

The CPA website has no "skip to main content" link. This is a small accessibility win for keyboard users.

Steps

  1. Add a skip link as the first focusable element in the site shell/layout.
  2. Ensure key pages expose id="main-content" (or equivalent) on <main>.
  3. Style it visually hidden until focused; works in light and dark themes.

Acceptance criteria

  • Skip link is first in tab order
  • Activating it moves focus/viewport to main content
  • Decorative-only; no layout shift when hidden
  • Works on templates/extensions/docs pages that use the shared layout

Files

  • src/components/layout-shell.tsx and/or src/app/layout.tsx
  • Page <main> wrappers as needed

How to verify

Tab from the address bar into the page: first focus should be the skip link; Enter jumps to main.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions