A11y-css-scrubber NPM

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