accessibility

add accessibility to your website

Usage no npm install needed!

<script type="module">
  import accessibility from 'https://cdn.skypack.dev/accessibility';
</script>

README

ACCESSIBILITY

Add accessibility toolbar to your website with one line of code!

Alt text

USAGE:

npm install accessibility

include script:
<script type="text/javascript" src="node_modules/accessibility/dist/accessibility.min.js"></script>

or import:
import { Accessibility } from 'accessibility/src/main';

initialize component:
window.addEventListener('load', function() { new Accessibility(); }, false);

Full Documentation here

We are proud to announce that Joomla! are now using this repo as there built-in accessibility tool.

DESCRIPTION:

Features:

  • increase text size
  • decrease text size
  • invert colors
  • gray hues
  • underline links
  • big cursor
  • reading guide
  • text to speech
  • speech to text

Does not depend any other directory (jQuery is not required).
Easy to use!

LIMITATIONS & KNOWN ISSUES:

  • Works with html5 browsers only (no IE8 and below)
  • Text to speech & speech to text works in supported browsers and languages only
  • Gray hues is disabled in firefox due to a bug in firefox browser and will be enabled when it will be fixed

MULTI LANGUAGE EXAMPLE:

var labels = {
    resetTitle: 'reset (in my language)',
    closeTitle: 'close (in my language)',
    menuTitle: 'title (in my language)',
    increaseText: 'increase text size (in my language)',
    decreaseText: 'decrease text size (in my language)',
    increaseTextSpacing: 'increase text spacing (in my language)',
    decreaseTextSpacing: 'decrease text spacing (in my language)',
    invertColors: 'invert colors (in my language)',
    grayHues: 'gray hues (in my language)',
    underlineLinks: 'underline links (in my language)',
    bigCursor: 'big cursor (in my language)',
    readingGuide: 'reading guide (in my language)',
    textToSpeech: 'text to speech (in my language)',
    speechToText: 'speech to text (in my language)'
};

var options = { labels: labels };
options.textToSpeechLang = 'en-US'; // or any other language
options.speechToTextLang = 'en-US'; // or any other language
new Accessibility(options);

DISABLE FEATURES EXAMPLE:

options.modules = {
    increaseText: [true/false],
    decreaseText: [true/false],
    invertColors: [true/false],
    increaseTextSpacing: [true/false],
    decreaseTextSpacing: [true/false],
    grayHues: [true/false],
    underlineLinks: [true/false],
    bigCursor: [true/false],
    readingGuide: [true/false],
    textToSpeech: [true/false],
    speechToText: [true/false]
};

When the default is true

TEXT SIZE MANIPULATION APPROACHES:

If text increase / decrease isn't working for your size your probablly not using responsive font size units (sutch as em, rem etc.).
In that case you can initialize the accessibility tool like this:
new Accessibility({textPixelMode: true})

ANIMATIONS:

Cancel all buttons animations:
new Accessibility({animations: {buttons: false}})

POSITIONING:

You can position the accessibility icon in any place on the screen. The default position is bottom right:
var options = {
    icon: {
        position: {
            bottom: { size: 50, units: 'px' },
            right: { size: 0, units: 'px' },
            type: 'fixed'
        }
    }
}
new Accessibility(options);
But you can also position the icon in the upper left corner of the screen and cancel the fixed positioning:
var options = {
    icon: {
        position: {
            top: { size: 2, units: 'vh' },
            left: { size: 2, units: '%' },
            type: 'absolute'
        }
    }
}
new Accessibility(options);

ICON IMAGE:

You can change the default icon as described here

Maintainers


Ran Buchnik
Omar Flórez

LICENSE:

MIT License