Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Readme improvements #23

Merged
merged 1 commit into from
Feb 19, 2020
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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.