You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+15-13Lines changed: 15 additions & 13 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,14 +2,16 @@
2
2
3
3
Check for accessibility issues on critical pages of your Netlify website.
4
4
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
+
5
7
## 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.
7
9
8
10
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)
11
13
- 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
13
15
- the DOM element itself
14
16
- the total number of issues on the page
15
17
- 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
23
25
- the cat photo on [the blog post](https://netlify-plugin-a11y-demo.netlify.app/404.html) doesn't have an `alt` attribute.
24
26
- the textarea on [the contact page](https://netlify-plugin-a11y-demo.netlify.app/contact-me/) is missing a proper label
25
27
28
+
With these errors, the logs for the demo look like this:
26
29
27
-
This is a screenshot of the build log for the demo site:
28
30

29
31
<details>
30
32
<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
66
68
To change the plugin's behavior, you'll want to install it throigh your `netlify.toml` file.
67
69
68
70
## 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:
70
72
```bash
71
73
npm install --save-dev @netlify/plugin-a11y
72
74
```
@@ -76,7 +78,7 @@ If you're using Yarn, run the following:
76
78
yarn add --dev @netlify/plugin-a11y
77
79
```
78
80
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.
80
82
81
83
```toml
82
84
[[plugins]]
@@ -90,12 +92,12 @@ If you want to use the plugin's default settings (check **all** pages of your si
90
92
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.
91
93
92
94
93
-
| Input name | Description | Possible values | Default value |
0 commit comments