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.
locale(string) Specify plugin localization. There is used the browser localization of the user by default. Read more of how to add a new language.
palettepalette(object) The color palette of the accessibility settings.
headingTagh3(string) The tag is used for the Title wrapper.
Values: p, span, h1, h2, h3, h4, h5, h6
subHeadingTagh4(strgin) The tag is used for the Subtitle wrapper.
Values: p, span, h1, h2, h3, h4, h5, h6
Base 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
Popup options
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
Open Button 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
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.
keyboardNavigationtrue(boolean) Enable/disable the Keyboard Navigation option to enable a keyboard navigation feature.
Values: true, false
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
Text to Speech options
OptionDefault valueDescription
ttsPlayIcon<svg class=”selection…><svg>(string) The icon of the Play button. It can be SVG or .jpg/.png image.
ttsStopIcon<svg class=”selection…><svg>(string) The icon of the Stop button. It can be SVG or .jpg/.png image.
ttsIconSize32(integer) The stop/play icon size.
ttsLang(string) The speech recognition language. Specify the language code you want to use. All available languages and voices are here.
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.
ttsVoiceName(string)The voice Name you want to use. All available languages and voices are here.
ttsVolume1(float) The voice volume settings in the range [0 – 1]
Footer options
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
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?