Vue.js Accessibility Guide 2026: WCAG Compliance for Vue & Nuxt Apps

@click on a <div> or <span> creates a mouse-only interaction. Keyboard users and screen reader users are excluded. Use <button> for actions and <RouterLink>/<a> for navigation. If you must attach @click to a div, also add tabindex="0", role="button", and @keydown.enter.space handlers — but <button> is almost always correct.

Vue Router doesn't move focus or announce route changes. Screen reader users tab through a page and have no way to know new content loaded. Add a router.afterEach hook that sets focus to the main heading or a visually hidden skip target, and update the document title on every route change.

v-show toggles CSS display:none, which hides content from screen readers correctly. v-if removes the DOM node entirely — but if you're toggling interactive content (like a dropdown menu), use v-show with aria-expanded and aria-controls so the relationship between trigger and panel is announced. Don't use both v-show and aria-hidden on the same element — pick one.

When reactive data changes — search results updating, form validation firing, notifications appearing — screen readers don't announce it unless you use ARIA live regions. Add aria-live="polite" to containers that receive dynamic content. For urgent alerts (errors that block form submission), use aria-live="assertive" or role="alert".

placeholder is not a label. Every input needs an associated <label> element with a matching for/id pair, or aria-label/aria-labelledby attributes. In Vue, computed IDs work well: :id="`field-${uid}`" with :for="`field-${uid}`" on the label. Don't rely on placeholder text — it disappears when users type and doesn't meet WCAG 1.3.1.

Custom Vue components that visually mimic <select> menus or comboboxes need the full ARIA combobox or listbox pattern: role="combobox", aria-expanded, aria-haspopup, aria-activedescendant, and keyboard navigation (Arrow keys, Enter, Escape). This is non-trivial to implement correctly — use Headless UI for Vue or Radix Vue instead.

Option 1: Focus the main heading

// router/index.js
router.afterEach(() => {
  nextTick(() => {
    const heading = document.querySelector('h1')
    if (heading) {
      heading.setAttribute('tabindex', '-1')
      heading.focus()
    }
  })
})

Option 2: Live region announcement

// App.vue
<div aria-live="polite" aria-atomic="true" class="sr-only">
  {{ routeAnnouncement }}
</div>

// router/index.js
router.afterEach((to) => {
  app.config.globalProperties.routeAnnouncement =
    `Navigated to ${to.meta.title || to.name}`
})