Global , Readabler

Readabler WordPress Plugin settings

Readabler is a WordPress accessibility plugin that expands the boundaries of information accessibility for people with special portability. The availability of content for people with special needs or difficulties with the perception of information is the most important part of each site’s operation.

Please make sure the HTML markup of your site is valid and meets all the requirements of the W3C to work correctly with all Readabler features.

To open the plugin settings in the WordPress Sidebar menu go to Readabler

Readabler Menu Item

In the plugin settings, there are several tabs responsible for various groups of plugin settings:

General

General settings for various accessibility modes and other options that help users better focus, read and orient in the website content.

Accessibility modes

The preset modes include certain site settings for ease of use by people with certain diseases.

  • Show section title -enable/disable the display of the current section title.
  • 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.
  • 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.
  • 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.
  • 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.
  • 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.

Online Dictionary

  • Section heading – enable/disable the display of the current section heading.
  • Online Dictionary – for Cognitive Disorders. Adds a search field to the Accessibility window settings that allows searching for phrases, abbreviations and concepts.
  • Dictionary language – select your site language to use the dictionary in the appropriate language. For a multilingual site, select Auto for automatic language detection.

Readable Experience

  • Different options to improve readability for users with a particular disability.
  • Section title – enable/disable the display of the current section title.
  • Content Scaling – the option allows scaling the website content as a percentage.
  • 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.
  • Text Magnifier – the option allows you to display specific text in the magnifier on hover.
  • 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

  • Show section title – enable/disable the display of the current section title.
  • 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

Tools for people with visual impairments, cognitive disabilities, or motor impairments to orient better at the site.

  • Show section title – enable/disable the display of the current section title.
  • 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.
  • Useful Links – the option displays a select list of useful site links to get the necessary info without site research.
  • 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.
  • Text to Speech – The option enables the Text-to-Speech feature. Audio is generated when the user highlights text. Before activating this feature, please upload the API key file on the “Text to Speech” tab. How to get own key read in the documentation.
  • Voice Navigation – the option enables the voice navigation feature. The user can navigate through the site using voice commands.
  • Keyboard Navigation – the option enables a keyboard navigation feature.

WordPress Themes & Plugins compatibility

A group of settings to improve the compatibility of the plugin with other plugins or themes.

Late CSS and JS loading

Enables later loading of styles and scripts. Use this option if some of the pages are missing Readable styles or scripts.

CopyScape Skip

The option to ignore the markup of the plugin interface when parsing with the CopyScape.

Required JS and CSS

Load only scripts and styles necessary for work with current settings.

Open Button

The tab contains styles and display settings of the open button for accessibility settings. Select the position to display the button, set the colors, icon, animation, etc.

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. To assign the button to specific pages, go to the Assignments settings tab. When switching the toggle off, the accessibility settings are hidden for all pages and you can add the trigger of the window with settings for any button or link on the site using the class:

readabler-trigger

For example:

[button class="readabler-trigger"] Accessibility button [/button]

All of the settings for this block listed below are available only if the “Show Floating Button” option is enabled.

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).

  • A negative value (usually tabindex="-1") means that the element is not reachable via sequential keyboard navigation
  • tabindex="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.
  • A positive value means the element should be focusable in sequential keyboard navigation, with its order defined by the value of the number. 

Position

The field to select one of 7 display positions on the page for the button. It can be Top Left, Top Right, Left Center, Right Center, Bottom Left, Bottom Right or Bottom Center positions.

Caption

Enter text for the button or leave blank to display only an icon.

Icon

Select the icon for the button using the icon library or upload your own icon in SVG format.

Icon Position

Select the icon position relative to the caption on the button. Pick “Hide” to remove the icon from the button.

Icon/Caption size

Specify the font size for the icon and button caption using a convenient slider. You can set the size from 10 to 100 pixels.

Margin

This option allows you to control the margin of the button. Here you can set the value from 0 to 100 pixels using the slider, where the value of “0” means that the button sticks to the site border.

Padding

This option allows you to control the padding of the button. Here you can set the value from 0 to 100 pixels using the slider, where the value of “0” means that the caption and icon stick to button borders.

Border Radius

The option allows you to adjust the border radius for the button.

Icon/Caption Color

Specify the font color and opacity for the text of the icon and button caption using the color picker.

Icon/Caption Hover Color

Specify the hover font color and opacity for the text of the icon and button caption using the color picker.

Background Color

Specify the background color and opacity for the button using the color picker.

Background Hover Color

Specify the background hover color and opacity for the floating button using the color picker.

Entrance Timeout

The setting determines the delay before the button appears on the page.

Entrance Animation

Select one of the available button animations for appearing on the page. The following types are available: Particles, Bounce, Fade, Flip-x, Scale, Wobble, Rotate. Pick “None” to disable the animation.

Hover Animation

Select one of the available animations for the button hover. The following types are available: Particles, Bounce, Fade, Flip-x, Scale, Wobble, Rotate. Pick “None” to disable the animation.

Select the position of the popup settings window on your screen: Right, Left, Center.

Day(Light) Theme/Night(Dark) Theme

The popup window design automatically adapts to the light/dark mode of your browser. You can manage the display styles separately for each of the modes.

  • Background Color – specify the background color and opacity for the modal popup using the color picker.
  • Key Color – select a base color of the modal popup using the color picker
  • Text Color – select a text color of the modal popup using the color picker.
Dark mode settings

Appearance and Behavior

Set the modal popup appearance and behavior

Border radius

Use the slider to specify the border radius of the modal.

Animation

Select one of the available modal animations for appearing on the page. The following types are available: Particles, Bounce, Fade, Flip-x, Flip-y, Scale, Slide to right, Slide to left, Slide to top, Slide to bottom, Rotate, Wobble. Pick “None” to disable the animation.

Animation Duration

Specify the animation duration using the slider.

The toggle to enable/disable the popup shadow.

Overlay

The option adds the overlap layer for site content and allows managing the overlay background color.

Floating popup

The option makes the popup float allowing it to be visible when scrolling the page.

Scroll

The option scrolling on the page while the popup is open.

Close anywhere

The option allows closing the settings by clicking outside the popup.

Reset Button

The toggle to enable/disable the Reset button in the Accessibility popup window settings.

Hide Button

The toggle to enable/disable the Hide button in the Accessibility popup window settings.

Design and Behaviour

The tab with style display settings for different Accessibility options.

  • Style – select the border style to highlight the current element. The following types are available: Dotted, Dashed, Solid, Double, 3D Grooved, 3D Ridged, 3D Inset, 3D Outset.
  • Color – select the highlight color of the current element.
  • Width – select the border width of the current item highlighting.
  • Offset – specify the offset of the highlight border.

Text Magnifier

  • Background Color – specify the background color of the magnifier.
  • Text Color – specify the font color of the magnifier.
  • Font Size – specify the font size of the current element.

Reading Guide

  • Width – specify the width of the line guide using the slider. The available values are from 50 to 2000 pixels.
  • Height – specify the height of the line guide using the slider. The available values are from 1 to 100 pixels.
  • Background Color – specify the background color of the line.
  • Border Color – specify the border color of the line.
  • Border Width – select the border width of the line guide.
  • Border Radius – specify the border radius of the line guide.
  • Arrow size – specify the arrow size for the guideline using the slider.

Reading Mask

  • Height – specify the height of the mask using the slider. The available values are from 50 to 500 pixels.
  • Overlay Color – select overlay color for reading mask using the color picker.

Virtual Keyboard

  • Layout – select a language layout for the virtual keyboard. Supports multilingualism since version 1.6.0.
Day(Light) Theme

The Virtual Keyboard design automatically adapts to the light/dark mode of your browser. You can manage the display styles separately for each of the modes.

  • Keyboard Background Color – select background color for the virtual keyboard using the color picker.
  • Button Background Color – select background color for buttons on the virtual keyboard using the color picker.
  • Button Color – select text color for buttons on the virtual keyboard.
Night(Dark) Theme
  • Keyboard Background Color – select background color for the virtual keyboard using the color picker.
  • Button Background Color – select background color for buttons on the virtual keyboard using the color picker.
  • Button Color – select text color for buttons on the virtual keyboard.

Accessibility Statement

The tab with contact information settings and the Accessibility Statement.

There are 3 options available to get Accessibility Statements:

Statement source

Generated by plugin

You can add your or your client information(Name,Email, and phone) and this will be added when generating text for the Accessibility Statement.

Accessibility Statement settings

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

Accessibility Statement link

Insert a link to a third-party resource with the Accessibility Statement that is the most reliable for you.

None

Select the “None” option if you don’t want to display any statement link in the Accessibility settings window.

Hot Keys

The section with hotkeys setting for quick interaction with the site. The plugin provides default settings but they can be easily changed according to your wishes.

  • Open Hot Key – open the Accessibility Interface with “Alt+9” keys. You can change the default settings by entering the required keys.
  • Keyboard Menus Navigation – the default hotkey of the menus navigation is “M“.
  • Keyboard Headings Navigation – the default hotkey of the headings navigation is “H“.
  • Keyboard Forms Navigation – the default hotkey of the forms navigation is “F“.
  • Keyboard Buttons Navigation – the default hotkey of the buttons navigation is “B“.
  • Keyboard Graphics Navigation – the default hotkey of the graphics navigation is “G“.

Text to Speech

API Key File

When you first run the plugin, you need to connect the Key File. How to get the Key File you can find out from the article How to get Google Text-to-Speech API Key File

Now used

Shows which voice is selected now, and also allows you to listen to the voice sample chosen with default settings.

Now used preview
Now used player

You can also listen to the Supported Google Voices and Languages in the Google Cloud Documentation.

Language

Using the filter, you can choose from the table the voices you need. After selecting a language, you can filter the table by voice type and gender.

The Voicer voice list
The Voicer voice list

To select and activate a voice, click on the row in the table. The selected voice will be highlighted in blue.

Audio Profile

You can optimize the synthetic speech produced by Cloud Text-to-Speech API for playback on different types of hardware. For example, if your app runs primarily on smaller, ‘wearable’ types of devices, you can create a synthetic speech from Cloud Text-to-Speech API that is optimized specifically for smaller speakers.

Speaking Rate/Speed

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.25 to 4. The higher the number, the faster the speech.

Pitch

Speaking pitch, in the range [-20.0, 20.0]. 20 means an increase of 20 semitones from the original pitch. -20 means a decrease of 20 semitones from the original pitch. The default value is 0

Background Color

With this setting, you can select the background color of the player tooltip.

Icon Color

This setting is used to select the color of the icon.

Voice guide

The setting allows you to specify your own description of the Text-to-Speech feature that will be displayed on the option hover in the accessibility window settings. The audio is generated for the entered text and voiced when the feature is enabled by a user.

Hover text of Text to Speech feature

SSML features in Text to Speech feature

You can fine-tune for the following entities:

SSML is possible by using shortcodes inside the WordPress page. A shortcode is a WordPress-specific code that lets you do nifty things with very little effort. Shortcodes can embed files or create objects that would normally require lots of complicated, ugly code in just one line.

Pause

To create a pause in speech synthesis, use the following shortcode:

[ readabler-break time="2s" strength="medium"]

Time sets the length of the break by seconds or milliseconds (e.g. “3s” or “250ms“).

The Strength sets the strength of the output’s prosodic break by relative terms. Valid values are: “x-weak“, weak“, “medium“, “strong“, and “x-strong“. The value “none” indicates that no prosodic break boundary should be outputted, which can be used to prevent a prosodic break that the processor would otherwise produce. The other values indicate monotonically non-decreasing (conceptually increasing) break strength between tokens. The stronger boundaries are typically accompanied by pauses.

[ readabler-break time="2s"]

You can specify only the length of the pause. In this case, the Strength parameter value will be set to default.

Mute

You can turn off the spoken part of the page. Wrap it in readabler-mute shortcode to prevent this section of the page from being spoken.

[ readabler-mute] ... [/readabler-mute]

You can combine and use several Voicer shortcodes in one place on the page as well as use multiple shortcodes on the page.

Initial settings

The settings allow you to automatically enable certain options/mode in the accessibility window before the user start configure them according to the personal requirements.

Start Configuration

Select the modes/options that will be applied after the page is loaded.

Select the options to be automatically enabled in the accessibility window
Save config

The option allows ignoring the user configuration that was saved after the previous visit.

Ignore user config

The option allows ignoring the user configuration that was saved after the previous visit if you have startup Start configuration of the accessibility window. Enable this if you want the user to always see the options you selected in the Start Configuration field when uploading a page.

Hide Forever/Restore the Accessibility button

The Accessibility settings window has the options Reset Settings to reset all the current window settings and Hide Forever when you want to hide the button since site adapting is not required for you.

Reset Settings and Hide Forever buttons

When you press Hide Forever the Accessibility button will be removed from all site pages and will no longer appear for you. If you need to restore the button use the specific link for your site:

https://YourSite.com/?readabler

or

https://YourSite.com/?accessibility

Where the https://YourSite.com – your website domain.

Analytics

A section for enabling and configuring analytics on the use of the accessibility window.

Usage analytics

A setting to enable analytics display. The following configurations are available:

Send interval

The slider for adjusting the interval of sending data to the server. The larger the interval, the smaller the number of requests to the server.

Dashboard widget

The option to show the usage analytics widget on the dashboard.

Readabler analytics widget
Post metabox

The option to show usage analytics metabox on the post edit page. Open the page in the editor and find the metabox in the right sidebar.

Analytics metabox in the post editor
Analytics column

The option to show usage analytics column on the posts list page

Analytics column on the posts list page
Strict GDPR

The option to enable compliance with strong GDPR regulation in some countries. Recommended to enable for Germany jurisdiction websites.

Clear analytics

The button to reset usage analytics data and remove table with all data.

Hosting

Fast and reliable hosting is significant for any WordPress site. We recommend all our customers use SiteGround WordPress Hosting. Many unique settings and features make this hosting the number 1 for WordPress: Free Website Transfer, Staging Tools, Free SSL, CDN, and much more for 3.95/mo.

Was this article helpful to you?