JS Framework

WCAG accessibility audit for Vue.js applications

Why Vue.js causes accessibility issues

Vue.js is known for its simplicity and progressiveness, but Vue applications present subtle accessibility problems that developers often overlook. Vue transitions and animations (transition, transition-group) modify element visibility in a way that screen readers interpret poorly: an element being animated out remains in the accessibility tree while it is no longer relevant. The v-if directive completely removes elements from the DOM, removing them from the accessibility tree without announcement — unlike v-show which visually hides but preserves the element. Vue Router performs client-side navigations without screen reader announcements. Vue components communicate via custom events ($emit) that have no counterpart in assistive technologies. Slots and dynamic components (<component :is>) make the final HTML unpredictable and difficult to audit in advance. Conditional rendering with v-if, combined with transitions, creates situations where focus is lost and content disappears from the accessibility tree without alternative.

Common issues on Vue.js

Transitions breaking focus and the accessibility tree

WCAG 2.4.3

Vue's transition and transition-group components animate the entry and exit of elements. During the exit animation, the element is still present in the DOM and accessibility tree, but it is no longer visually relevant. Screen readers may announce content that is disappearing. At the end of the animation, the element is removed from the DOM, potentially causing focus loss if that element or one of its children had focus.

v-if removing elements without announcement

WCAG 4.1.3

The v-if directive physically removes elements from the DOM when the condition is false. Screen readers are not notified of this disappearance. If an error message, notification, or important content is managed by v-if, it appears and disappears silently for assistive technologies. This problem is absent with v-show (which uses display:none) but developers prefer v-if for performance reasons.

Vue Router without focus management or page announcement

WCAG 2.4.3

Vue Router changes page content without browser reload. Keyboard focus is not moved to the new content. The page title is not automatically updated. Screen readers do not announce the page change. The blind user remains focused on the link in the navigation bar, unaware that the main content has changed.

UI components without native HTML semantics

WCAG 4.1.2

Vue component libraries (Vuetify, Quasar, Element Plus, PrimeVue) build complex interfaces but do not always use native HTML elements. Selectors are divs with custom dropdown lists. Tabs are divs with click handlers. Modals are not dialog elements. Without correct ARIA roles and attributes, these components are unusable for assistive technologies.

Test your Vue.js site

Discover the WCAG non-conformities of your Vue.js site in 5 minutes. Free, no commitment.

Run the free audit

What Scrutia detects on Vue.js

Scrutia runs your Vue.js application in a real browser and tests dynamic interactions including transitions and conditional rendering. Our engine detects focus losses caused by transitions, content managed by v-if without announcement, Vue Router navigations without focus management, and UI components without ARIA. We simulate a complete keyboard user journey waiting for each animation to finish before checking the accessibility tree state. Corrections are provided in Vue syntax (template + script) with recommended directives and composables.

Frequently Asked Questions — Vue.js

Does Scrutia detect problems related to Vue transitions?
Yes. Scrutia waits for animations to complete and checks the accessibility tree state and focus position after each transition. We detect focus losses, ghost elements in the accessibility tree, and content that disappears without aria-live announcement.
Are corrections compatible with Vue 3 and Composition API?
Yes. Corrections are provided in Vue 3 syntax with script setup and Composition API. For projects still using Options API, corrections are easily transposable. We specify composables to create (useAnnounce, useFocusReturn) and template attributes to add.
Does Scrutia test Vuetify or Quasar components?
Yes. Scrutia analyzes the HTML rendered in the browser, regardless of the component framework used. If Vuetify, Quasar, Element Plus, or PrimeVue generate components with ARIA gaps, they will be detected in the real context of your application.

Audit your Vue.js site now

106 RGAA criteria tested in 5 minutes. Free score, full report with code fixes for €49.

Test my Vue.js site