Readabler App settings

After the Readabler app installation with a Plus subscription, you will find the following settings tabs.

  • Design
  • Profiles
  • Modes
  • Speech
  • Language

Design Settings

A set of settings that manage the display of the accessibility button or popup.

Layout

The following settings are designed to help you customize the accessibility popup layout.

  • Template – choose a display template for the accessibility window: Popup, Off Canvas, Aside
Accessibility Popup

The following settings are designed to help you customize the accessibility popup.

  • Overlay – the option adds the overlap layer for site content when the accessibility popup is open.
  • Page Scroll – the option to allow/disallow the scroll of the website when the accessibility popup is open.
  • Draggable – the option to allow/disallow the dragging of the accessibility popup.
  • Shadow – the option to enable/disable the shadow of the accessibility popup.
  • Close Anywhere – the option to allow/disallow the closing of the accessibility popup by clicking anywhere on the website. It is available if Overlay in On.
  • Close Button – the option to enable/disable the close button in the top right corner of the accessibility Popup.
  • Reset Button – the option to enable/disable the close button in the accessibility popup.
  • Hide Button – the option to enable/disable the hide button in the accessibility popup.
  • Animation – choose the animation of the accessibility popup.
Open Button

The following settings are designed to help you customize the accessibility button.

Show Open Button – the toggle to enable/disable the Accessibility button on all pages. When the option is enabled, the button is displayed on all pages automatically and all additional settings are available. 

  • Position on Screen – сhoose the position of the accessibility button: Top Left, Top Center, Top Right, Left Center, Right Center, Bottom Left, Bottom Right or Bottom Center.
  • Button Caption – enter text for the button or leave it blank to display only an icon.
  • Icon Position – choose the position of the accessibility button icon: Before, After, Above and Below. If you choose [No Icon], the button will be displayed as a text button.
  • Entrance Animation – Select one of the available button animations for appearing on the page. The following types are available: Bounce, Fade, Flip-X, Flip-Y, Scale, Wobble, Rotate. Pick “None” to disable the animation.
  • Hover Animation – choose the hover animation of the accessibility button. The following types are available: Bounce, Fade, Flip-X, Flip-Y, Scale, Wobble, Rotate. Pick “None” to disable the animation.
  • Tabulation Index – The option indicates that its element can be focused, and where it participates in sequential keyboard navigation (usually with the Tab key, hence the name). Note: If you set the value to -1, the button will be ignored by the tabulation order.
Accessibility Statements

The following settings are designed to help you customize the accessibility statements.

There are 3 options available to get Accessibility Statements:

  • Iframe – paste a link to the page with the required text that will be displayed in the iframe when clicking on Accessibility Statement link
  • HTML – enter the HTML code with the required information
  • Link – Insert a link to a third-party resource with the Accessibility Statement that is the most reliable for you.

The users can see the statement text when clicking on the link at the bottom of the settings window.

Other

Disable On Mobile – the option allows to hide the accessibility interface on mobile devices.

Accessibility Profiles

The following profiles are designed to make the website accessible to the widest possible audience, including people with disabilities such as blindness, low vision, deafness, hearing loss, learning disabilities, cognitive limitations, limited movement, speech disabilities, photosensitivity and combinations of these.

  • Epilepsy Safe – 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.
  • Visually Impaired – this mode adjusts the website for the convenience of users with visual impairments such as Degrading Eyesight, Tunnel Vision, Cataract, Glaucoma, and others.
  • Cognitive Disability  – 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.
  • ADHD Friendly  – 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.
  • Blindness – 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.

Accessibility Modes Settings

Online Dictionary

The following mode is designed to help your website visitors understand the meaning of the words using Wikipedia API.

Readable Experience

The following modes are designed to help your website visitors read the content of the website more easily.

  • Content Scaling – the option allows scaling the website content as a percentage.
  • Text Magnifier – the option allows you to display specific text in the magnifier on hover.
  • Readable Font – the option automatically converts the text font to a more readable one.
  • Dyslexia Friendly – the option adapts the font to be more convenient for Dyslexic users.
  • Highlight Titles – the option highlights the titles with borders for all site content.
  • Highlight Links – the option highlights the links with borders for all site content.
  • Font Sizing – the option allows you to change the text font size as a percentage.
  • Line Height – the option allows you to change the font line-height as a percentage.
  • Letter Spacing – the option allows you to change the text letter spacing as a percentage.
  • Align Center – the option aligns the website content to the center.
  • Align Left – the option aligns the website content to the left.
  • Align Right – the option aligns the website content to the right.
Visually Pleasing Experience

The following modes are designed to help your website visitors improve a visually pleasing experience.

  • Dark Contrast – the option sets a dark contrast for the content of the entire site.
  • Light Contrast – the option sets a light contrast for the content of the entire site.
  • Monochrome – the option applies a monochrome color scheme for the entire site.
  • High Saturation – the option adds color saturation for the entire site content.
  • High Contrast – the option increases color contrast for the entire site content.
  • Low Saturation – the option minimizes color saturation for the entire site content.
  • Text Colors – the option displays a color picker to adjust the text color of website content.
  • Title Colors – the option displays a color picker to adjust the title color of website content.
  • Background Colors – The option displays a color picker to adjust the background color of website content.
Easy Orientation

The following modes are designed to help your website visitors orientate themselves more easily.

  • Mute Sounds – the option mutes all sounds on the site.
  • Hide Images – the option hides all images on the site.
  • Virtual Keyboard – the option enables the virtual keyboard when any one of the input fields is active.
  • Reading Guide – The option displays a guideline that follows the cursor and helps to concentrate only on the specific text.
  • Stop Animations – the option allows disabling animations on the site.
  • Reading Mask – the option creates 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.
  • Highlight Hover – the option highlights the hover area by borders.
  • Highlight Focus – the option highlights the focus area by borders.
  • Big Black Cursor – the option enables a large black cursor instead of the regular one.
  • Big White Cursor – the option enables a large white cursor instead of the regular one.
  • Cognitive Reading – This mode allows visitors to use a cognitive reading tool to read the content of the website.
  • Keyboard Navigation – the option enables a keyboard navigation feature.
  • Text to Speech – The option enables the Text-to-Speech feature. Audio is generated when the user highlights text.
  • Voice Navigation – This mode allows visitors to use a voice commands to navigate through the website.
  • Useful Links – the option displays a select list of useful site links to get the necessary info without site research.

Speech Synthesis Settings

The following settings are designed to help you customize the speech synthesis. The Text to Speech is based on Web Speech API.

Text To Speech

The following settings are designed to help you customize the text to speech. You can select the text reading mode. Reading can start after selecting a certain piece of text or when you click on a sentence/paragraph. You can also choose the position of the voice button display.

Language Settings

The following settings are designed to help you customize the frontend UI language and available languages.

Was this article helpful to you?