EAA compliance for Vue.js: WCAG 2.1 AA checklist & fixes

What the EAA actually requires from a Vue.js site

Vue's template syntax gives direct access to native HTML, so under the EAA the obligation is about disciplined component authoring rather than fighting the framework. The Vue-specific failures EN 301 549 forces you to close are router-link navigations that never move focus, <transition> leaving stale hidden DOM that screen readers still perceive, and v-html injecting images and controls that bypass alt-text and naming checks. As with any SPA, if you server-render through Nuxt an auditor sees the SSR HTML, so the requirement covers both the initial render and the post-navigation state.

Vue is especially common in European SMB, education, and agency-built sites, which means many in-scope Vue apps are run by smaller organisations facing fixed national fines rather than turnover-percentage penalties. Education and public-sector Vue portals carry an additional layer, since they also fall under the Web Accessibility Directive and EN 301 549 procurement rules on top of the EAA. The practical risk profile is therefore steady enforcement pressure at a moderate fine level rather than the headline percentage penalties aimed at large retailers.

Vue remediation is handled by the front-end team in the component and router layer: a global router.afterEach hook that focuses the h1 on navigation, an announcer utility such as @vue-a11y/announcer for live regions, and eliminating v-html in favour of sanitised, semantic components. Enforce eslint-plugin-vuejs-accessibility in the pipeline and, where the site is Nuxt, scan the SSR-generated HTML. These are targeted code changes, so a single developer can usually close the framework-specific gaps in days.

Top WCAG failures we see on Vue.js sites

Across hundreds of Vue.js scans, the same handful of issues show up over and over. None of them require ripping the theme apart — most are fixable in a few hours by someone comfortable in the platform's editor or template files.

• Vue Router does not move focus

  Just like React Router, vue-router silently swaps DOM. Add a global afterEach hook that focuses <h1>.

  2.4.3 — Level A

• <transition> attribute bugs

  During v-if transitions, the leaving DOM can remain in the tree but visually hidden — screen readers still see it.

  4.1.2 — Level A

• v-html bypasses sanitisation and alt rules

  Content rendered via v-html can include images without alt or buttons without names.

  1.1.1, 4.1.2 — Level A

Concrete code fixes for Vue.js

Below are copy-paste fixes for the most common Vue.js issues. They assume you have access to your theme code or the platform's custom-code injection panel. If you cannot edit code directly, share these snippets with whoever maintains the site — every one of them is a ten-minute change.

router.afterEach(() => {
  const h1 = document.querySelector('h1');
  if (h1) {
    h1.setAttribute('tabindex', '-1');
    (h1 as HTMLElement).focus();
  }
});

Tools and plugins worth installing first

• eslint-plugin-vuejs-accessibility

• @vue-a11y/announcer for live regions

How to scan a Vue.js site without missing anything

Automated scanners catch about 30–40% of WCAG issues; the rest need manual review. The good news is that the 30–40% includes the most expensive issues to remediate after the fact, so an automated scan is the cheapest way to get unstuck. Run one before you change a line of theme code.

• Scan against the SSR/Nuxt-generated HTML if available.