Skip to content

fix(a11y): improve accessibility for Lighthouse score#2204

Open
Ibochkarev wants to merge 2 commits intonuxt:mainfrom
Ibochkarev:fix/a11y-improve-lighthouse-1837
Open

fix(a11y): improve accessibility for Lighthouse score#2204
Ibochkarev wants to merge 2 commits intonuxt:mainfrom
Ibochkarev:fix/a11y-improve-lighthouse-1837

Conversation

@Ibochkarev
Copy link

Improve nuxt.com accessibility to raise Lighthouse a11y score from 83 toward 100 and address automatically detectable and manual a11y issues.

Motivation: Issue #1837 reports current Lighthouse a11y score of 83; the comment from @timdamen (Nov 2025) suggests using the nuxt/a11y module for auto-detection and fixing non-automatic issues.

Changes:

  • @nuxt/a11y: Add module (dev, alpha) for axe-core–based checks and DevTools integration.
  • Skip link: Add “Skip to main content” link (visually hidden, visible on focus) and id="main-content" on UMain for keyboard/screen-reader users.
  • Images: Add descriptive alt to deploy index and deploy [slug] NuxtImg logos (deployment.title / provider.title + “ logo”).
  • UInputCopy: Replace generic aria-label="copy button" with a contextual label (e.g. “Copy command to clipboard” or “Copy <label> to clipboard”).
  • Tests: Add two browser tests for skip link (presence, href, target #main-content, and that clicking it scrolls main into view).

Note: Browser tests run against BASE_URL (default https://nuxt.com); the new skip-link tests will pass after this is deployed or when run with a local BASE_URL.

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
@vercel
Copy link
Contributor

vercel bot commented Mar 11, 2026

@Ibochkarev is attempting to deploy a commit to the Nuxt Team on Vercel.

A member of the Team first needs to authorize it.

…e formatting

- Update aria-label for UInputCopy button to be more contextual
- Refactor NuxtImg components in deploy pages for better readability and consistency
@Ibochkarev Ibochkarev marked this pull request as ready for review March 11, 2026 17:12
@Ibochkarev Ibochkarev requested a review from atinux as a code owner March 11, 2026 17:12
@coderabbitai
Copy link

coderabbitai bot commented Mar 11, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: ebeab627-c9e7-4ba0-849c-f942af34808c

📥 Commits

Reviewing files that changed from the base of the PR and between d38ce2d and eba8007.

⛔ Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (7)
  • app/components/UInputCopy.vue
  • app/layouts/default.vue
  • app/pages/deploy/[slug].vue
  • app/pages/deploy/index.vue
  • nuxt.config.ts
  • package.json
  • test/browser/interactions.spec.ts

📝 Walkthrough

Walkthrough

This pull request enhances application accessibility by implementing WCAG compliance improvements across multiple components and the layout system. Changes include adding a skip-to-main-content navigation link in the default layout, introducing dynamic aria-labels based on component state in the copy input component, adding alt text attributes to image elements, installing the @nuxt/a11y accessibility module, and adding browser tests to verify skip link functionality. The modifications span configuration files, layout and component templates, and test suites.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly describes the main objective of improving accessibility to raise the Lighthouse a11y score, which is the primary goal of all changes in the changeset.
Description check ✅ Passed The description comprehensively details all accessibility improvements made, including the @nuxt/a11y module, skip link implementation, image alt text additions, aria-label updates, and test additions, directly relating to the changeset.
Linked Issues check ✅ Passed The PR successfully addresses issue #1837 by improving accessibility with @nuxt/a11y module integration, skip link implementation, alt text for images, and improved aria-labels to raise the Lighthouse a11y score.
Out of Scope Changes check ✅ Passed All changes are directly in scope with issue #1837's goal of improving accessibility: @nuxt/a11y module, skip link, image alt attributes, aria-labels, and related tests are all accessibility-focused.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@Ibochkarev
Copy link
Author

@coderabbitai review

@coderabbitai
Copy link

coderabbitai bot commented Mar 11, 2026

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

fix: improve a11y

1 participant