fix(a11y): improve accessibility for Lighthouse score

app/components/UInputCopy.vue

@@ -16,6 +16,10 @@ const props = defineProps({
 const { copy, copied } = useClipboard()
 const { track } = useAnalytics()
 
+const ariaLabel = computed(() =>
+  props.label ? `Copy "${props.label}" to clipboard` : 'Copy command to clipboard'
+)
+
 function copyValue() {
   track('Command Copied', { value: props.value })
   copy(props.value)
@@ -45,7 +49,7 @@ function copyValue() {
             '!text-primary cursor-default': copied,
             'cursor-copy': !copied
           }"
-          aria-label="copy button"
+          :aria-label="ariaLabel"
           @click="copyValue"
         />
       </template>

app/layouts/default.vue

@@ -17,6 +17,13 @@ onMounted(() => {
 
 <template>
   <div :class="[(route.path.startsWith('/docs/') || route.path.startsWith('/deploy')) && 'root']">
+    <a
+      data-testid="skip-to-main-content"
+      href="#main-content"
+      class="absolute left-4 -top-20 z-100 rounded border border-default bg-default p-4 font-medium transition-[top] duration-200 focus:top-4 focus:outline-none focus:ring-2 focus:ring-primary"
+    >
+      Skip to main content
+    </a>
     <!-- <UBanner
       id="mn-nuxt-b"
       title="Black Friday: Get 40% OFF the complete Mastering Nuxt course"
@@ -37,7 +44,7 @@ onMounted(() => {
 
     <Header />
 
-    <UMain class="relative">
+    <UMain id="main-content" class="relative">
       <HeroBackground
         class="absolute w-full -top-px transition-all text-primary shrink-0 -z-10"
         :class="[

app/pages/deploy/[slug].vue

@@ -97,7 +97,14 @@ links.push({
         <template #title>
           <div class="flex items-center gap-4">
             <UIcon v-if="provider.logoIcon" :name="provider.logoIcon" class="w-10" />
-            <NuxtImg v-else :src="provider.logoSrc" width="40" height="40" class="size-10" />
+            <NuxtImg
+              v-else
+              :src="provider.logoSrc"
+              width="40"
+              height="40"
+              class="size-10"
+              :alt="`${provider.title} logo`"
+            />
 
             <span>{{ provider.title }}</span>
           </div>

app/pages/deploy/index.vue

@@ -61,7 +61,14 @@ await fetchList()
             }"
           >
             <template #leading>
-              <NuxtImg v-if="deployment.logoSrc" :src="deployment.logoSrc" width="40" height="40" class="w-10 h-10" />
+              <NuxtImg
+                v-if="deployment.logoSrc"
+                :src="deployment.logoSrc"
+                width="40"
+                height="40"
+                class="w-10 h-10"
+                :alt="`${deployment.title} logo`"
+              />
               <UIcon v-else :name="deployment.logoIcon" class="size-10 text-black dark:text-white" />
             </template>
             <UBadge

nuxt.config.ts

@@ -7,6 +7,7 @@ const { resolve } = createResolver(import.meta.url)
 export default defineNuxtConfig({
   modules: [
     '@nuxt/ui',
+    '@nuxt/a11y',
     'nuxt-content-twoslash',
     '@nuxt/test-utils',
     '@nuxt/content',

package.json

@@ -70,6 +70,7 @@
   "devDependencies": {
     "@ai-sdk/mcp": "^1.0.25",
     "@iconify-json/vscode-icons": "^1.2.44",
+    "@nuxt/a11y": "1.0.0-alpha.1",
     "@nuxt/devtools": "^3.2.3",
     "@nuxt/eslint": "^1.15.2",
     "@nuxt/modules": "^0.6.0-fdc88d",

test/browser/interactions.spec.ts

@@ -37,6 +37,28 @@ test.describe('User Interactions', () => {
 })
 
 test.describe('Accessibility', () => {
+  test('skip to main content link is present and targets main landmark', async ({ page, goto }) => {
+    await goto('/')
+
+    const skipLink = page.getByTestId('skip-to-main-content')
+    await expect(skipLink).toBeAttached()
+    await expect(skipLink).toHaveAttribute('href', '#main-content')
+    await expect(skipLink).toHaveText('Skip to main content')
+
+    const mainContent = page.locator('#main-content')
+    await expect(mainContent).toBeAttached()
+  })
+
+  test('skip link navigates to main content on click', async ({ page, goto }) => {
+    await goto('/')
+
+    const skipLink = page.getByTestId('skip-to-main-content')
+    await skipLink.click()
+
+    const mainContent = page.locator('#main-content')
+    await expect(mainContent).toBeInViewport()
+  })
+
   test('main navigation links are keyboard accessible', async ({ page, goto }) => {
     await goto('/')