Big news!Introducing Socket AI - ChatGPT-Powered Threat Analysis. Learn more
Socket
Log inDemoInstall

accessibility

Package Overview
Dependencies
0
Maintainers
1
Versions
53
Issues
File Explorer

Advanced tools

accessibility

add accessibility to your website

    4.5.6latest
    npm

Version published
Maintainers
1
Weekly downloads
721
decreased by-13.86%

Weekly downloads

Readme

Source

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/main.bundle.js"></script>

or import: import { Accessibility } from 'accessibility';

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:

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

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)',     increaseLineHeight: 'increase line height (in my language)',     decreaseLineHeight: 'decrease line height (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)'     disableAnimations: 'disable animations (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 = {     decreaseText: [true/false],     increaseText: [true/false],     invertColors: [true/false],     increaseTextSpacing: [true/false],     decreaseTextSpacing: [true/false],     increaseLineHeight: [true/false],     decreaseLineHeight: [true/false],     grayHues: [true/false],     underlineLinks: [true/false],     bigCursor: [true/false],     readingGuide: [true/false],     textToSpeech: [true/false],     speechToText: [true/false]     disableAnimations: [true/false] };

When the default is true

TEXT SIZE MANIPULATION APPROACHES:

If text increase / decrease isn't working for your size your 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})

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

LICENSE:

MIT License

Keywords

FAQs

Last updated on 17 Dec 2022

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket
Socket
support@socket.devSocket SOC 2 Logo

Product

  • Package Issues
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc