Simple “Skip to main content” code for Nuxt + TailwindCSS projects:

I’m not an expert, but adding a “skip to main content” link at the beginning of your navigation (invisible, but detected by screen readers) allows screen reader users the option to skip over all of the page’s navigation and go directly to a page’s main content.

Double-check to be sure there aren’t mistakes, but the code below has ARIA Attributes for WCAG 2.1 Level AA Compliance

Put this at the very top of your main navigation component(s) (“components/TheNabar.vue” in my case):

<template>
<!-- "Skip to main content" link -->
  <a 
    href="#main-content" 
    class="sr-only focus:not-sr-only absolute top-0 left-0 bg-white text-black px-4 py-2 rounded-md z-50"
    aria-label="Skip to main content"
  >
    Skip to main content
  </a>

  <!-- Begin your navigation menu -->

and then add the following to your layout(s):

<template>
  <div>
    <!-- Include the Navbar -->
    <TheNavbar />

    <!-- Main content area -->
    <main 
      id="main-content" 
      tabindex="-1" 
      class="px-4 py-8"
      role="main"
      aria-label="Main content"
    >
      <slot />
    </main>
  </div>
</template>

Details:

Navbar (Skip Link and Navigation)

href=”#main-content”:

Links directly to the main content area for screen reader and keyboard users.

class=”sr-only focus:not-sr-only”:

Ensures the link is visually hidden but becomes visible when focused.

aria-label=”Skip to main content”:

Provides a clear label for assistive technologies like screen readers.

aria-label=”Primary Navigation”: 

Identifies the navigation region for screen readers.

Main Content Area

id=”main-content”:

Acts as the anchor point for the skip link.

tabindex=”-1": 

Allows the main element to receive keyboard focus when users navigate to it using the skip link.

role=”main”: 

Identifies the main content area for assistive technologies.

aria-label=”Main content”: 

Provides an additional descriptor for the main region.

CREDIT

Much of the code above was generated or refined by OpenAI’s ChatGPT