readme

Author: swyxio

README.md

@@ -6,56 +6,47 @@ Run your critical pages through [pa11y](https://github.com/pa11y/pa11y) and fail
 
 ## Demo
 
-https://netlify-plugin-a11y.netlify.com/
+The demo site is a Gatsby blog that has been modified to have some inaccessible elements: https://netlify-plugin-a11y.netlify.com/
 
-## Overview
+- the [Hello World](https://netlify-plugin-a11y.netlify.com/hello-world/) page has an image with no `alt` text
+- the [Second Post](https://netlify-plugin-a11y.netlify.com/my-second-post/) page has a form no submit button, and an input with no label.
 
-Run axe-cli and fail build if accessibility failures are found.
+You can see the impact of the plugin in the deploy logs of this demo site: https://app.netlify.com/sites/netlify-plugin-a11y/deploys. By default, the plugin is set to error on failure.
 
-## Demonstration
 
-See this plugin being used in this simplified demo site:
-
-You can switch to `resultMode = "warn"` so that builds don't fail:
+But if that is too drastic, you can switch to `resultMode = "warn"` so that builds don't fail:
 
 ![image](https://user-images.githubusercontent.com/6764957/77146484-868d4a80-6a61-11ea-84cc-703c2abd6d6e.png)
 
 ## Usage
 
-### Prerequisites
+To install, add the following lines to your `netlify.toml` file:
+
+```toml
+[[plugins]]
+package = "netlify-plugin-a11y"
 
-- npm and node
-- @Netlify/build (later this will be included in the Netlify CLI)
-- A free [Netlify account](https://netlify.com)
-- Opt-in to Netlify Build Plugin feature support (Not yet publicly available, sorry)
+  # all inputs are optional, we just show you the defaults below
+  [plugins.inputs]
+  
+  # required config
+  checkPaths = ['/'] # you can give an array of directories or paths to html files, that you want to run a11y checks on
+  
+  # # optional config
+  # resultMode = "warn" # is "error" by default
 
+  # # Developer only
+  # debugMode = true # extra logging for plugin developers
+```
 
 ### Including this plugin in a project
 
 This plugin can be included via npm. Install it as a dependency for your project like so:
 
 ```
-npm install --save netlify-plugin-axe
+npm install --save netlify-plugin-a11y
 ```
 
-### Configuration
-
-This plugin will fetch the specified feeds and stash their data prior to the execution of the `build` command you have specified in your Netlify configuration. The desired feeds can be specified in the `netlify.toml` config file. For simpler configuration syntax, I recommend using yaml rather than toml by instead including a `netlify.yml` file.
-
-To use plugins, a `plugins` array should be specified in your `netlify.yml`. Each plugin can then be specified with its parameters like so:
-
-```yaml
-plugins:
-  - netlify-plugin-axe:
-    # type: ./path-to-plugin-file | npm-module-name
-    type: netlify-plugin-fetch-feeds
-    config:
-      site: mycoolsite.netlify.com # your Netlify site url
-      # https://github.com/dequelabs/axe-cli#running-specific-rules
-      axeFlags: --tags wcag2a
-```
-
-
 ### Execution in Netlify
 
 Once installed and configured, the plugin will automatically run in the Netlify CI during its specified Netlify Build lifecycle event.
@@ -73,13 +64,3 @@ npm install @netlify/build -g
 netlify-build
 ```
 
-
-## Issues
-
-- https://github.com/jaimeiniesta/serverless-axe-cli/pull/1
-- https://github.com/adieuadieu/serverless-chrome/issues/143
-- https://gist.github.com/stephenmathieson/57c1fa4a8a6bdbb489f91d4a4f713ee9
-- npm install chromedriver
-  - https://github.com/SeleniumHQ/selenium/issues/4863
-  - https://www.selenium.dev/documentation/en/webdriver/driver_requirements/
-- https://github.com/dequelabs/axe-cli/issues/84

plugin/index.js

@@ -45,7 +45,7 @@ function netlifyPlugin(conf) {
               `[${chalk.cyan.bold(res.documentTitle)} (${path.relative(
                 process.cwd(),
                 res.pageUrl
-              )})] ${chalk.pink(res.type)} ${chalk.cyan(res.typeCode)}: ${
+              )})] ${chalk.magenta(res.type)} ${chalk.cyan(res.typeCode)}: ${
                 res.message
               } (${chalk.cyan(res.context)})`
             );
@@ -58,13 +58,13 @@ function netlifyPlugin(conf) {
         } else {
           results.forEach((res) => {
             console.warn(
-              `${chalk.pink(res.type)} ${chalk.cyan(res.typeCode)}: ${
+              `${chalk.magenta(res.type)} ${chalk.cyan(res.typeCode)}: ${
                 res.message
               } (${chalk.cyan(res.context)})`
             );
           });
           console.warn(
-            chalk.pink(
+            chalk.magenta(
               `${results.length} accessibility issues found! Check the warnings.`
             )
           );