JS Website Accessibility – Readabler

Readabler is an accessibility Script that expands the boundaries of information accessibility for people with special portability. The script can be used on regular HTML websites and on different CMS-based sites. 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.

According to the World Health Organization research: globally, 1 billion people have a vision impairment that could have been prevented or has yet to be addressed.

These 1 billion people include those with moderate or severe distance vision impairment or blindness due to unaddressed refractive error (123.7 million), cataract (65.2 million), glaucoma (6.9 million), corneal opacities (4.2 million), diabetic retinopathy (3 million), and trachoma (2 million), as well as near vision impairment caused by unaddressed presbyopia (826 million).

The Readabler accessibility script will make publications on your website accessible to people with perception problems, cognitive impairments, hearing or vision impairments.

The Readabler is a lightweight and powerful solution for increasing the accessibility of content on any website. The script is easy to implement and ready to use after a few simple steps. It works quickly in any modern browser, both on a mobile device, laptop, and desktop computer.

The script provides a wide range of parameters to manage the settings that will be used on your site. Simultaneously, the script has 5 pre-installed profiles that will increase the accessibility of your site for people with Epilepsy, Visual Impaired, Cognitive Disability, ADHC, and also partially or completely blind.

Readable Experience

One of the main features of the script is to improve the readability of text content. To solve this problem, the script has settings for scaling the entire page or only some types of test, for example, a heading or plain text. Also important for readability are the settings for increasing line and letter spacing, changing all texts’ alignment.

For people who find it difficult to read text written in calligraphic or sans fonts, the plugin provides a mode for changing the font on the entire site to readable or to a font for people who have Dyslexia. Of course, an important part of any site is interaction with the page, for which the script provides modes for highlighting texts and titles and a magnifier that enlarges the text when you hover the mouse cursor over it.

Visually Pleasing

For people with visual impairments, the script provides a group of settings to optimize the appearance of the entire page or individual elements on the page.

In addition to the usual brightness, saturation, and contrast control modes, the script will make the site monochrome in black-white mode. And the change in the color of fonts and backgrounds makes available text that in the usual mode could not be readable or not noticeable and increase the accessibility of content on the page.

Ease of Orientation

A large group of settings to improve the site Accessibility for people with orientation disorders. The Readabler automatically analyzes the page at load time and creates a list of all links on the page so that several links do not go unnoticed or inaccessible for any reason.

One of the important settings in this group allows you to turn off anything that can flicker or blink, such as videos, CSS animations, and animated GIF images. Large cursors in black and white are available in the script to facilitate mouse navigation. Several modes for improved selection of objects on hover and focus and mode for controlling the page from the keyboard.

For people who cannot use the keyboard to type the test text, we have added a full virtual keyboard to the script. It is an on-screen keyboard with which you can enter text using manipulators such as a mouse or touchpad.

Text to Speech of Readabler accessibility script

An important setting for visually impaired people is the recognition and sounding of text on the page. The feature is provided by Web Speech API and supports more than 60 languages and voices.

All you need to do to hear the text from the page is turn on the mode in the settings and select the text.

Online Dictionary

For people with memory difficulties or forgetting to define things and concepts, we added Wikipedia to the script. To access the huge knowledge base of Wikipedia, you just need to open the accessibility control panel and write a word to clarify the meaning in the search field. In a few seconds, Wikipedia will show everything it knows about this thing or concept. And all this happens without leaving your site and the cozy atmosphere of accessibility that the user has set up for himself.

Privacy

An important part of this is that user preferences are saved after leaving the site. This means that you do not have to add anything new to your site’s Privacy Policy and Data Protection Policy and remain compatible with GDPR, CCPA.

Key Features of the Readabler Accessibility Script

• Flexible accessible settings set
• Draggable accessibility window
• Appearance animation of the accessibility button
• Flexible style settings of the button
• Text to speech feature
• Сompatible with all CMS/non CMS websites
• Fully compatible with HTML websites
• 7 Positions for placing the accessibility button
• Perfect for RTL direction
• Native valid JavaScript, without jQuery
• Huge customization capabilities
• Beautiful modern user Interface
• Lightweight and Fast
• Compatible with all modern browsers
• Easy to use and customize
• Installation guide
• Detailed users manual
• Six months included support for CodeCanyon buyers

Learn more about the script and how to configure it from the Online Documentation.

Changelog

1.5 - 18 February 2022
To the package added demo page
Dyslexic font support extended for Greek, Cyrillic and Arabic glyphs

1.4 - 8 September 2022
Fixed playback of the self-hosted video after disabling Stop Animation mode

1.3 - 8 September 2022
Fixed playback of the self-hosted video if the video loaded after the page load

1.2 - 6 June 2022
Fixed sidebar alignment for the off-canvas layout

1.1 - 2 June 2022
Added off-canvas and slide-in template for accessibility window
Added supported languages setting

1.0 - 2 May 2022
Initial release