Skip to content

Commit

Permalink
Readme improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
jul-sh committed Feb 19, 2020
1 parent f4a526f commit 120e6c9
Showing 1 changed file with 15 additions and 10 deletions.
25 changes: 15 additions & 10 deletions README.MD
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
# Agnostic Axe

Agnostic axe logs accessibility issues to the browser console, as you develop your app. Its audits are powered by [axe-core](https://github.com/dequelabs/axe-core).
Agnostic Axe logs accessibility issues to the browser console, as you develop your app. Its audits are powered by [axe-core](https://github.com/dequelabs/axe-core).

![Screenshot of an opened website, with accessibility issues displayed in the browser console](screenshot.png)

## Basic Usage

Install the module from NPM (`npm install --save-dev agnostic-axe`) or directly import it from the URL:
To get started, import Agnostic Axe. Once initialized, it will continuously monitor the DOM for accessibility issues.


```js
import('https://unpkg.com/agnostic-axe@2').then(
Expand All @@ -17,40 +18,44 @@ import('https://unpkg.com/agnostic-axe@2').then(
)
```

> Be sure to only run the module in your development environment. Else your application will use more resources than necessary when in production. ([Webpack-Example](WEBPACK_EXAMPLE.MD))
> Be sure to only import Agnostic Axe in your development environment. Else your application will use more resources than necessary when in production. ([See an example of how to do this for webpack](WEBPACK_EXAMPLE.MD))
> To try out Agnostic Axe on any site, simply paste the above code into the browser console.
## Advanced Configuration
## API Details

The `AxeObserver` constructor takes two parameters:

- `violationsCallback` (required). A function that is invoked with an array of violations, as reported by [axe-core](https://github.com/dequelabs/axe-core). To log violations to the console, simply pass the `logViolations` function exported by this module.
- `violationsCallback` (required). A function that is invoked with an array of violations, as reported by [axe-core](https://github.com/dequelabs/axe-core). To log violations to the console in a nice format, simply pass the `logViolations` function exported by this module.
- `options` (optional). An object with that supports the following configuration keys:
- `axeCoreConfiguration` (optional). [A configuration object for axe-core](https://github.com/dequelabs/axe-core/blob/master/doc/API.md#api-name-axeconfigure). Overwrites the default configuration used by agnostic axe.
- `axeCoreInstanceCallback` (optional). A callback that is invoked with the [axe-core](https://github.com/dequelabs/axe-core) instance.

The `AxeObserver.observe` method takes one parameter:

- `targetNode` (required). AxeObserver performs an audit of this node, and continously monitors it for changes. If a change has been detected, AxeObserver audits the parts that have changed, and reports any new accessibility defects.
- `targetNode` (required). A DOM node. AxeObserver audits this node, and continously monitors it for changes. If a change has been detected, AxeObserver audits the parts that have changed, and reports any new accessibility defects.

To observe multiple nodes, one can call the `AxeObserver.observe` method multiple times.

To observe multiple nodes, simply call the `AxeObserver.observe` method multiple times. There should never be more than one instance of AxeObserver running in the same enviroment.
Note that due to limitations imposed by [axe-core](https://github.com/dequelabs/axe-core), there should never be more than one instance of AxeObserver in the same enviroment.

```js
MyAxeObserver.observe(document.getElementById('react-main'))
MyAxeObserver.observe(document.getElementById('vue-header'))
MyAxeObserver.observe(document.getElementById('page-footer'))
```

To stop observing changes, call the `disconnect` method.
To stop observing changes, invoke the `disconnect` method.

```js
MyAxeObserver.disconnect()
```

## Advantages
## Comparison with react-axe

Unlike framework specific implementations of [axe-core](https://github.com/dequelabs/axe-core), such as [react-axe](https://github.com/dequelabs/react-axe), agnostic axe uses a [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) to listen for changes directly in the DOM. This has two advantages:

1. It always works with the newest version of your framework (and even if you switch technologies). For example, at the time of writing, [react-axe](https://github.com/dequelabs/react-axe) does not work with React function components or fragments, while agnostic axe does.
1. It always works with all web frameworks, and with any versions. For example, at the time of writing, [react-axe](https://github.com/dequelabs/react-axe) does not work with the newer React function components or fragments, while agnostic axe does supports them.
2. It only runs audits if the actual DOM changes. This means it uses less resources than [react-axe](https://github.com/dequelabs/react-axe), which runs audits when components rerender, even if their output does not change.

Agnostic axe is optimized for performance. Its audits are small chunks of work, that are run in the browser's idle periods.

0 comments on commit 120e6c9

Please sign in to comment.