#vuecember2020 #frontend #vuejs

vue-axe

vue-axe verifies the accessibility of Vue.js applications based on axe-core, a testing library that checks your project against the Web Content Accessibility Guidelines (WCAG). Well known tools like Lighthouse, webhint or Accessibility Insights for Web work with axe-core under the hood.

The special feature of vue-axe is that your own application can be checked for accessibility already during the development phase: simply integrate it via npm/yarn and execute the checks conveniently via console.

Installation & Use

# npm
$ npm install -D axe-core vue-axe

# yarn
$ yarn add -D axe-core vue-axe

Then add to main.js

// src/main.js
if (process.env.NODE_ENV === 'development') %7B
   const VueAxe = require('vue-axe').default
   Vue.use(VueAxe)
%7D

Use with nuxt.js

// plugins/axe.js
import Vue from 'vue'

if (process.env.NODE_ENV === 'development') %7B
   const VueAxe = require('vue-axe').default
   Vue.use(VueAxe)
%7D
// nuxt.config.js
plugins: [
   %7B src: '~/plugins/axe.js', mode: 'client' %7D
]

If you are using Storybook, you can also use the accessibility addon there. It will ensure the same tests per component story, directly as a separate tab in your Storybook addons console.

vue-axe thus enables the validation for accessibility as part of the usual unit tests. This is extremely convenient, but should only be seen as an additional building block for quality assurance and real user tests.

Details on installation, usage and configuration: https://github.com/vue-a11y/vue-axe

The topic Accessibility and why all users profit from it we have illuminated in a separate article.