Getting started with Readabler Accessibility script

To get started with the Accessibility script on your site follow the installation steps below.

step 1

For HTML Website: create the “readabler” folder in the site root folder and paste all the script files there.

readabler” folder with all the script files

For any CMS based website: upload the “readabler” folder with all the script files to the location provided by the used CMS

step 2

For HTML Website: add the Readabler scripts and styles to <head>...</head> in the index.html.

<link href="./readabler/css/readabler.min.css" rel="stylesheet">
<script src="./readabler/js/readabler.min.js"></script>

The files readabler.min.css and readabler.css are the same and you need to connect only one of them. The same thing with the files readabler.min.js and readabler.js.

For any CMS based website: link the Readabler scripts via header/footer file or other designated place. The script/style paths must be specified depending on the location of the ”readabler’ folder.

step 3

Prepare parameters and style properties for more flexible customization of the script. No options are required, so you can initialize Readabler entirely by default if you don’t specify any settings.

const options = {
    // path: './dest/',
    // accessibilityStatementLink: './dest/accessibility-statement.html',
    template: 'off-canvas',
    popupOverlay: false,
}

If you use your own path to the ‘”readabler” folder, you must uncomment (remove two slashes at the beginning) the line path: './readabler/' and specify the correct path in quotes.

Initialize the Readabler with new Readabler

Basic way:
window.addEventListener( 'DOMContentLoaded', () => {
    const readabler = new Readabler( options, style );
} );
Advanced way:
window.addEventListener( 'DOMContentLoaded', () => {
    try {
        const readabler = new Readabler( options, style );
    } catch ( e ) {
        console.warn( e );
    }
} );
Pro way:
( function () {

    document.readyState === 'loading' ?
        document.addEventListener( 'DOMContentLoaded', initReadabler ) :
        initReadabler();
    
    function initReadabler() {
        try {
            new Readabler( options, style );
        } catch ( e ) {
            console.warn( e );
        }
    }
    
} () );

Learn more about the possible style settings and options, as well as the methods for the Readabler class.

step 4

Go to your website and make sure the Accessibility settings button is displayed and worked correctly.

To increase the download speed, the Readabler script uploads only the necessary parts at the start. After activating some functions, it can create inline tags for additional features. This can cause Content Security Policy tests to fire. So, to solve this problem, add the following code to the head of your page

<meta http-equiv="Content-Secutiry-Policy" content="script-src 'self' 'unsafe-inline' 'unsafe-eval';">

Was this article helpful to you?