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.
  • Keyboard Navigation – the option enables a keyboard navigation feature.

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 settings window for any button or link on the site using the:

data-readabler-trigger=""

For example:

<button data-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.

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.

Popup position

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

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.

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.

Popup Shadow

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.

Design

The tab with style display settings for different Accessibility options.

Highlight Titles, Highlight Links, Highlight Hover, Highlight Focus,

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

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

Custom 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 About Key File for the Voicer WordPress Plugin

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

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.

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.

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?