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.

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: link the Readabler scripts and styles via index.html.

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

<script src="./readabler/js/readabler.min.js"></script>

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

Initialize the Readabler with new Readabler

<script>
    window.addEventListener( 'DOMContentLoaded', () => {
        const options = {
            //path: './readabler',
        }
        const style = {
            //'--readabler-bg': '#ffffff'
        }
        const readabler = new Readabler( options, style );
    } );
</script>

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.

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.