Adds accessibility.js snippet to all rendered pages
Switch branches/tags
Nothing to show
Clone or download
Latest commit 962faff Mar 8, 2018
Permalink
Failed to load latest commit information.
.github Update screenshot Dec 12, 2017
src Improved logging Dec 12, 2017
.gitignore Initial Dec 11, 2017
.npmignore Add screenshot to readme Dec 11, 2017
LICENSE Initial commit Dec 11, 2017
README.md Add screenshot to readme Dec 11, 2017
index.js Initial Dec 11, 2017
package.json Add tag gatsby-plugin Mar 9, 2018

README.md

gatsby-plugin-accessibilityjs

Adds Github's accessibility.js snippet to all rendered pages.

screenshot

Install

yarn add gatsby-plugin-accessibilityjs

How to use

// in gatsby-config.js
plugins: [`gatsby-plugin-accessibilityjs`];

Options

Defaults:

// in gatsby-config.js
plugins: [
  {
    resolve: `gatsby-plugin-accessibilityjs`,
    options: {
      injectStyles: `
        .accessibility-error {
          border: 3px solid #f00;
        }
      `,
      errorClassName: `accessibility-error`,
      onError: (error) => {
        // do something with the error
      },
    },
  },
];

Fancier Styles

// in gatsby-config.js
plugins: [
  {
    resolve: `gatsby-plugin-accessibilityjs`,
    options: {
      injectStyles: `
        .accessibility-error {
          box-shadow: 0 0 3px 1px #f00;
          background-color: rgba(255, 0, 0, 0.25);
          position: relative;
        }
        .accessibility-error:before {
          content: "A11Y";
          position: absolute;
          top: 0;
          left: 0;
          color: #fff;
          font-size: 10px;
          background-color: rgba(255, 0, 0, 0.5);
          transform: translateY(-100%);
        }
      `,
    },
  },
];

Just Logging

Don't modify the DOM at all, just log errors with the default onError logger.

// in gatsby-config.js
plugins: [
  {
    resolve: `gatsby-plugin-accessibilityjs`,
    options: {
      injectStyles: false,
      errorClassName: false,
    },
  },
];