baroshem/nuxt-a11y

👤 Accessibility (A11Y) Module for Nuxt

nuxt-a11y

This module integrates Axe tool for auditing website against common Accessibility (A11Y) issues.

Setup

yarn add --dev nuxt-a11y # yarn
npm i --save-dev nuxt-a11y # npm

Usage

The only thing you need to do to use the module in the default configuration is to register the module in the modules array in nuxt.config.ts:

// nuxt.config.js

{
  modules: ["nuxt-a11y"],
}

And that's it! You can now use the useA11y composable in your Nuxt app:

<script setup lang="ts">
  const violations = useA11y()
</script>

Now, you have access to the violations that were found by the Axe A11Y tool on the current page. The structure of each violation objects looks more or less like this:

interface Result {
  description: string;
  help: string;
  helpUrl: string;
  id: string;
  impact?: ImpactValue;
  tags: TagValue[];
  nodes: NodeResult[];
}

Development

• Run npm run dev:prepare to generate type stubs.
• Use npm run dev to start playground in development mode.

nuxt-a11y's Issues

treeshake composable out of build

would be nice to implement a check (process.dev) or provide advice to users on how to avoid bundling this in their production biuld

fix: `axe.run` is not a function

Adding useA11y() to my app.vue lead to the error mentioned in the title of this issue.

Minimal reproduction: https://stackblitz.com/edit/github-ghhyfz?file=package.json,nuxt.config.ts,app.vue