accessibility
Advanced tools
Comparing version 5.0.1 to 5.0.2
@@ -144,3 +144,2 @@ import { ICommon, IUnitsDim } from './common.interface'; | ||
decreaseLineHeight: string; | ||
screenReader: string; | ||
} | ||
@@ -147,0 +146,0 @@ export interface IAccessibilityAnimationsOptions { |
@@ -21,2 +21,3 @@ import 'regenerator-runtime/runtime.js'; | ||
private _speechToTextTarget; | ||
private _onKeyDownBind; | ||
menuInterface: IMenuInterface; | ||
@@ -63,2 +64,3 @@ options: IAccessibilityOptions; | ||
invoke(action: string, button: HTMLElement): void; | ||
onKeyDown(e: KeyboardEvent): void; | ||
build(): void; | ||
@@ -65,0 +67,0 @@ updateReadGuide(e: Event | TouchEvent | any): void; |
{ | ||
"name": "accessibility", | ||
"version": "5.0.1", | ||
"version": "5.0.2", | ||
"description": "add accessibility to your website", | ||
@@ -5,0 +5,0 @@ "main": "index.js", |
314
README.md
@@ -21,3 +21,3 @@ ## ACCESSIBILITY | ||
### Full Documentation [here](https://ranbuch.github.io/accessibility/site/) | ||
### Full Documentation and [demo](https://ranbuch.github.io/accessibility/site/) | ||
@@ -50,44 +50,50 @@ >We are proud to announce that [Joomla!](https://www.joomdev.com/blog/entry/enable-joomla-4-accessibility) are now using this repo as there built-in accessibility tool. | ||
`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)'` | ||
`};` | ||
```javascript | ||
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);` | ||
```javascript | ||
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]` | ||
`};` | ||
```javascript | ||
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] | ||
}; | ||
``` | ||
@@ -99,36 +105,220 @@ >When the default is **true** | ||
In that case you can initialize the accessibility tool like this: | ||
`new Accessibility({textPixelMode: true})` | ||
```javascript | ||
new Accessibility({textPixelMode: true}) | ||
``` | ||
### ANIMATIONS: | ||
Cancel all buttons animations: | ||
`new Accessibility({animations: {buttons: false}})` | ||
```javascript | ||
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);` | ||
```javascript | ||
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);` | ||
```javascript | ||
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](https://ranbuch.github.io/accessibility/site/#icon-image) | ||
### 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: | ||
```javascript | ||
const options = { | ||
session: { | ||
persistent: false | ||
} | ||
}; | ||
new Accessibility(options); | ||
``` | ||
### DIRECT ACCESS TO THE API: | ||
You can toggle the menu buttons directly via the exposed API: | ||
```javascript | ||
var instance = new Accessibility(); | ||
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: | ||
```javascript | ||
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: | ||
```javascript | ||
const 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](https://mui.com/material-ui/material-icons/) | ||
### ADD CUSTOM FUNCTIONS: | ||
You can add buttons that will invoke custom functions like so: | ||
```javascript | ||
const 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](https://mui.com/material-ui/material-icons/) | ||
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: | ||
```css | ||
: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): | ||
```javascript | ||
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: | ||
```javascript | ||
const options = { | ||
icon: { | ||
fontFaceSrc: ['https://fonts.bunny.net/icon?family=Material+Icons'] | ||
} | ||
}; | ||
new Accessibility(options); | ||
``` | ||
Another example with font-awesome icons: | ||
```javascript | ||
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); | ||
``` | ||
```css | ||
: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: | ||
```javascript | ||
new Accessibility({ | ||
modulesOrder: [ | ||
{ | ||
type: AccessibilityModulesType.textToSpeech, | ||
order: 0 | ||
} | ||
] | ||
}); | ||
``` | ||
### LICENSE: | ||
[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg?style=flat)](https://spdx.org/licenses/MIT) |
@@ -158,3 +158,2 @@ import { ICommon, IUnitsDim } from './common.interface'; | ||
decreaseLineHeight: string; | ||
screenReader: string; | ||
} | ||
@@ -161,0 +160,0 @@ |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
403297
6263
322