Vue.js and Nuxt Accessibility: vue-axe, Teleport Focus Management & Inert Attributes

Vue 3 and Nuxt 3 provide powerful reactivity and server-rendering primitives. However, building accessible Single Page Applications in Vue requires intentional handling of **teleported modals, dynamic form bindings (`v-model`), router transitions, and automated linting**.

Vue 3 Accessibility Architecture Overview

Vue 3 makes accessibility straightforward by supporting attribute inheritance on root elements, native event bindings, and composables for keyboard handling.

Teleport & Modal Focus Management in Vue

When teleporting modals to the document body, use a custom composable to trap focus and listen for the Escape key:

<!-- Accessible Teleported Modal in Vue 3 -->
<template>
  <Teleport to="body">
    <div v-if="isOpen" class="modal-backdrop" role="presentation">
      <div
        ref="modalRef"
        class="modal-dialog"
        role="dialog"
        aria-modal="true"
        :aria-labelledby="titleId"
        tabindex="-1"
      >
        <h2 :id="titleId">{{ title }}</h2>
        <slot />
        <button @click="closeModal" class="btn btn-secondary">Close</button>
      </div>
    </div>
  </Teleport>
</template>

Nuxt 3 Route Announcements & Head Management

Use Nuxt's useHead and watch useRoute() to update page titles dynamically and push updates to an accessible announcement region.

Automated Linting and Testing with vue-axe

Install vue-axe in your development environment to log real-time WCAG violations directly to the browser console during local development:

// In development main.js
if (process.env.NODE_ENV === 'development') {
  import('vue-axe').then(({ default: vueAxe }) => {
    vueAxe(app);
  });
}

Building Accessible Custom Inputs with v-model

When building custom switches or dropdowns, bind aria-checked or aria-expanded directly to reactive props, and ensure native keydown handlers respond to Space and Enter.