Vue is a progressive JavaScript framework used for everything from enhancing static pages to building full single-page applications. Vue's gentle learning curve and flexible architecture make it popular - but that same flexibility means accessibility practices are left entirely to the developer. Under the EAA, Vue applications serving EU consumers must meet EN 301 549 requirements.
Common Vue accessibility issues
Vue Router navigation lacks screen reader announcements
Vue Router handles client-side navigation without full page reloads. Screen readers receive no automatic notification when the route changes, and focus remains wherever it was before navigation. Users relying on assistive technology don't know the page has changed.
v-show and v-if transitions confuse assistive technology
Vue's v-show directive toggles CSS display rather than removing elements from the DOM - meaning hidden content can still be read by screen readers. Conversely, v-if removes elements entirely, which can cause focus to be lost when the currently focused element disappears.
Transition and animation components lack reduced motion support
Vue's built-in transition system and popular animation libraries (GSAP, Motion) add visual animations without respecting the prefers-reduced-motion media query. Users who have requested reduced motion in their OS settings still see full animations.
Template ref-based DOM manipulation bypasses reactivity
Developers using template refs to directly manipulate DOM elements can create accessibility issues that Vue's reactivity system doesn't track - such as dynamically added elements without ARIA attributes or manually managed focus that conflicts with Vue's rendering.
Vuetify and component library accessibility gaps
Popular Vue component libraries like Vuetify, Quasar, and PrimeVue have varying levels of accessibility support. Developers often assume using a component library guarantees accessibility, but customisation, incorrect prop usage, and library bugs can produce inaccessible output.
How Lumi works with Vue
Lumi scans your deployed Vue application after full hydration and mounting - testing the actual DOM that users and assistive technology interact with. Our five engines navigate through Vue Router routes, interact with reactive components, and verify transition and animation accessibility. Monitor continuously to catch regressions with each build.
Vue-specific WCAG gotchas
Vue's reactivity doesn't extend to accessibility
Vue's reactivity system efficiently updates the DOM when data changes, but it doesn't ensure those updates are communicated to assistive technology. Reactive data changes need corresponding ARIA live regions or focus management.
Nuxt and Vue have different rendering profiles
Nuxt.js adds server-side rendering to Vue, which changes the initial HTML that users receive. The same component can have different accessibility characteristics in a Nuxt SSR context versus a Vue SPA context.
Scan your Vue site for free
See how your site measures up against WCAG 2.2 and EN 301 549 - in 30 seconds, no signup required.
Frequently asked questions
Does Vue support accessibility?
Vue supports all standard HTML and ARIA attributes in templates. Vue's documentation includes an accessibility guide covering semantic HTML, forms, and focus management. However, Vue has no built-in accessibility enforcement - it's entirely up to the developer.
How do I announce route changes in Vue Router?
Use Vue Router's afterEach navigation guard to detect route changes, then announce the new page title via an ARIA live region. Also manage focus by moving it to the main content area or page heading after each navigation.
Is Nuxt.js more accessible than plain Vue?
Nuxt provides server-rendered HTML which gives screen readers immediate content (rather than an empty div waiting for JavaScript), and Nuxt 3 includes some accessibility improvements. But Nuxt doesn't enforce WCAG compliance any more than Vue does - the same developer responsibility applies.
Does the EAA apply to Vue single-page applications?
Yes. The EAA applies based on the service provided, not the technology. Vue SPAs offering services to EU consumers - e-commerce, financial services, media platforms - must meet EN 301 549.
Related resources
Last reviewed: April 2026. Content is reviewed quarterly for accuracy.