Skip to content

Latest commit

 

History

History
153 lines (107 loc) · 3.59 KB

README.md

File metadata and controls

153 lines (107 loc) · 3.59 KB
Raw

Vue Axe logo

@vue-a11y/axe

Accessibility auditing for Vue.js 3 applications by running dequelabs/axe-core validation on the page you're viewing.

Links

Setup

npm install -D axe-core vue-axe@next
# or
yarn add -D axe-core vue-axe@next

main.js

import { createApp, h, Fragment } from 'vue'
import App from './App.vue'

let app = null

if (process.env.NODE_ENV === 'development') {
  const VueAxe = require('vue-axe')
  app = createApp({
    render: () => h(Fragment, [h(App), h(VueAxe.VueAxePopup)])
  })
  app.use(VueAxe.default)
} else {
  app = createApp(App)
}

app.mount('#app')

Vite

In Vite you need to add axe-core in the dependency optimization option (optimizeDeps).

In your vite.config.js

import vue from '@vitejs/plugin-vue'

export default {
  plugins: [vue()],
  optimizeDeps: {
    include: ['axe-core']
  }
}

Options

auto

Type Default
Boolean true

If false disables automatic verification. It is necessary to click on run again for a new analysis.

config

Type Default
Object { branding: { application: 'vue-axe' }

To configure the format of the data used by axe.
This can be used to add new rules, which must be registered with the library to execute.

NOTE: Learn more about Axe-core configuration

runOptions

Type Default
Object { runOptions: { reporter: 'v2', resultTypes: ['violations'] }

Flexible way to configure how axeCore.run() operates.

NOTE: Learn more about Axe-core runtime options

plugins

Type
Array

Register Axe plugins.

const plugins = require('@/plugins/axe')
app.use(VueAxe, {
  plugins: [plugins.myPlugin, plugins.myPlugin2]
})

Locales

Through the settings it is possible to define the language that will be used for the violations.

NOTE: axe-core already has several languages ​​available.
See axe-core locales

const ptBR = require('axe-core/locales/pt_BR.json')
app.use(VueAxe, {
  config: {
    locale: ptBR
  }
})

Roadmap

  • Enable highlighting of elements with errors on the page;
  • i18n;
  • Announce "views" changes to the screen reader;
  • New documentation;
  • Add focus trap in the popup;
  • How to use (Vite)
  • Add links (references file) to learn more;
  • Typescript support;
  • Add keyboard shortcut to open pop-up;
  • Animation slide-right (to details view) & slide-left (to violations view);
  • Carousel to element source when greater than 3;
  • Export violations (Output format to be defined);

Contributing

  • From typos in documentation to coding new features;
  • Check the open issues or open a new issue to start a discussion around your feature idea or the bug you found;
  • Fork repository, make changes and send a pull request;

Follow us on Twitter @vue_a11y

Thank you