Installation of MODX accessibility plugin

Plugin installation

Step 1: Register your site and obtain a token

If you already have an account, log in to DockWCAG, go to your account and copy the generated token.

If you are installing the plugin for the first time, register using Google, Facebook or use your own email address and password.

After creating an account, go to the “My Tokens” tab, and then click the button “Add new”.

In the form for adding a new token, enter the addresses of the websites where you want to apply the token. If your site runs on a domain such as example .com and www.example.com then it is necessary to add both addresses. Read more about this in the documentation. When creating the token and later when editing, you can check the option to have an accessibility declaration generated for your website. An accessibility declaration is a document required for public institutions in the European Union. If this applies to your site, then enable the accessibility declaration and complete the required fields. Read more about it in the documentation. Finally, click the “Save” button and copy the generated token.

Step 2: Adding the DockWCAG plugin in MODX

To add a plugin in MODX, go to the “Elements” tab, then “Plugins” and click the add plugin button.

Give a name e.g. “Assist For WCAG”, and in the Plugin Code (PHP) field paste the following code:

<?php

function loadAccessibility($token, $config)
{
    $html = "<script>";
    $html .= "(function (w, d, s, l, t, c = {}) {";
    $html .= "w[l] = c;";
    $html .= "w[l].token = t;";
    $html .= "var f = d.getElementsByTagName(s)[0],";
    $html .= "j = d.createElement(s),";
    $html .= "a = new Date().getTime();";
    $html .= "j.async = true;";
    $html .= "j.src = '//wcag.dock.codes/accessibility/' + t + '/start.js?t=' + a;";
    $html .= "f.parentNode.insertBefore(j, f);";
    $html .= "})(window, document, 'script', 'accessibility', '".urlencode($token)."', ".json_encode($config).");";
    $html .= "</script>";
    return $html;
}
$modx->regClientHTMLBlock(loadAccessibility('***', [
    'widget' => true,
    'options' => [
        'contrast' => true,
        'underline' => true,
        /// ...
    ],
    'selectors' => [
        'contrast' => '.wcag-contrast',
        'underline' => '.wcag-underline',
        /// ...
    ],
    /// ...
]));

For more on how to configure the widget, see the documentation.

Paste code and replace *** with your unique token that was generated in the previous step.

Finally, in the “System Events” tab, check “OnWebPageInit” and click “Save.”

Step 3: Preview the site

After adding the script, test your site to make sure the widget is properly installed and works as expected. Check all the widget’s functions to verify that the installation was successful.