accessibility · keyboard

Skip to content

The "Skip to main content" link is a keyboard-first foundation — the first focusable element on the page, visible only when focused, that jumps the keyboard user past the navigation directly into the page's primary content.

WCAG 2.4.1 (Bypass Blocks · Level A) requires "a mechanism is available to bypass blocks of content that are repeated on multiple Web pages." The skip link is the canonical mechanism.

what's wired

Already shipping

app/app.vue renders a global skip link as its first focusable child:

app/app.vuevue
<a href="#main-content" class="skip-to-content">
  Skip to main content
</a>

The link is visually hidden until it receives keyboard focus, at which point it slides into the top-left corner with a maroon focus ring. Tab on any page reveals it.

the receiving anchor

Where it lands

Every page surface renders its main content inside a wrapper with id="main-content" + tabindex="-1". The skip link's href="#main-content" focuses that wrapper, so screen-reader announcements continue from the right place instead of the next link in the nav.

consumer guidance

When you embed TUX

Downstream apps (Landscape, tti-ai-studio, marcom WordPress) either inherit the skip link automatically (when they consume the Nuxt layer with TUX's app.vue) or wire their own with the same anchor convention. The pattern is the constant; the chrome is yours.

testing

How to verify

  1. Open any TUX page in a browser.
  2. Press Tab — the skip link should slide in from the top-left with a visible focus ring.
  3. Press Enter — focus should land in the main content area (visually unchanged but next Tab should advance to the first interactive element inside the page).
  4. Press Tab again — focus should NOT cycle back to the nav; it should advance to the next focusable element in main content.

← Back to accessibility index