Skip to content

Commit 1a6ab1c

Browse files
authored
Clean up docs (#57)
* Do general copy cleanup * Add type column to configuration table * Add pre-release notice
1 parent 5ccd5dc commit 1a6ab1c

File tree

1 file changed

+15
-13
lines changed

1 file changed

+15
-13
lines changed

README.md

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,16 @@
22

33
Check for accessibility issues on critical pages of your Netlify website.
44

5+
🚧 **Note:** This plugin is pre-release software. Until version 1.0.0 is released, its API could change at any time. If you experience unexpected behavior while using this plugin, check [the changelog](./CHANGELOG.md) for any changes you might have missed, and please feel free to report an issue or submit a pull request about any issues you encounter.
6+
57
## What does this plugin do?
6-
This plugin uses The [`pa11y`](https://github.com/pa11y/pa11y) (which in turn uses [`axe-core`](https://github.com/dequelabs/axe-core)) to check your Netlify project for accessibility issues.
8+
This plugin uses [`pa11y`](https://github.com/pa11y/pa11y) (which in turn uses [`axe-core`](https://github.com/dequelabs/axe-core)) to check your Netlify project for accessibility issues.
79

810
If issues are found, the plugin generates a report which provides:
9-
- the page on which the issue was found
10-
- a description of the issue with a link to the relevant [Deque University rule](https://dequeuniversity.com/rules/axe/latest)
11+
- the path to the HTML file in which the error was found
12+
- a description of the error with a link to the relevant [Deque University rule](https://dequeuniversity.com/rules/axe/latest)
1113
- the name of the error within the aXe API
12-
- the path to the the relevant DOM element
14+
- the path to the the DOM element associated with the error
1315
- the DOM element itself
1416
- the total number of issues on the page
1517
- the sum of *all* issues across *all* pages that were checked
@@ -23,8 +25,8 @@ The demo site is an Eleventy blog containing some pages that have accessibility
2325
- the cat photo on [the blog post](https://netlify-plugin-a11y-demo.netlify.app/404.html) doesn't have an `alt` attribute.
2426
- the textarea on [the contact page](https://netlify-plugin-a11y-demo.netlify.app/contact-me/) is missing a proper label
2527

28+
With these errors, the logs for the demo look like this:
2629

27-
This is a screenshot of the build log for the demo site:
2830
![Screenshot of demo site build log.](./assets/plugin-a11y-log.png)
2931
<details>
3032
<summary>Text from screnshot of demo site build log</summary>
@@ -66,7 +68,7 @@ When installed this way, the plugin follows its default behavior, which is to ch
6668
To change the plugin's behavior, you'll want to install it throigh your `netlify.toml` file.
6769

6870
## Installation via the `netlify.toml` file
69-
First, you must be insalled as a dev dependency. If you're using NPM to manage your packages, run the following:
71+
First, install the plugin as a dev dependency. If you're using NPM to manage your packages, run the following:
7072
``` bash
7173
npm install --save-dev @netlify/plugin-a11y
7274
```
@@ -76,7 +78,7 @@ If you're using Yarn, run the following:
7678
yarn add --dev @netlify/plugin-a11y
7779
```
7880

79-
Next, you'll need to add the `@netlify/plugin-a11y` to the plugins section of your `netlify.toml` file.
81+
Next, add `@netlify/plugin-a11y` to the plugins section of your `netlify.toml` file.
8082

8183
```toml
8284
[[plugins]]
@@ -90,12 +92,12 @@ If you want to use the plugin's default settings (check **all** pages of your si
9092
If you've installed the plugin via `netlify.toml`, you can add a `[[plugins.inputs]]` field to change how the plugin behaves. This table outlines the inputs the plugin accepts. All of them are optional.
9193

9294

93-
| Input name | Description | Possible values | Default value |
94-
|--------------------- |------------------------------------------------------------------------------ |----------------------------------------------- |--------------- |
95-
| `checkPaths` | An array of strings indicating which pages of your site to check. | Any directories or html files in your project | `['/']` |
96-
| `failWithIssues` | A boolean indicating whether the build should fail if a11y issues are found. | `true` or `false` | `true` |
97-
| `ignoreDirectories` | An array of directories that *should not* be checked for a11y issues. | Any directories within your project | `[]` |
98-
| `wcagLevel` | The WCAG standard level against which pages are checked. | `'WCAGA'` or `'WCAGAA'` or `'WCAGAAA'` | `'WCAGAA'` |
95+
| Input name | Description | Value type | Possible values | Default value |
96+
|---------------------|----------------------------------------------------------|------------------|-----------------------------------------------|---------------|
97+
| `checkPaths` | Indicates which pages of your site to check | Array of strings | Any directories or HTML files in your project | `['/']` |
98+
| `failWithIssues` | Whether the build should fail if a11y issues are found | Boolean | `true` or `false` | `true` |
99+
| `ignoreDirectories` | Directories that *should not* be checked for a11y issues | Array of strings | Any directories in your project | `[]` |
100+
| `wcagLevel` | The WCAG standard level against which pages are checked | String | `'WCAGA'` or `'WCAGAA'` or `'WCAGAAA'` | `'WCAGAA'` |
99101

100102
Here's how these inputs can be used in `netlify.toml`, with comments to explain how each input affects the plugin's behavior:
101103

0 commit comments

Comments
 (0)