srujith-reddy / gsoc22_accessibility-plugin-script Goto Github PK

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

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);

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

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!

• 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

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);

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

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

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

You can position the accessibility icon anywhere 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);

You can change the default icon as described here

Ran Buchnik

Omar Flórez