accessibility-comms

<!DOCTYPE html> <html> <head> <title>Accessibility Menu (toolbar)</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="Add accessibility to your website with one line of javascript code"> <meta name="keywords" content="Accessibility,menu,toolbar"> <meta name="author" content="ranbuch@gmail.com"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="css/main.css"> <link rel="shortcut icon" href="favicon.ico" /> </head> <body> <div class="wrapper center-me"> <div class="ui inverted blue tertiary segment"> <h1 class="ui header"> <i class="material-icons blue icon">accessible</i> Adaptive Accessibility Menu </h1> <h2 class="ui header"> add accessibility toolbar to every website with one line of code </h2> <div class="ui raised segment"> <h3 class="ui header"> features </h3> <div class="ui relaxed divided list"> <div class="item"> <i class="large text width middle aligned icon"></i> <div class="content"> <a class="header">manipulate text size</a> <div class="description">increase or decrease text size. works with <b>em</b> <b>/</b> <b>rem</b> / <b>px</b> or any type of font-size units </div> </div> </div> <div class="item"> <i class="large material-icons middle aligned icon" style="transform: rotate(90deg) translate(4px, 2px);">unfold_more</i> <div class="content"> <a class="header">manipulate text spacing</a> <div class="description">increase or decrease text space. works with <b>em</b> <b>/</b> <b>rem</b> / <b>px</b> or any type of letter-spacing units </div> </div> </div> <div class="item"> <i class="large material-icons middle aligned icon">unfold_more</i> <div class="content"> <a class="header">manipulate line height</a> <div class="description">increase or decrease line height. works with <b>em</b> <b>/</b> <b>rem</b> / <b>px</b> or any type of line-height units </div> </div> </div> <div class="item"> <i class="large material-icons middle aligned icon">invert_colors</i> <div class="content"> <a class="header">invert colors</a> <div class="description">toggles the document's body background color from black to white and the default text color from white to black and vice versa</div> </div> </div> <div class="item"> <i class="large material-icons middle aligned icon">format_color_reset</i> <div class="content"> <a class="header">gray hues</a> <div class="description">turns the site to gray hues only - images including</div> </div> </div> <div class="item"> <i class="large underline middle aligned icon"></i> <div class="content"> <a class="header">underline links</a> <div class="description">mark links with underline</div> </div> </div> <div class="item"> <i class="large material-icons middle aligned icon">border_horizontal</i> <div class="content"> <a class="header">reading guide</a> <div class="description">add a horizontal line that bind to the mouse or touch position </div> </div> </div> <div class="item"> <i class="large material-icons middle aligned icon svg-wrap"> <svg version="1.1" id="iconBigCursorSvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="position: absolute;width: 19px;height: 19px;left: 3px;top: 6px;enable-background:new 0 0 512 512;" xml:space="preserve"> <path d="M 423.547 323.115 l -320 -320 c -3.051 -3.051 -7.637 -3.947 -11.627 -2.304 s -6.592 5.547 -6.592 9.856 V 480 c 0 4.501 2.837 8.533 7.083 10.048 c 4.224 1.536 8.981 0.192 11.84 -3.285 l 85.205 -104.128 l 56.853 123.179 c 1.792 3.883 5.653 6.187 9.685 6.187 c 1.408 0 2.837 -0.277 4.203 -0.875 l 74.667 -32 c 2.645 -1.131 4.736 -3.285 5.76 -5.973 c 1.024 -2.688 0.939 -5.675 -0.277 -8.299 l -57.024 -123.52 h 132.672 c 4.309 0 8.213 -2.603 9.856 -6.592 C 427.515 330.752 426.598 326.187 423.547 323.115 Z" /> </svg> </i> <div class="content"> <a class="header">big cursor</a> <div class="description">Replacing the default mouse cursor with a bigger one</div> </div> </div> <div class="item"> <i class="large material-icons middle aligned icon">record_voice_over</i> <div class="content"> <a class="header">text to speech</a> <div class="description">let's the user select any text on site and enabling the browser's automatic reading feature (works in supported browsers only)</div> </div> </div> <div class="item"> <i class="large material-icons middle aligned icon">mic</i> <div class="content"> <a class="header">speech to text </a> <div class="description">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)</div> </div> </div> <div class="item"> <i class="large keyboard middle aligned icon"></i> <div class="content"> <a class="header">hotkeys</a> <div class="description">Use keyboard shortcuts to toggle modules / features</div> </div> </div> </div>  </div> <div class="ui raised segment"> <h3 class="ui header">easy to use!</h3> <div class="ui ordered list"> <a class="item"> <p> install package: </p> <code>npm install accessibility</code> </a> <a class="item"> <p> include script: </p> <code> <script type="text/javascript" src="node_modules/accessibility/dist/main.bundle.js"></script> </code> </a> <a class="item"> <p> or import: </p> <code> import { Accessibility } from 'accessibility/dist/main'; </code> </a> <a class="item"> <p> initialize component </p> <code> window.addEventListener('load', function() { <br>     new Accessibility(); <br> }, false); </code> </a> </div> <ol class="ui list"> <li value="*">Does not depend any other directory (jQuery is not required)</li> </ol> </div> <div class="ui raised segment" id="known-issues"> <h3 class="ui header">Limitations and Known Issues</h3> <p> Works with html5 browsers only (no IE8 and below) </p> <p> Text to speech & speech to text works in supported browsers and languages only </p> </div> <div class="ui raised segment" id="multi-language"> <h3 class="ui header">multi language example</h3> <p> <code> var labels = {<br>     resetTitle: 'reset (in my language)',<br>     closeTitle: 'close (in my language)',<br>     menuTitle: 'title (in my language)',<br>     increaseText: 'increase text size (in my language)',<br>     decreaseText: 'decrease text size (in my language)',<br>     increaseTextSpacing: 'increase text spacing (in my language)',<br>     decreaseTextSpacing: 'decrease text spacing (in my language)',<br>     increaseLineHeight: 'increase line height (in my language)',<br>     decreaseLineHeight: 'decrease line height (in my language)',<br>     invertColors: 'invert colors (in my language)',<br>     grayHues: 'gray hues (in my language)',<br>     underlineLinks: 'underline links (in my language)',<br>     bigCursor: 'big cursor (in my language)',<br>     readingGuide: 'reading guide (in my language)',<br>     textToSpeech: 'text to speech (in my language)',<br>     speechToText: 'speech to text (in my language)'<br>     disableAnimations: 'disable animations (in my language)'<br>     hotkeyPrefix: 'Hotkey: (in my language)'<br> };<br> var options = { labels: labels };<br> options.textToSpeechLang = 'en-US'; // or any other language<br> options.speechToTextLang = 'en-US'; // or any other language<br> new Accessibility(options); </code> </p> </div> <div class="ui raised segment" id="disable-features-example"> <h3 class="ui header">disable features example</h3> <p> <code> options.modules = {<br>     increaseText: [true/false],<br>     decreaseText: [true/false],<br>     invertColors: [true/false],<br>     increaseTextSpacing: [true/false],<br>     decreaseTextSpacing: [true/false],<br>     increaseLineHeight: [true/false],<br>     decreaseLineHeight: [true/false],<br>     grayHues: [true/false],<br>     underlineLinks: [true/false],<br>     bigCursor: [true/false],<br>     readingGuide: [true/false],<br>     textToSpeech: [true/false],<br>     speechToText: [true/false]<br>     disableAnimations: [true/false]<br> }; </code> <p> When the default is <b>true</b> </p> </p> </div> <div class="ui raised segment" id="hotkeys-module"> <h3 class="ui header">hotkeys module</h3> <p> <p> This module is <b>disabled</b> by default </p> <code> var options = {<br>     hotkeys: {<br>         enabled: [true/false]<br>     }<br> };<br> new Accessibility(options); </code><br><br> <p> Help text is active by default in the buttons title, you can disable or enable setting in   <code>options.hotkeys.helpTitles = [true/false];</code> </p> <p><b>Hotkeys Defaults</b></p> <table> <thead> <tr> <td>Module or Function</td> <td>Hotkey</td> </tr> </thead> <tbody> <tr> <td>Toggle Menu</td> <td>CTRL + ALT + A</td> </tr> <tr> <td>Gray Hues</td> <td>CTRL + ALT + G</td> </tr> <tr> <td>Underline Links</td> <td>CTRL + ALT + U</td> </tr> <tr> <td>Big Cursor</td> <td>CTRL + ALT + C</td> </tr> <tr> <td>Reading Guide</td> <td>CTRL + ALT + R</td> </tr> <tr> <td>Text To Speech</td> <td>CTRL + ALT + T</td> </tr> <tr> <td>Speech To Text</td> <td>CTRL + ALT + S</td> </tr> <tr> <td>Disable Animation</td> <td>CTRL + ALT + Q</td> </tr> </tbody> </table> </p> </div> <div class="ui raised segment" id="text-size-approaches"> <h3 class="ui header">text size manipulation approaches</h3> <p> The default approach is <code>textEmlMode: false</code> meaning we are changing the <code>html</code>'s percentage. </p> <p> You can also try the legacy approach, witch changes the <code>body</code>'s pixels instead of the <code>html</code>'s percentage. </p> <code> new Accessibility({textEmlMode: false}) </code> <p> If text increase / decrease isn't working for your size you're probably not using responsive font size units (sutch as em, rem etc.). </p> <p> In that case you can initialize the accessibility tool like this: </p> <code> new Accessibility({textPixelMode: true}) </code> </div> <div class="ui raised segment" id="animations"> <h3 class="ui header">animations</h3> <p> Cancel all buttons animations: </p> <code> new Accessibility({animations: {buttons: false}}) </code> </div> <div class="ui raised segment" id="free"> <h3 class="ui header">free</h3> <div class="ui list"> <div class="item"> <i class="large material-icons middle aligned icon">code</i> <div class="content"> <a class="header">open source</a> <div class="description">This project is an open source one.</div> </div> </div> <div class="item"> <i class="large github middle aligned icon"></i> <div class="content"> <a class="header" href="https://github.com/ranbuch/accessibility" target="_blank">GitHub Repo</a> <div class="description"> <p> Fell free to star <i class="icon material-icons">star</i> this repository if it helped you. </p> <p> you can also <a href="https://github.com/ranbuch/accessibility/issues" target="_blank">open an issue</a> if necessary. </p> </div> </div> </div> <div class="item"> <i class="large material-icons middle aligned icon">code</i> <div class="content"> <a class="header" href="https://www.npmjs.com/package/accessibility" target="_blank">npm package</a> <div class="description">Fell free to star <i class="icon material-icons">star</i> this package if it helped you.</div> </div> </div> </div> <p> </p> </div> <div class="ui raised segment" id="positioning"> <h3 class="ui header">positioning</h3> <p> You can position the accessibility icon in any place on the screen. The default position is bottom right: </p> <code> var options = { <p class="b-space-1"> icon: { </p> <p class="b-space-2"> position: { </p> <p class="b-space-3"> bottom: { size: 50, units: 'px' }, </p> <p class="b-space-3"> right: { size: 0, units: 'px' }, </p> <p class="b-space-3"> type: 'fixed' </p> <p class="b-space-2"> } </p> <p class="b-space-1"> } </p> <p> } </p> <p> new Accessibility(options); </p> </code> <br> <p> But you can also position the icon in the upper left corner of the screen and cancel the fixed positioning: </p> <code> var options = { <p class="b-space-1"> icon: { </p> <p class="b-space-2"> position: { </p> <p class="b-space-3"> top: { size: 2, units: 'vh' }, </p> <p class="b-space-3"> left: { size: 2, units: '%' }, </p> <p class="b-space-3"> type: 'absolute' </p> <p class="b-space-2"> } </p> <p class="b-space-1"> } </p> <p> } </p> <p> new Accessibility(options); </p> </code> </div> <div class="ui raised segment" id="icon-image"> <h3 class="ui header">icon image</h3> <p> You can change the default icon from this ('accessible'): <i class="large material-icons middle aligned icon i-color">accessible</i> </p> <p> To this this ('accessibility'): <i class="large material-icons middle aligned icon i-color">accessibility</i> </p> <p> Or change the shape of the icon to a circular one: <i class="large material-icons middle aligned icon i-circular i-color">accessibility</i> </p> <code> var options = { <p class="b-space-1"> icon: { </p> <p class="b-space-2"> circular: [true/false], </p> <p class="b-space-2"> img: ['accessibility'/'accessible'], </p> <p class="b-space-1"> } </p> <p> } </p> <p> new Accessibility(options); </p> </code> <br> <p> By default, this module is using <a href="https://material.io/resources/icons/?style=baseline" target="_blank">Material Design Icon</a> witch means that the <code>material-icons</code> <code>font-face</code> will be loaded automatically. </p> <p> If you want you can chooes to use Emojis instead: </p> <code> var options = { <p class="b-space-1"> icon: { </p> <p class="b-space-2"> useEmojis: [true/false], </p> <p class="b-space-1"> } </p> <p> } </p> <p> new Accessibility(options); </p> </code> <br> <p> In case the <code>material-icons</code> <code>font-face</code> was not loaded for any reason the module will automatically fallback to Emojis icons. </p> </div> <div class="ui raised segment" id="persistent-session"> <h3 class="ui header">persistent session</h3> <p> From version 3.0.1 the session will be persistent even after the user will refresh the page. </p> <p> To disable this feature use: </p> <code> var options = { <p class="b-space-1"> session: { </p> <p class="b-space-2"> persistent: false </p> <p class="b-space-1"> } </p> <p> } </p> <p> new Accessibility(options); </p> </code> </div> <div class="ui raised segment" id="direct-api-access"> <h3 class="ui header">direct access to the API</h3> <p> You can toggle the menu buttons directly via the exposed API: </p> <code> <p> var instance = new Accessibility(options); </p> <p> instance.menuInterface.increaseText(); </p> <p> instance.menuInterface.decreaseText(); </p> <p> instance.menuInterface.increaseTextSpacing(); </p> <p> instance.menuInterface.decreaseTextSpacing(); </p> <p> instance.menuInterface.invertColors(); </p> <p> instance.menuInterface.grayHues(); </p> <p> instance.menuInterface.underlineLinks(); </p> <p> instance.menuInterface.bigCursor(); </p> <p> instance.menuInterface.readingGuide(); </p> <p> instance.menuInterface.textToSpeech(); </p> <p> instance.menuInterface.speechToText(); </p> <p> instance.menuInterface.disableAnimations(); </p> </code> <br> <p> You can also override the functionality like this: </p> <code> <p> instance.menuInterface.increaseText = function() { <p class="b-space-1"> // My own way to increase text size . . . </p> <p> } </p> </p> </code> </div> <div class="ui raised segment" id="add-custom-iframe"> <h3 class="ui header">add custom iframe</h3> <p> You can add buttons that will open a model with custom iframes (for accessibility terms for example) like so: </p> <code> var options = { <p class="b-space-1"> iframeModals: [{ </p> <p class="b-space-2"> iframeUrl: 'https://github.com/ranbuch/accessibility', </p> <p class="b-space-2"> buttonText: 'terms', </p> <p class="b-space-2"> icon: 'favorite', </p> <p class="b-space-2"> emoji: '❤️' </p> <p class="b-space-1"> } </p> <p> } </p> <p> new Accessibility(options); </p> </code> <br> <p> In case you will not provide the "icon" and the "emoji" we will use this setup: </p> <p> <code> icon: 'policy', <br> emoji: '⚖️' </code> </p> <p> You can find icons <a href="https://mui.com/material-ui/material-icons/" target="_blank">here</a> </p> </div> <div class="ui raised segment" id="add-custom-functions"> <h3 class="ui header">add custom functions</h3> <p> You can add buttons that will invoke custom functions like so: </p> <code> var options = { <p class="b-space-1"> customFunctions: [{ </p> <p class="b-space-2"> method: (cf, state) => { </p> <p class="b-space-3"> console.log('The provided customFunctions object:', cf); </p> <p class="b-space-3"> console.log('Toggle state:', state); </p> <p class="b-space-2"> }, </p> <p class="b-space-2"> buttonText: 'my foo', </p> <p class="b-space-2"> id: 1, </p> <p class="b-space-2"> toggle: true, </p> <p class="b-space-2"> icon: 'psychology_alt', </p> <p class="b-space-2"> emoji: '❓' </p> <p class="b-space-1"> } </p> <p> } </p> <p> new Accessibility(options); </p> </code> <br> <p> In case you will not provide the "icon" and the "emoji" we will use this setup: </p> <p> <code> icon: 'psychology_alt', <br> emoji: '❓' </code> </p> <p> You can find icons <a href="https://mui.com/material-ui/material-icons/" target="_blank">here</a> </p> <p> 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. </p> <p> You have to provide the "toggle" parameter. This will determine whether the button will toggle his state active state (on and off) or not. </p> </div> <div class="ui raised segment" id="customize-styling"> <h3 class="ui header">customize styling</h3> <p> 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: </p> <code> :root { <p class="b-space-1"> --_access-menu-background-color: #000; </p> <p class="b-space-1"> --_access-menu-item-button-background: #222; </p> <p class="b-space-1"> --_access-menu-item-color: rgba(255,255,255,.6); </p> <p class="b-space-1"> --_access-menu-header-color: rgba(255,255,255,.87); </p> <p class="b-space-1"> --_access-menu-item-button-active-color: #000; </p> <p class="b-space-1"> --_access-menu-item-button-active-background-color: #fff; </p> <p class="b-space-1"> --_access-menu-div-active-background-color: #fff; </p> <p class="b-space-1"> --_access-menu-item-button-hover-color: rgba(255,255,255,.8); <p class="b-space-1"> --_access-menu-item-button-hover-background-color: #121212; </p> <p class="b-space-1"> --_access-menu-item-icon-color: rgba(255,255,255,.6); </p> <p class="b-space-1"> --_access-menu-item-hover-icon-color: rgba(255,255,255,.8); </p> <p class="b-space-1"> --_access-menu-item-active-icon-color: #000; </p> <p> } </p> </code> <br> <p> Alternatively, you can suppress the default CSS injection altogether (not recommended): </p> <p> <code> new Accessibility({suppressCssInjection: true}); </code> </p> <p> You can also replace the icons by replacing the <code>content</code> attribute with the CSS variables currently being used. </p> <p> You might need to replace the font-face-src: </p> <code> const options = { <p class="b-space-1"> icon: { </p> <p class="b-space-2"> fontFaceSrc: ['https://fonts.bunny.net/icon?family=Material+Icons'] </p> <p class="b-space-1"> } </p> }; <p> new Accessibility(options); </p> </code> <br> <p> Another example with <code>font-awesome</code> icons: </p> <code> const options = { <p class="b-space-1"> icon: { </p> <p class="b-space-2"> fontFaceSrc: ['https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/v4-font-face.min.css'], </p> <p class="b-space-2"> fontFamily: '"FontAwesome"' </p> <p class="b-space-1"> } </p> }; <p> new Accessibility(options); </p> <p> :root { <p class="b-space-1"> --_access-menu-item-icon-increase-text: "\f062"; </p> <p class="b-space-1"> --_access-menu-item-icon-decrease-text: "\f063"; </p> <p> } </p> </p> </code> <p> Obviously you will need to add the missing variables for the rest of the fonts. </p> </div> <div class="ui raised segment" id="module-order"> <h3 class="ui header">change modules order</h3> <p> You can determine the order of the modules: </p> <code> new Accessibility({ <p class="b-space-1"> modulesOrder: [ </p> <p class="b-space-2"> { </p> <p class="b-space-3"> type: AccessibilityModulesType.textToSpeech, </p> <p class="b-space-3"> order: 0 </p> <p class="b-space-2"> } </p> <p class="b-space-1"> ] </p> <p> }) </p> </code> </div> <div class="ui raised segment"> <h3> Pause animations</h3> <img src="https://c.tenor.com/D12KYBUCOBAAAAAd/git-merge.gif" width="400px"> <video width="400px" loop autoplay muted controls> <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> </video> <div class="spin"></div> </div> <div class="ui raised segment"> <h3 class="ui header">Testing for Speech to Text</h3> <textarea style="width: 100%; height: 100px;"></textarea> </div> <div class="ui raised segment"> <h3 class="ui header">license</h3> <p> <a href="https://spdx.org/licenses/MIT" target="_blank"> <img src="https://img.shields.io/badge/license-MIT-blue.svg?style=flat" alt="MIT License"> </a> </p> </div> </div> <div class="ui segment"> <div id="disqus_thread"></div> <script> /** * RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS. * LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables */ /* var disqus_config = function () { this.page.url = PAGE_URL; // Replace PAGE_URL with your page's canonical URL variable this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable }; (function() { // DON'T EDIT BELOW THIS LINE var d = document, s = d.createElement('script'); s.src = '//ranbuch.disqus.com/embed.js'; s.setAttribute('data-timestamp', +new Date()); (d.head || d.body).appendChild(s); })(); */ </script> <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script> <script src="../dist/main.bundle.js"></script> <script src="script/main.js"></script>   </body> </html>