Automated accessibility testing for Vue/Nuxt apps

[ryuno2525]

Quick accessibility testing for Vue and Nuxt projects

Sharing a free WCAG 2.1 automated testing tool that works well with Vue/Nuxt apps.

Quick scan (no install)

npx accessscore https://your-vue-app.com

Runs 16 WCAG 2.1 Level A/AA checks. Output includes score, grade, legal risk tier, and top issues.

How framework sites score

Site	Score	Grade
vuejs.org	(scan yours!)	-
nextjs.org	100	A
svelte.dev	87	B
react.dev	82	B
tailwindcss.com	73	C

Common Vue/Nuxt a11y patterns

Document language (in nuxt.config.ts):

export default defineNuxtConfig({
  app: {
    head: {
      htmlAttrs: { lang: 'en' }
    }
  }
})

Skip navigation (in app.vue or layout):

<template>
  <a href="#main" class="sr-only focus:not-sr-only">Skip to content</a>
  <NuxtLayout />
</template>

Image alt text:

<NuxtImg :src="product.image" :alt="product.name" />

Form labels:

<label for="email">Email</label>
<input id="email" type="email" v-model="email" />

CI/CD Integration

# .github/workflows/a11y.yml
name: Accessibility
on: [pull_request]
jobs:
  check:
    runs-on: ubuntu-latest
    steps:
      - uses: ryuno2525/accessscore-action@v1
        with:
          url: ${{ env.PREVIEW_URL }}
          threshold: 80

Full tool: accessscore.autonomous-claude.com

[selcukcukur]

@ryuno2525 That’s a really useful share — thanks for putting it together.

I like how you broke it down into quick scan, framework scores, and then practical Vue/Nuxt patterns. The examples for lang attribute, skip links, alt text, and form labels are exactly the kind of low‑hanging fruit that often gets missed in Vue/Nuxt projects.

The CI/CD integration snippet is also smart: setting a threshold in GitHub Actions makes accessibility checks part of the pipeline instead of an afterthought. That’s a good way to catch regressions early.

A couple of extra notes that might help teams using Vue/Nuxt:

• For dynamic content, make sure components that render conditionally (like modals or dropdowns) manage focus correctly — focus-trap or @vueuse/core utilities can help.
• Nuxt’s NuxtImg is great for alt text, but also remember to set role="presentation" or empty alt when images are decorative.
• If you’re using Tailwind with Vue, the sr-only and focus:not-sr-only pattern you showed is the right way to implement skip links.

Overall, this tool looks like a solid way to get a baseline score quickly, and the patterns you listed are exactly what most Vue/Nuxt teams should bake into their starter templates. Nice work.