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