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
In the plugin settings, there are several tabs responsible for various groups of plugin settings:
- Open Button
- Modal Popup
- Accessibility Statement
- Hot Keys
- Text to Speech
- Custom CSS
General settings for various accessibility modes and other options that help users better focus, read and orient in the website content.
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.
- 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.
- 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.
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.
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:
<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.
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.
Enter text for the button or leave blank to display only an icon.
Select the icon for the button using the icon library or upload your own icon in SVG format.
Select the icon position relative to the caption on the button. Pick “Hide” to remove the icon from the button.
Specify the font size for the icon and button caption using a convenient slider. You can set the size from 10 to 100 pixels.
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.
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.
The option allows you to adjust the border radius for the button.
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.
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.
The setting determines the delay before the button appears on the page.
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.
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.
Specify the background color and opacity for the modal popup using the color picker.
Select a base color of the modal popup using the color picker
Select a text color of the modal popup using the color picker.
Use the slider to specify the border radius of the modal.
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.
Specify the animation duration using the slider.
The toggle to enable/disable the popup shadow.
The option adds the overlap layer for site content and allows managing the overlay background color.
The option makes the popup float allowing it to be visible when scrolling the page.
The option scrolling on the page while the popup is open.
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.
- 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.
- 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.
- 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.
- 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.
The tab with contact information settings and the Accessibility Statement.
There are 3 options available to get Accessibility Statements:
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.
The users can see the created statement text when clicking on the link at the bottom of the settings window.
Insert a link to a third-party resource with the Accessibility Statement that is the most reliable for you.
Select the “None” option if you don’t want to display any statement link in the Accessibility settings window.
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
Shows which voice is selected now, and also allows you to listen to the voice sample chosen with default settings.
You can also listen to the Supported Google Voices and Languages in the Google Cloud Documentation.
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.
To select and activate a voice, click on the row in the table. The selected voice will be highlighted in blue.
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.
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.
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.
To create a pause in speech synthesis, use the following shortcode:
[ readabler-breaktime="2s" strength="medium"
Time sets the length of the break by seconds or milliseconds (e.g. “3s” or “250ms“).
Strength sets the strength of the output’s prosodic break by relative terms. Valid values are: “
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.
You can specify only the length of the pause. In this case, the
Strength parameter value will be set to default.
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.
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.
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:
Where the https://YourSite.com – your website domain.
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.