increase or decrease text size. works with em /
rem / px or any type
of font-size units
accessible Adaptive Accessibility Menu
add accessibility toolbar to every website with one line of code
features
manipulate text size
unfold_more
manipulate text spacing
increase or decrease text space. works with em /
rem / px or any type
of letter-spacing units
unfold_more
manipulate line height
increase or decrease line height. works with em /
rem / px or any type of line-height units
invert_colors
invert colors
toggles the document's body background color from black to white
and the default text color from
white to black and vice versa
format_color_reset
gray hues
turns the site to gray hues only - images including
underline links
mark links with underline
border_horizontal
reading guide
add a horizontal line that bind to the mouse or touch position
big cursor
Replacing the default mouse cursor with a bigger one
record_voice_over
text to speech
let's the user select any text on site and enabling the browser's
automatic reading feature (works
in supported browsers only)
mic
speech to text
by enabling that feature the user will be able to speak and the
browser will interpret his words
to text (works in supported browsers only)
hotkeys
Use keyboard shortcuts to toggle modules / features
easy to use!
install package:
npm install accessibility
include script:
<script type="text/javascript" src="node_modules/accessibility/dist/main.bundle.js"></script>
or import:
import { Accessibility } from 'accessibility/dist/main';
initialize component
window.addEventListener('load', function() {
new Accessibility();
}, false);
- Does not depend any other directory (jQuery is not required)
Limitations and 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)'
hotkeyPrefix: 'Hotkey: (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],
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
hotkeys module
This module is disabled by default
var options = {
hotkeys: {
enabled: [true/false]
}
};
new Accessibility(options);
Help text is active by default in the buttons title, you can disable or enable setting in
options.hotkeys.helpTitles = [true/false];
Hotkeys Defaults
| Module or Function | Hotkey |
| Toggle Menu | CTRL + ALT + A |
| Gray Hues | CTRL + ALT + G |
| Underline Links | CTRL + ALT + U |
| Big Cursor | CTRL + ALT + C |
| Reading Guide | CTRL + ALT + R |
| Text To Speech | CTRL + ALT + T |
| Speech To Text | CTRL + ALT + S |
| Disable Animation | CTRL + ALT + Q |
text size manipulation approaches
The default approach is textEmlMode: false meaning we are changing the
html's percentage.
You can also try the legacy approach, witch changes the body's pixels instead of the
html's percentage.
new Accessibility({textEmlMode: false})
If text increase / decrease isn't working for your size you're probably 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}})
free
code
open source
This project is an open source one.
GitHub
Repo
Fell free to star star this repository if it helped you.
you can also open an issue if necessary.
code
npm
package
Fell free to star star this
package if it helped you.
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 from this ('accessible'): accessible
To this this ('accessibility'): accessibility
Or change the shape of the icon to a circular one: accessibility
var options = {
icon: {
circular: [true/false],
img: ['accessibility'/'accessible'],
}
}
new Accessibility(options);
By default, this module is using Material Design Icon witch means that the material-icons
font-face will be loaded automatically.
If you want you can chooes to use Emojis instead:
var options = {
icon: {
useEmojis: [true/false],
}
}
new Accessibility(options);
In case the material-icons font-face was not loaded for any reason the
module will automatically fallback to Emojis icons.
persistent session
From version 3.0.1 the session will be persistent even after the user will refresh the page.
To disable this feature use:
var options = {
session: {
persistent: false
}
}
new Accessibility(options);
direct access to the API
You can toggle the menu buttons directly via the exposed API:
var instance = new Accessibility(options);
instance.menuInterface.increaseText();
instance.menuInterface.decreaseText();
instance.menuInterface.increaseTextSpacing();
instance.menuInterface.decreaseTextSpacing();
instance.menuInterface.invertColors();
instance.menuInterface.grayHues();
instance.menuInterface.underlineLinks();
instance.menuInterface.bigCursor();
instance.menuInterface.readingGuide();
instance.menuInterface.textToSpeech();
instance.menuInterface.speechToText();
instance.menuInterface.disableAnimations();
You can also override the functionality like this:
instance.menuInterface.increaseText = function() {
// My own way to increase text size . . .
}
add custom iframe
You can add buttons that will open a model with custom iframes (for accessibility terms for example) like so:
var options = {
iframeModals: [{
iframeUrl: 'https://github.com/ranbuch/accessibility',
buttonText: 'terms',
icon: 'favorite',
emoji: '❤️'
}
}
new Accessibility(options);
In case you will not provide the "icon" and the "emoji" we will use this setup:
icon: 'policy',
emoji: '⚖️'
You can find icons here
add custom functions
You can add buttons that will invoke custom functions like so:
var options = {
customFunctions: [{
method: (cf, state) => {
console.log('The provided customFunctions object:', cf);
console.log('Toggle state:', state);
},
buttonText: 'my foo',
id: 1,
toggle: true,
icon: 'psychology_alt',
emoji: '❓'
}
}
new Accessibility(options);
In case you will not provide the "icon" and the "emoji" we will use this setup:
icon: 'psychology_alt',
emoji: '❓'
You can find icons here
You have to provide the "id" parameter. This would also be your way to identify the button in case you are using more then on function while using the same custom function.
You have to provide the "toggle" parameter. This will determine whether the button will toggle his state active state (on and off) or not.
customize styling
You can use CSS variables to change the styling of the menu. Here is an example of how you can change the exposed variables in order to change the theme to dark mode:
:root {
--_access-menu-background-color: #000;
--_access-menu-item-button-background: #222;
--_access-menu-item-color: rgba(255,255,255,.6);
--_access-menu-header-color: rgba(255,255,255,.87);
--_access-menu-item-button-active-color: #000;
--_access-menu-item-button-active-background-color: #fff;
--_access-menu-div-active-background-color: #fff;
--_access-menu-item-button-hover-color: rgba(255,255,255,.8);
--_access-menu-item-button-hover-background-color: #121212;
--_access-menu-item-icon-color: rgba(255,255,255,.6);
--_access-menu-item-hover-icon-color: rgba(255,255,255,.8);
--_access-menu-item-active-icon-color: #000;
}
Alternatively, you can suppress the default CSS injection altogether (not recommended):
new Accessibility({suppressCssInjection: true});
You can also replace the icons by replacing the content attribute with the CSS variables currently being used.
You might need to replace the font-face-src:
const options = {
icon: {
fontFaceSrc: ['https://fonts.bunny.net/icon?family=Material+Icons']
}
};
new Accessibility(options);
Another example with font-awesome icons:
const options = {
icon: {
fontFaceSrc: ['https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/v4-font-face.min.css'],
fontFamily: '"FontAwesome"'
}
};
new Accessibility(options);
:root {
--_access-menu-item-icon-increase-text: "\f062";
--_access-menu-item-icon-decrease-text: "\f063";
}
Obviously you will need to add the missing variables for the rest of the fonts.
change modules order
You can determine the order of the modules:
new Accessibility({
modulesOrder: [
{
type: AccessibilityModulesType.textToSpeech,
order: 0
}
]
})
Pause animations
Testing for Speech to Text
license
