From ed341061c6114f48e0d0d371cf2b4e17919b191f Mon Sep 17 00:00:00 2001
From: Ivan Bochkarev <ivanx86@gmail.com>
Date: Wed, 11 Mar 2026 23:05:12 +0600
Subject: [PATCH 1/2] fix(a11y): improve accessibility for Lighthouse score
 (fixes #1837)

- Add @nuxt/a11y module for automated a11y checks
- Add skip-to-main-content link and id on UMain
- Add alt text to deploy page NuxtImg logos
- Improve UInputCopy button aria-label (contextual)
- Add browser tests for skip link presence and navigation
---
 app/components/UInputCopy.vue     |  2 +-
 app/layouts/default.vue           |  9 ++++++++-
 app/pages/deploy/[slug].vue       |  2 +-
 app/pages/deploy/index.vue        |  2 +-
 nuxt.config.ts                    |  1 +
 package.json                      |  1 +
 pnpm-lock.yaml                    | 22 ++++++++++++++++++++++
 test/browser/interactions.spec.ts | 22 ++++++++++++++++++++++
 8 files changed, 57 insertions(+), 4 deletions(-)

diff --git a/app/components/UInputCopy.vue b/app/components/UInputCopy.vue
index 6ac64d3f1..ff95442c3 100644
--- a/app/components/UInputCopy.vue
+++ b/app/components/UInputCopy.vue
@@ -45,7 +45,7 @@ function copyValue() {
             '!text-primary cursor-default': copied,
             'cursor-copy': !copied
           }"
-          aria-label="copy button"
+          :aria-label="label ? `Copy "${label}" to clipboard` : 'Copy command to clipboard'"
           @click="copyValue"
         />
       </template>
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 16858551c..c2ea1cc20 100644
--- a/app/layouts/default.vue
+++ b/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="[
diff --git a/app/pages/deploy/[slug].vue b/app/pages/deploy/[slug].vue
index cfd941e24..283c99a14 100644
--- a/app/pages/deploy/[slug].vue
+++ b/app/pages/deploy/[slug].vue
@@ -97,7 +97,7 @@ 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>
diff --git a/app/pages/deploy/index.vue b/app/pages/deploy/index.vue
index 8073c840d..ad83f5dbe 100644
--- a/app/pages/deploy/index.vue
+++ b/app/pages/deploy/index.vue
@@ -61,7 +61,7 @@ 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
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 789542d20..dfef8fceb 100644
--- a/nuxt.config.ts
+++ b/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',
diff --git a/package.json b/package.json
index f7c3ebd96..f1f1b7ce7 100644
--- a/package.json
+++ b/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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 44094bbf4..87e5304c6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -144,6 +144,9 @@ importers:
       '@iconify-json/vscode-icons':
         specifier: ^1.2.44
         version: 1.2.44
+      '@nuxt/a11y':
+        specifier: 1.0.0-alpha.1
+        version: 1.0.0-alpha.1(magicast@0.5.2)(vite@7.3.1(@types/node@25.3.2)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(yaml@2.8.2))
       '@nuxt/devtools':
         specifier: ^3.2.3
         version: 3.2.3(vite@7.3.1(@types/node@25.3.2)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(yaml@2.8.2))(vue@3.5.29(typescript@5.9.3))
@@ -1445,6 +1448,9 @@ packages:
     resolution: {integrity: sha512-humQVe2BrWR7Yum5hGDYBnIPnnZJvKSOH/I4QN1ZL2bdb4c4zQHaHupEJ3cOkSJ07G3YfN793ptbNh196BWLgA==}
     engines: {node: '>=18.6.0'}
 
+  '@nuxt/a11y@1.0.0-alpha.1':
+    resolution: {integrity: sha512-TwON9I0uI4erv9IJ6cD4nx9QcaxfXnAg7CwcQyjMKfDHCfI3xitezg4CZhQOHl0FGqHYGRf9Y9kSwh6fahCJrQ==}
+
   '@nuxt/cli@3.33.1':
     resolution: {integrity: sha512-/sCrcI0WemING9zASaXPgPDY7PrQTPlRyCXlSgGx8VwRAkWbxGaPhIc3kZQikgLwVAwy+muWVV4Wks8OTtW5Tw==}
     engines: {node: ^16.10.0 || >=18.0.0}
@@ -4273,6 +4279,10 @@ packages:
   avvio@9.2.0:
     resolution: {integrity: sha512-2t/sy01ArdHHE0vRH5Hsay+RtCZt3dLPji7W7/MMOCEgze5b7SNDC4j5H6FnVgPkI1MTNFGzHdHrVXDDl7QSSQ==}
 
+  axe-core@4.11.1:
+    resolution: {integrity: sha512-BASOg+YwO2C+346x3LZOeoovTIoTrRqEsqMa6fmfAV0P+U9mFr9NsyOEpiYvFjbc64NMrSswhV50WdXzdb/Z5A==}
+    engines: {node: '>=4'}
+
   b4a@1.8.0:
     resolution: {integrity: sha512-qRuSmNSkGQaHwNbM7J78Wwy+ghLEYF1zNrSeMxj4Kgw6y33O3mXcQ6Ie9fRvfU/YnxWkOchPXbaLb73TkIsfdg==}
     peerDependencies:
@@ -10511,6 +10521,16 @@ snapshots:
 
   '@npm/types@2.1.0': {}
 
+  '@nuxt/a11y@1.0.0-alpha.1(magicast@0.5.2)(vite@7.3.1(@types/node@25.3.2)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(yaml@2.8.2))':
+    dependencies:
+      '@nuxt/devtools-kit': 3.2.3(magicast@0.5.2)(vite@7.3.1(@types/node@25.3.2)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(yaml@2.8.2))
+      '@nuxt/kit': 4.3.1(magicast@0.5.2)
+      axe-core: 4.11.1
+      sirv: 3.0.2
+    transitivePeerDependencies:
+      - magicast
+      - vite
+
   '@nuxt/cli@3.33.1(@nuxt/schema@4.3.1)(cac@6.7.14)(magicast@0.5.2)':
     dependencies:
       '@bomb.sh/tab': 0.0.12(cac@6.7.14)(citty@0.2.1)
@@ -13722,6 +13742,8 @@ snapshots:
       '@fastify/error': 4.2.0
       fastq: 1.20.1
 
+  axe-core@4.11.1: {}
+
   b4a@1.8.0: {}
 
   babel-plugin-macros@3.1.0:
diff --git a/test/browser/interactions.spec.ts b/test/browser/interactions.spec.ts
index 57c71b0bb..3795a96f0 100644
--- a/test/browser/interactions.spec.ts
+++ b/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('/')
 

From eba80073410fe8b8812856a68ab2c1c2faca7049 Mon Sep 17 00:00:00 2001
From: Ivan Bochkarev <ivanx86@gmail.com>
Date: Wed, 11 Mar 2026 23:11:14 +0600
Subject: [PATCH 2/2] fix(a11y): enhance accessibility for UInputCopy and
 improve logo image formatting

- Update aria-label for UInputCopy button to be more contextual
- Refactor NuxtImg components in deploy pages for better readability and consistency
---
 app/components/UInputCopy.vue | 6 +++++-
 app/pages/deploy/[slug].vue   | 9 ++++++++-
 app/pages/deploy/index.vue    | 9 ++++++++-
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/app/components/UInputCopy.vue b/app/components/UInputCopy.vue
index ff95442c3..ba54e98ee 100644
--- a/app/components/UInputCopy.vue
+++ b/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="label ? `Copy "${label}" to clipboard` : 'Copy command to clipboard'"
+          :aria-label="ariaLabel"
           @click="copyValue"
         />
       </template>
diff --git a/app/pages/deploy/[slug].vue b/app/pages/deploy/[slug].vue
index 283c99a14..8d7bb0df2 100644
--- a/app/pages/deploy/[slug].vue
+++ b/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" :alt="`${provider.title} logo`" />
+            <NuxtImg
+              v-else
+              :src="provider.logoSrc"
+              width="40"
+              height="40"
+              class="size-10"
+              :alt="`${provider.title} logo`"
+            />
 
             <span>{{ provider.title }}</span>
           </div>
diff --git a/app/pages/deploy/index.vue b/app/pages/deploy/index.vue
index ad83f5dbe..80f809a08 100644
--- a/app/pages/deploy/index.vue
+++ b/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" :alt="`${deployment.title} logo`" />
+              <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