How to manage the Accessibility script settings

Once you have installed the Readable script on your website, you can manage the Accessibility script settings according to your needs.

You can enable/disable certain modes or modules, and change the settings by adding the appropriate parameters in the plugin script.

Below is an example of disabling all preset accessibility modes and online dictionary option:

<script>
    window.addEventListener('DOMContentLoaded', () => {
        const readabler = new Readabler( {

             accessibilityProfiles           : false,
             onlineDictionary                : false,

        });
    });
</script>

Available configuration options of Accessibility script

base script options
OptionDefault valueDescription
path./readabler(string) Specify the path to the readabler script folder if it differs from the default.
palettepalette(object) The color palette of the accessibility settings.
disableOnMobilefalse(boolean) Disable accessible popup and button on mobile devices
config{}(object) Default configuration that is loaded if the script is loaded for the first time and does not have saved settings.
debugfalse(boolean)Enable/Disable debug mode.
Base options of accessibility script settings
Templates
OptionDefault valueDescription
templatepopup(string) Specify the template of the accessibility window. Values: popup, off-canvas, aside
sidebarAlignleft(string) Specify the accessibility window alignment. The option is applied for off-canvas and aside templates. Values: left, right
Templte options of accessibility script settings
Language
OptionDefault valueDescription
locale(string) Specify plugin localization. There is used the browser localization of the user by default.
supportedLanguages[ lang codes ](array) Supported languages
languageSwitchertrue(boolean)Enable/disable the language switcher for switch the accessible popup language.
languageSwitcherFlags{ lang code: country code }(object) Setting for correcting the language flag in the language switcher. For example, you can set `{ 'en': 'us' }` or `{ 'en': 'en' }`
Language options of accessibility script settings
Open Button options
OptionDefault valueDescription
showOpenButtontrue(boolean) Enable/disable the accessibility button display.
Values: true, false
buttonTabulationIndex0(integer) Indicates that its element can be focused, and where it participates in sequential keyboard navigation (usually with the Tab key, hence the name).
Values: -1(means that the element is not reachable via sequential keyboard navigation), 0(means that the element should be focusable in sequential keyboard navigation, after any positive tabindex values and its order is defined by the document’s source order.), 1(means the element should be focusable in sequential keyboard navigation, with its order defined by the value of the number.)
buttonPositionbottom-right(string) The display position of the accessibility button.
Values: top-left, top-right, left-center, right-center, bottom-left, bottom-center, bottom-right
buttonCaption(string) Enter text for the button or leave blank to display only an icon.
buttonIcon‘<svg xmlns=”http://www.w3.org
/2000/svg” viewBox=”0 0 293.05 349.63″><path d=”M95.37,51…”/></svg>’,
(string) Specify an icon for the button. It can be SVG or .jpg/.png image.
buttonIconPositionbefore(string) The icon position relative to the caption on the button.
Values: none, before, after, above, bellow
buttonEntranceAnimationfade(string) The button animation for appearing on the page.
Values: none, bounce, fade, flip-x, flip-y, scale, wobble, rotate.
buttonHoverAnimationnone(string) The animation for the button hover.
Values: none, bounce, fade, flip-x, flip-y, scale, wobble, rotate.
Open Button options of accessibility script settings
OptionDefault valueDescription
popupOverlaytrue(boolean) Enable/disable the overlap layer for site content.
Values: true, false
popupAnimationfade(string) The popup animation.
Values: none, bounce, fade, flip-x, flip-y, scale, slide-tr, slide-tl, slide-tt, slide-tb, wobble, rotate.
popupScrolltrue(boolean) Enable/disable the scrolling on a page while the popup is open.
Values: true, false
closeAnywheretrue(boolean) Enable/disable closing the accessibility settings by clicking outside the popup.
Values: true, false
closeButtontrue(boolean) Enable/disable the close button display in the accessibility settings window.
Values: true, false
popupDraggabletrue(boolean) Enable/disable the draggable feature of the accessibility settings window.
Values: true, false
popupShadowtrue(boolean) Enable/disable the popup shadow. Values: true, false
headingTagstringThe tag is used for the Title wrapper. Values: `p`, `span`, `h1`, `h2`, `h3`, `h4`, `h5`, `h6`.
subHeadingTagstringThe tag is used for the Subtitle wrapper. Values: `p`, `span`, `h1`, `h2`, `h3`, `h4`, `h5`, `h6`.
Popup options of accessibility script settings
Accessibility Profiles options
OptionDefault valueDescription
accessibilityProfilestrue(boolean) Enable/disable all preset accessibility modes.
Values: true, false
profileEpilepsytrue(boolean) Enable/disable the Epilepsy Safe Mode. This profile enables people with epilepsy to use the website safely by eliminating the risk of seizures that result from flashing or blinking animations and risky color combinations.
Values: true, false
profileVisuallyImpairedtrue(boolean) Enable/disable the Visually Impaired Mode. This mode adjusts the website for the convenience of users with visual impairments such as Degrading Eyesight, Tunnel Vision, Cataract, Glaucoma, and others.
Values: true, false
profileCognitiveDisabilitytrue(boolean) Enable/disable the Cognitive Disability Mode. This mode provides different assistive options to help users with cognitive impairments such as Dyslexia, Autism, CVA, and others, to focus on the essential elements of the website more easily.
Values: true, false
profileAdhdFriendlytrue(boolean) Enable/disable the ADHD Friendly Mode. This mode helps users with ADHD and Neurodevelopmental disorders to read, browse, and focus on the main website elements more easily while significantly reducing distractions.
Values: true, false
profileBlindUserstrue(boolean) Enable/disable the Blindness Mode. This mode configures the website to be compatible with screen-readers such as JAWS, NVDA, VoiceOver, and TalkBack. A screen-reader is software for blind users that is installed on a computer and smartphone, and websites must be compatible with it.
Values: true, false
Profiles of accessibility script settings
Online Dictionary options
OptionDefault valueDescription
onlineDictionarytrue(boolean) Enable/disable the Online Dictionary option – a search field to the Accessibility window settings that allows searching for phrases, abbreviations and concepts.
Values: true, false
languageauto(string) Specify your site language to use the dictionary in the appropriate language
Values: auto, ar, ast, az, bg, nan, bn, be, ca, cs, cy, da, de, et, el, en, es, eo, eu, fa, fr, gl, hy, hi, hr, id, it, he, ka, la, lv, lt, hu, mk, arz, ms, min, my, nl, ja, nb, nn, ce, uz, pl, pt, kk, ro, ru, ceb, sk, sl, sr, sh, fi, sv, ta, tt, th, tg, azb, tr, uk, ur, vi, vo, war, yue, zh, ko.
Readable Experience options
OptionDefault valueDescription
readableExperiencetrue(boolean) Enable/disable block settings of the Readable Experience.
Values: true, false
contentScalingtrue(boolean) Enable/disable the Content Scaling option for scaling the website content as a percentage.
Values: true, false
textMagnifiertrue(boolean) Enable/disable the Text Magnifier option for display specific text in the magnifier on hover.
Values: true, false
readableFonttrue(boolean) Enable/disable the Readable Font option for automatically converting the text font to a more readable one.
Values: true, false
dyslexiaFonttrue(boolean) Enable/disable the Dyslexia Friendly option to adapt the font to be more convenient for Dyslexic users.
Values: true, false
highlightTitlestrue(boolean) Enable/disable the Highlight Titles options to highlight the titles with borders for all site content.
Values: true, false
highlightLinkstrue(boolean) Enable/disable the Highlight Links option to highlight the links with borders for all site content.
Values: true, false
fontSizingtrue(boolean) Enable/disable the Font Sizing option to change the text font size as a percentage.
Values: true, false
lineHeighttrue(boolean) Enable/disable the Line Height option to change the font line-height as a percentage.
Values: true, false
letterSpacingtrue(boolean) Enable/disable the Letter Spacing option to change the text letter spacing as a percentage.
Values: true, false
alignCentertrue(boolean) Enable/disable the Align Center option to align the website content to the center.
Values: true, false
alignLefttrue(boolean) Enable/disable the Align Left option to align the website content to the left.
Values: true, false
alignRighttrue(boolean) Enable/disable the Align Right option to align the website content to the right.
Values: true, false
Visually Pleasing Experience options
OptionDefault valueDescription
visuallyPleasingExperiencetrue(boolean) Enable/disable block settings of the Visually Pleasing Experience.
Values: true, false
darkContrasttrue(boolean) Enable/disable the Dark Contrast option to set dark contrast for the content.
Values: true, false
lightContrasttrue(boolean) Enable/disable the Light Contrast option to set light contrast for the content
Values: true, false
monochrometrue(boolean) Enable/disable the Monochrome option to apply a monochrome color scheme for the content.
Values: true, false
highSaturationtrue(boolean) Enable/disable the High Saturation option to add color saturation for the site content.
Values: true, false
highContrasttrue(boolean) Enable/disable the High Contrast option to increase color contrast for the site content.
Values: true, false
lowSaturationtrue(boolean) Enable/disable the Low Saturation option to minimize color saturation for the site content.
Values: true, false
textColorstrue(boolean) Enable/disable the Text Colors option to display a color picker and adjust the text color of website content.
Values: true, false
titleColorstrue(boolean) Enable/disable the Title Colors option to display a color picker and adjust the titles color of website content.
Values: true, false
backgroundColorstrue(boolean) Enable/disable the Background Colors option to display a color picker and adjust the background color of website.
Values: true, false
Easy Orientation options
OptionDefault valueDescription
easyOrientationtrue(boolean) Enable/disable block settings of the Easy Orientation
Values: true, false
muteSoundstrue(boolean) Enable/disable the Mute Sounds option to mute all sounds on the page.
Values: true, false
hideImagestrue(boolean) Enable/disable the Hide Images option to hide all images on the page.
Values: true, false
virtualKeyboardtrue(boolean) Enable/disable the Virtual Keyboard option to enable the virtual keyboard when any one of the input fields is active.
Values: true, false
Extra option for Virtual Keyboard here
readingGuidetrue(boolean) Enable/disable the Reading Guide option to display a guideline that follows the cursor and helps to concentrate only on the specific text.
Values: true, false
usefulLinkstrue(boolean) Enable/disable the Useful Links option to display a select list of useful site links to get the necessary info without site research.
Values: true, false
stopAnimationstrue(boolean) Enable/disable the Stop Animations option to disable animations on the page.
Values: true, false
readingMasktrue(boolean) Enable/disable the Reading Mask option to create a horizontal mask of a certain height that follows the cursor and allows you to select and focus only on a certain part of the content.
Values: true, false
Extra option for reading mask here.
highlightHovertrue(boolean) Enable/disable the Highlight Hover option to highlight the hover area by borders.
Values: true, false
highlightFocustrue(boolean) Enable/disable the Highlight Focus option to highlight the focus area by borders.
Values: true, false
bigBlackCursortrue(boolean) Enable/disable the Big Black Cursor option to enable a large black cursor instead of the regular one.
Values: true, false
bigWhiteCursortrue(boolean) Enable/disable the Big White Cursor to enable a large white cursor instead of the regular one.
Values: true, false
cognitiveReadingtrue(boolean)Enable/disable the Cognitive Reading option for changing the website content to a cognitive
textToSpeechfalse(boolean) Enable/disable the Text to Speech feature based on Web Speech API. The list of all available language and voices here.
Values: true, false
Extra options for Text to Speech here.
Note: the feature does not work in the Safari browser.
voiceNavigationtrue(boolean)Enable/disable the Voice Navigation option for navigating the website using voice commands.
keyboardNavigationtrue(boolean) Enable/disable the Keyboard Navigation option to enable a keyboard navigation feature.
Values: true, false
Cognitive Reading
OptionDefault valueDescription
cognitiveReadingFocustrue(boolean) Changing text contrast to increase focus on cognitive reading anchors
cognitiveReadingFixationnormal(string) Changing changes the size of the block allocated for cognitive reading. Values: `low`, `normal`, `strong`
Reading Mask
OptionDefault valueDescription
readingMaskHeight100(integer) Specify the height of the Reading Mask in pixels.
Virtual Keyboard
OptionDefault valueDescription
virtualKeyboardLayoutenglish(string) Specify a language layout for the virtual keyboard.
Values: arabic, assamese, belarusian, bengali, burmese, chinese, czech, english, farsi, french, georgian, german, gilaki, greek, hebrew, hindi, italian, japanese, kannada, korean, nigerian, norwegian, polish, russian, sindhi, spanish, swedish, thai, turkish, ukrainian, urdu, uyghur
Speech Synthesis
OptionDefault valueDescription
ttsLang

(string) The speech recognition language. Specify the language code you want to use. All available languages and voices are here.
ttsVoiceNameThe option has been Deprecated since the script version 1.7.0
ttsPitch1(float) Speaking pitch, in the range [0 – 2]. 2 means an increase of 2 semitones from the original pitch. 0 means a decrease of 0 semitones from the original pitch.
ttsRate1(float) This setting changes the voice playback speed. The smaller the number, the slower the synthesized voice will speak, and the more the amount will be, the faster will be the speech. The normal speed is 1. You can select any value in the range from 0.1 to 10. The higher the number, the faster the speech.
ttsVolume1(float) The voice volume settings in the range [0 – 1]
Text to Speech options
OptionDefault valueDescription
ttsModeselection(string) Mode of the text to speech. Values: `selection`, `click`
ttsPlayIconThe option has been Deprecated since the script version 1.7.0 (string) The icon of the Play button. It can be SVG or .jpg/.png image.
ttsStopIconThe option has been Deprecated since the script version 1.7.0 (string) The icon of the Stop button. It can be SVG or .jpg/.png image.
ttsIconSizeThe option has been Deprecated since the script version 1.7.0 (integer) The stop/play icon size.
ttsTooltipPositiontopPosition of the text to speech tooltip. Values: `top`, `bottom`, `left`, `right`
Voice Navigation
OptionDefault valueDescription
voiceNavigationRerunfalseRerun voice navigation after recognitioin stopped by browser
voiceNavigationCommands{voice comands}Voice navigation commands

Find the default voice commands below. You can change it in the config.
{
'help': [ 'help', 'help-me', 'show-commands' ],
'hide-help': [ 'hide-help', 'hide-commands', 'hide-commands-list' ],
'scroll-down': [ 'scroll-down', 'down', 'page-down' ],
'scroll-up': [ 'scroll-up', 'up', 'page-up' ],
'go-to-top': [ 'go-to-top', 'top', 'page-top' ],
'go-to-bottom': [ 'go-to-bottom', 'bottom', 'page-bottom' ],
'tab': [ 'tab', 'next', 'next-tab' ],
'tab-back': [ 'tab-back', 'previous', 'previous-tab' ],
'show-numbers': [ 'show-numbers', 'display-numbers', 'enable-numbers' ],
'number': [ 'click', 'press', 'open' ],
'hide-numbers': [ 'hide-numbers', 'disable-numbers', 'remove-numbers' ],
'clear-input': [ 'clear-input', 'clear', 'remove' ],
'enter': [ 'enter', 'submit', 'ok' ],
'reload': [ 'reload', 'refresh', 'update' ],
'stop': [ 'stop', 'cancel', 'stop-listening' ],
'exit': [ 'exit', 'quit', 'close' ]
}

Note: You can use the `voiceNavigationCommands` object to add your own voice commands.
The key is the command name, and the value is an array of phrases that will be recognized by the browser. For each command, you can specify several phrases that will be recognized by the browser. The first phrase in the array will be used as a hint in the voice navigation interface.

Voice Navigation Actions Settings
OptionDefault valueDescription
scrollDownValue200(number)Value for scrolling down
scrollUpValue200(number)Value for scrolling up
scrollLeftValue200(number)Value for scrolling left
scrollRightValue200(number)Value for scrolling right
voiceNavigationVoiceGraphtrue(boolean)Show voice graph
voiceNavigationInterimResultsfalse(boolean)Show interim results

Voice Navigation Feedback Settings

OptionDefault valueDescription
voiceNavigationFeedbacktrue(boolean) Synthesize voice navigation feedback after action recognized
voiceNavigationFeedbackOk[
‘ok’,
‘yes’,
‘done’,
‘okay’,
‘good’,
‘great’,
‘executed’
]
(array)Voice feedback phrase slugs for a successfully recognized command
voiceNavigationFeedbackStart[
‘start-listening’,
‘begin-listening’,
‘listening’
]
(array)Voice feedback phrase slugs for recognition started
voiceNavigationFeedbackEnd[
‘end-listening’,
‘stop-listening’,
‘finish-listening’
]
(array)Voice feedback phrase slugs for recognition ended
voiceRecognitionNumbers[
‘zero’,
‘one’,
‘two’,
‘three’,
‘four’,
‘five’,
‘six’,
‘seven’,
‘eight’,
‘nine’,
‘ten’,
‘eleven’,
‘twelve’,
‘thirteen’,
‘fourteen’,
‘fifteen’,
‘sixteen’,
‘seventeen’,
‘eighteen’,
‘nineteen’,
]
(array)Voice recognition numbers for `number` group of command

Please note that the feedback arrays should contain not the phrases themselves,
but phrase slugs from the translation file.


For example, if you want to add the phrase “Okay, I’m listening” to the `voiceNavigationFeedbackStart` array, you need to add the `voiceNavigationFeedbackStart.listening` phrase slug to the array, and “Okay, I’m listening” to the translation file.

For most languages, the browser recognizes numbers greater than 20 as numbers and does not require separate translations. However, some languages may require additional translations for numbers.

OptionDefault valueDescription
resetButtontrue(boolean) Enable/disable the Reset button in the Accessibility popup window settings.
Values: true, false
hideButtontrue(boolean) Enable/disable the Hide button in the Accessibility popup window settings.
Values: true, false
accessibilityStatementtrue(boolean) Enable/disable the Accessibility Statement link in the popup window settings.
Values: true, false
accessibilityStatementTypeiframe(string) Specify the type of Accessibility Statement.
Values: iframe, html, link
accessibilityStatementLink./readabler/accessibility-statement.html(string) Specify the Accessibility Statement link when the accessibilityStatementType is set iframe or link
accessibilityStatementHtml(string) Specify the Accessibility Statement Html when the accessibilityStatementType is set html
poweredBytrue(boolean) Show powered by Readabler link
Footer options of accessibility script settings
Hot Keys options
OptionDefault valueDescription
hotKeyOpenInterfaceAlt+9(string) Opens the Accessibility Interface. Enter the required keys to change the default value.
hotKeyMenuM(string) The default hotkey of the menus navigation. Enter the required keys to change the default value.
hotKeyHeadingsH(string) The default hotkey of the headings navigation. Enter the required keys to change the default value.
hotKeyFormsF(string) The default hotkey of the forms navigation. Enter the required keys to change the default value.
hotKeyButtonsB(string) The default hotkey of the buttons navigation. Enter the required keys to change the default value.
hotKeyGraphicsG(string) The default hotkey of the graphics navigation. Enter the required keys to change the default value.
Hot keys options

Was this article helpful to you?