node package manager

a11y-css-scrubber

a11y-css-scrubber

This module allows you to create an iteration of the css on your site into a high contrast version of itself, making it more accessible. a11y-css-scrubber does not change or replace any existing CSS, but acts as an overlay CSS on your existing CSS.

Installation

This is a Node.js module available through the npm registry. To get started, download and install Node.js.

Install a11y-css-scrubber using the npm install command:

$ npm install a11y-css-scrubber

Why a11y-css-scrubber?

This module improves site accessibility by allowing you to change the following:

  • all background color changes to white (redefinable)
  • all text & border colors changes to black (redefinable)
  • access to the Dyslexie font, a font designed to improve readibility for dyslexics

Parameters

{
  "options": {
    "content": "",
    "backgrounds": "",
    "singleFile": "",
    "clearDest": "",
    "fontsBase64": ""
  },
  "src": "",
  "dest": ""
}
 
Required
key Type Default description
src string blank Source directory: the path where the currently processed CSS file resides
dest string blank Destination directory: the path of the target directory where the CSS file is copied to
Options (Object)
key Type Default description
content string #000000 All boarders and text
backgrounds string #ffffff All background colors
singleFile string undefined All files are processed into one, single file
clearDest boolean true If you are not using singleFile, it is recommended that you clear the destination directory
fontsBase64 boolean false Use Base64 encode fonts or standard font files

OpenDyslexic

When your a11y high contrast css is enabled you will also have access to the OpenDyslexic font. Though OpenDyslexic is not automatically enabled, a possible method to activate the font is:

  var node = document.createElement('style');
  node.innerHTML = '*:not(.icon){font-family: opendyslexicregular !important;}';
  document.body.appendChild(node);
 

Helper css

Helper css styles are also created to assist in the high contrast styling of your site. The classes listed below are be generated in the default or optionally defined colors.

.a11yCssScrubber-content
.a11yCssScrubber-backgrounds
 
.a11yCssScrubber-link--content:link
.a11yCssScrubber-active--content:active
.a11yCssScrubber-hover--content:hover
 
.a11yCssScrubber-link--backgrounds:link
.a11yCssScrubber-active--backgrounds:active
.a11yCssScrubber-hover--backgrounds:hover
 
.a11yCssScrubber-link-background--content:link
.a11yCssScrubber-active-background--content:active
.a11yCssScrubber-hover-background--content:hover
 
.a11yCssScrubber-link-background--backgrounds:link
.a11yCssScrubber-active-background--backgrounds:active
.a11yCssScrubber-hover-background--backgrounds:hover
 
.a11yCssScrubber-border--content
.a11yCssScrubber-border-top--content
.a11yCssScrubber-border-bottom--content
.a11yCssScrubber-border-left--content
.a11yCssScrubber-border-right--content
 
.a11yCssScrubber-border--backgrounds
.a11yCssScrubber-border-top--backgrounds
.a11yCssScrubber-border-bottom--backgrounds
.a11yCssScrubber-border-left--backgrounds
.a11yCssScrubber-border-right--backgrounds
 
.a11yCssScrubber-background--content
.a11yCssScrubber-background--backgrounds
 
.a11yCssScrubber-underline--content
.a11yCssScrubber-background--backgrounds
 

Tests

To run the test suite, first install the dependencies, then run npm run test:

$ npm install
$ npm test