WordPress accessibility plugin installation

Wordpress

Plugin installation

Step 1: Install the plug-in

You can easily install the plugin using the WordPress plugin repository.
In the WordPress admin panel, go to the “Plugins” tab in the left menu, then click “Add New” at the top of the page.
In the search box, type in “Assist For WCAG”, and when you find the plugin, click “Install” and then “Enable.”
After activation, in the left menu, scroll down and select “Accessibility.”

Step 2: 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.

WCAG Token copy

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

Register form accessibility

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

Token dropdown

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 a statement of accessibility generated for your website. A statement of accessibility is a document required for public institutions in the European Union. If this applies to your site, then enable the statement of accessibility and complete the required fields. Read more about it in the documentation. Finally, click the “Save” button and copy the generated token.

Step 3: Activate the accessibility widget

Once you have the token, go back to your WordPress dashboard, go to the configuration section of the Assist For WCAG plugin and enable the widget. Enter the copied token in the appropriate field, and then adjust the color scheme, widget position and available options. Remember to save your changes after you finish the configuration.

Step 4: Preview the site

After installation and configuration, test the widget on your site to make sure it works properly and is WCAG compliant.

Manual installation of accessibility widget on WordPress website

If you prefer to manually install the DockWCAG widget on your website, follow the steps below:

Step 1: Register your site and obtain a token

Log in or register on the DockWCAG website, then enter your site address.

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

Tokens dropdown

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: Embed the code in WordPress

To install the widget, you need to add the appropriate script to your site’s HTML code. Remember not to remove any elements from the existing code, as this could affect the performance of the site.

Copy the code below:

<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', '***', {widget: true});
</script>

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

Go to the “Appearance” tab in the left menu of the WordPress admin panel, and then select “Theme File Editor”.
In the “Theme Files” section , find the “header.php” file .

WCAG Accessibility wordpress script instalation

Insert the script just before the closing tag </body>. Paste the code and replace *** with your unique token, which was generated in the previous step. Finally, click “Update file.”

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.