https://github.com/baroshem/nuxt-a11y

👤 Accessibility (A11Y) Module for Nuxt
https://github.com/baroshem/nuxt-a11y

a11y accessibility axe nuxt vue

Last synced: 4 months ago
JSON representation

👤 Accessibility (A11Y) Module for Nuxt

• Host: GitHub
• URL: https://github.com/baroshem/nuxt-a11y
• Owner: Baroshem
• Created: 2022-11-24T11:21:33.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2023-02-16T22:54:53.000Z (almost 2 years ago)
• Last Synced: 2024-10-14T18:20:10.359Z (4 months ago)
• Topics: a11y, accessibility, axe, nuxt, vue
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/nuxt-a11y
• Size: 329 KB
• Stars: 5
• Watchers: 1
• Forks: 0
• Open Issues: 4
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# nuxt-a11y

This module integrates [Axe](https://github.com/dequelabs/axe-core/) tool for auditing website against common Accessibility (A11Y) issues.

## Setup

```sh

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`:

```javascript

// nuxt.config.js

{

  modules: ["nuxt-a11y"],

}

```

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

```html

  const violations = useA11y()

```

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:

```ts

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](./playground) in development mode.