Accessibility auditing for Vue.js applications.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo remove the counter feature Oct 3, 2018
dist
src faster debounce Oct 3, 2018
tests/e2e use the built vue axe Oct 2, 2018
.babelrc Config files and development dependencies May 15, 2018
.eslintrc.js Install and config Cypress to Automated Acceptance Testing May 15, 2018
.gitignore
CHANGELOG.md chore(release): 1.0.7 Oct 9, 2018
LICENSE Change to MIT license May 16, 2018
README.md updated readme to include settings and better description Oct 2, 2018
cypress.json Install and config Cypress to Automated Acceptance Testing May 15, 2018
package-lock.json chore(release): 1.0.7 Oct 9, 2018
package.json Update package.json Oct 9, 2018
rollup.config.dev.js Update demo May 16, 2018
rollup.config.prod.js Config files and development dependencies May 15, 2018

README.md

vue-axe

Accessibility auditing for Vue.js applications by running dequelabs/axe-core validation on the page your viewing, axe-core will run 1 second after the last VueJS update (with a 5 seconds debounce max wait). Package inspired by dequelabs/react-axe.

Install package

NPM

npm install -D vue-axe

Yarn

yarn add -D vue-axe

Install plugin

import Vue from 'vue'

if (process.env.NODE_ENV !== 'production') {
  const VueAxe = require('vue-axe')
  Vue.use(VueAxe, {
    config: {
      // ...
      rules: [
        { id: 'heading-order', enabled: true },
        { id: 'label-title-only', enabled: true },
        // and more
      ]
    }
  })
}

Configuration

Key Description Default Required
clearConsoleOnUpdate Clears the console each time vue-axe runs true false
config Provide your Axe-core configuration: https://github.com/dequelabs/axe-core/blob/master/doc/API.md#api-name-axeconfigure false

Install in Nuxt.js

Create plugin file plugins/axe.js

import Vue from 'vue'

if (process.env.NODE_ENV !== 'production') {
  const VueAxe = require('vue-axe')
  Vue.use(VueAxe, {
    config: {
      // your configuration data
    }
  })
}

In config file nuxt.config.js

...
plugins: [
  { src: '~/plugins/axe', ssr: false }
]

Using with HTML files

CDN

<!-- Required Javascript -->
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-axe"></script>
Vue.use(VueAxe, {
  config: {
    // your configuration data
  }
})

See demo

https://vue-axe.surge.sh/

Run the demo

git clone https://github.com/vue-a11y/vue-axe.git vue-axe-demo
cd demo
npm install
npm run dev

It is a simple webpack template already installed and configured to run and check the logs in the browser console.
After the commands just access the http://localhost:8080/

Run the tests

git clone https://github.com/vue-a11y/vue-axe.git vue-axe
npm install
npm run test 

Or run Cypress on interactive mode

npm run test:open

Contributing

  • 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;

If you want a faster communication, find me on @ktquez And follow us on Twitter @vue_a11y

thank you