This JavaScript includes a solution for adding accessibility styles for official acceccibility guidelines (WCAG 2.1
, EN 301 549 V3.1.1
or BITV 2.0
) on a user interaction button click.
User select will be saved inside users local storage so if you switch pages, your settings will be honored and the additional stylesheet loaded again.
npm -i @buddenbrock/contrast-switch.js --save
yarn add @buddenbrock/contrast-switch.js
<link href="./src/contrast-switch.min.css" rel="stylesheet" />
<link href="https://unpkg.com/@buddenbrock/contrast-switch.js@0.1.6/src/contrast-switch.min.css" rel="stylesheet" />
<script src="./src/contrast-switch.min.js"></script>
<script src="https://unpkg.com/@buddenbrock/contrast-switch.js@0.1.5/src/contrast-switch.min.js"></script>
<button class="btn btn-a11y"></button>
let contrastButton = document.querySelector('.btn.btn-a11y');
let contrastSwitch = new ContrastSwitch(contrastButton);
Defining your options by adding settings array to class init. These options are supported. Not redefined options will be set by default values.
Property | Description | Options | Default |
---|---|---|---|
toggleClass |
class added to button if additional stylessheet is active | string | increased |
activeTitle |
button title if additional stylesheet is active | string | Reset the contrasts of the page |
activeText |
button content text if additional stylsheed is active | string | Reset contrasts |
inactiveTitle |
button title if additional stylesheet is inactive | string | Increase the contrast of the page |
inactiveText |
button content text if additional stylesheet is inactive | string | Increase contrasts |
localStorageKey |
storage key in which settings will be saved | string | contrast-key |
accessibilityFileProd |
CSS path to accessibility styles for production system | string | ./Public/Css/accessibility.min.css |
accessibilityFileLocal |
CSS path to accessibility styles for local system | string | ./Css/accessibility.css |
activeButtonAlertText |
text shown in alert window if additional styles activated | string | The contrast of the page has been increased for you. Use cookies to save the setting for the complete experience. |
inactiveButtonAlertText |
text shown in alert window if additional styles deactivated | string | The contrast of the page is back to normal. |
disableWindowAlert |
disable window alert (if true activeButtonAlertText and inactiveButtonAlertText will be ignored) |
true/false | false |
localhostName |
localhost name | string | localhost |
localhostInfoMessage |
console message if local system is detected | string | Localhost detected. Change contrast switch to local file path |
let contrastButton = document.querySelector('.btn.btn-a11y');
let contrastSwitch = new ContrastSwitch(contrastButton, {
toggleClass: 'increased',
activeTitle: 'Reset the contrasts of the page',
activeText: 'Reset contrasts',
inactiveTitle: 'Increase the contrast of the page',
inactiveText: 'Increase contrasts',
});
- script should honored browser settings too
This is free, open-source software. If you'd like to support the development of future projects, or say thanks for this one, you can donate.
GPL-3.0 © @buddenbrock/contrast-switch.js