Automatic Accessibility for Vue 3

Wrap your app in A11yer and accessibility is automatically handled. No hooks, no props to spread, no components to replace.

<script setup>
import { A11yer } from "a11yer-vue";
</script>

<template>
  <A11yer>
    <YourApp />
  </A11yer>
</template>

bun add a11yer-vue    # npm i a11yer-vue / pnpm add a11yer-vue / yarn add a11yer-vue

What it does

Live Demo

This page is wrapped in <A11yer> . The elements below have deliberate a11y issues that are automatically fixed.

Image without alt

a11yer-vue derives alt from the filename: "Mountain Landscape"

Form: auto labels + autocomplete

Email

Name

Table: auto scope

Feature	Status
Alt text	Auto
Focus trap	Auto

Keyboard: div[role=button]

a11yer-vue adds tabindex=0 and Enter/Space handler.

Click or press Enter

Roving tabindex: tablist

Arrow keys navigate between tabs. Only the active tab is in the tab order. a11yer-vue manages tabindex automatically.

Overview

Install

Config

a11yer-vue wraps your Vue 3 app and automatically patches accessibility issues in the DOM.

Configuration

<A11yer
  :config="{
    a11y: {
      minContrastRatio: 7,         // WCAG AAA (default: 4.5)
      focusVisible: true,          // default: true
      reducedMotion: 'auto',       // 'auto' | 'always' | 'never'
      autoImgAlt: true,            // default: true
      announceSpaNavigation: true, // default: true
      autoContrastFix: true,       // default: true
    },
  }"
>
  <App />
</A11yer>

Plays nice with others

a11yer-vue detects elements managed by existing libraries and skips them. No conflicts.

Acknowledgments

a11yer-vue is a Vue 3 port inspired by EdamAme-x/a11yer, the original framework-agnostic accessibility library. The core concepts, patch strategies, and overall architecture of this library are deeply informed by that work. Many thanks to EdamAme-x for creating and sharing it.