Accessibility widget script

Required Level of JavaScript Knowledge

To configure and implement the WCAG accessibility script, basic knowledge of JavaScript is sufficient, including:

• Adding scripts to web pages.
• Creating and modifying JavaScript objects.
• Passing arguments to functions.
• Working with CSS selectors.

Advanced programming knowledge is not required – the script is designed to be easy to use for non-experts in coding.

Script Structure and Operation

Basic Script Skeleton:

<script>
    (function (w, d, s, l, t, c = {}) {
        w[l] = c;
        w[l].token = t;
        var f = d.getElementsByTagName(s)[0], 
        j = d.createElement(s), 
        a = new Date().getTime();
        j.async = true;
        j.src = '//wcag.dock.codes/accessibility/' + t + '/start.js?t=' + a;
        f.parentNode.insertBefore(j, f);
    })(window, document, 'script', 'accessibility', '_TOKEN_', {_CONFIGURATION_});
</script>

Script Parameters:

1. '_TOKEN_'
   • Description: A unique token that you can generate for free on your DockWCAG account.
   • Required: Yes.
   • Example: 'abcde12345'.
2. {_CONFIGURATION_}
   • Description: An object containing the widget’s operational details.
   • Required: No, but recommended to customize the functionality.
   • Possible parameters are described below.

Configuration Parameters {_CONFIGURATION_}

The object allows you to customize the widget’s behavior. Below are the available options presented in a clear format.

1. Widget

2. Widget Options

Note: Features marked as “Premium” are only available in the advanced version.

3. Widget Position

4. Color Customization

Example of the Object

colors: {primary: '#0021c8', secondary: '#000243'}
These parameters allow full customization of the widget’s appearance to match the color scheme of the website where it is placed. The colors are passed in hex format (e.g., #0021c8), which is commonly used in CSS styles and allows precise color specification.

5. Custom Button Selectors

The selectors object allows you to assign your own buttons to the accessibility functions. Each key corresponds to a specific function, and the value is a CSS selector pointing to the HTML element.

Example of selectors object:

{
    "invertColor": ".btn-invert",
    "contrast": ".btn-contrast",
    "fontSize": ".btn-font-size",
    "textToSpeech": ".btn-tts"
}

Examples of implementation

Simple configuration with a ready-made widget

<script>
    (function (w, d, s, l, t, c = {}) {
        w[l] = c;
        w[l].token = t;
        var f = d.getElementsByTagName(s)[0], 
        j = d.createElement(s), 
        a = new Date().getTime();
        j.async = true;
        j.src = '//wcag.dock.codes/accessibility/' + t + '/start.js?t=' + a;
        f.parentNode.insertBefore(j, f);
    })(window, document, 'script', 'accessibility', 'abcde12345', {
        widget: true,
        position: 'right',
        colors: {primary: '#0021c8', secondary: '#000243'},
        options: {contrast: true, underline: true}
    });
</script>

Advanced configuration with custom selectors

<script>
    (function (w, d, s, l, t, c = {}) {
        w[l] = c;
        w[l].token = t;
        var f = d.getElementsByTagName(s)[0], 
        j = d.createElement(s), 
        a = new Date().getTime();
        j.async = true;
        j.src = '//wcag.dock.codes/accessibility/' + t + '/start.js?t=' + a;
        f.parentNode.insertBefore(j, f);
    })(window, document, 'script', 'accessibility', 'abcde12345', {
        widget: false,
        selectors: {
            showLine: ".wcag-focus",
            lineHeight: ".wcag-line-height",
            letterSpacing: ".wcag-letter-spacings",
            underline: ".wcag-underline",
            textToSpeech: ".wcag-text-to-speech",
            saturation: ".wcag-saturation",
            reset: ".wcag-reset",
        }
    });
</script>

Concluding remarks

• Make sure your unique token is correct before deployment.
• Premium versions offer additional features that can significantly improve accessibility.
• Custom selectors give you full control over the features, so you can customize them to fit your site design.