How to install the accessibility widget in Laravel

Logo laravel (opens in a new tab)

This guide walks you through the installation process of the package and configuration of the WCAG accessibility widget in your Laravel application.

Step 1: Package installation

In a Laravel environment, the recommended way to install packages is using Composer.

  1. Install the package:Open your terminal in the root directory of your Laravel application and run: 
    composer require dockcodes/assistforwcag
  2. Publish configuration file:After installation, publish the package configuration file: 
    php artisan vendor:publish --provider="Dock\\AssistForWCAG\\DockServiceProvider" --tag="config"

Step 2: Website registration and token generation

To allow the widget to connect to the service, you need to generate a unique API token.

If you are installing the plugin for the first time, register (opens in a new tab) using Google, Facebook or use your own email address and password. wcag register form After creating an account, go to the “My Sites” tab, and then click the button “Add new” (opens in a new tab). wcag my sites In the form for adding a new page, 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 e.g. www. example.com then it is necessary to add both addresses. Read more about this in the documentation (opens in a new tab). Finally, click the "Save" button and copy the generated token. wcag copy token

Step 3: Token configuration

After generating your token, add it to your Laravel environment configuration file.

  1. Open the .env file located in the root directory of your application.
  2. Add the following entry: 
    ASSIST_FOR_WCAG_TOKEN="[Paste your token here]"
  3. Save the file.

Step 4: Adding the widget to your application

The package provides a Blade directive that allows you to easily embed the widget anywhere in your application.

  1. Open your main Blade layout file, for example: 
    resources/views/layouts/app.blade.php
  2. Insert the @assistForWCAG directive before the closing </body> tag: 
    <body>
    @assistForWCAG
</body>

Step 5: Clear configuration cache

After making changes, it is recommended to clear Laravel’s cache:

php artisan config:clear
php artisan cache:clear

Step 6: Preview your website

After completing the setup, open your website and verify that the accessibility widget is loaded correctly.

Test accessibility features such as:

  • text resizing,
  • contrast adjustments,
  • text-to-speech,
  • keyboard navigation,
  • WCAG accessibility profiles.

Alternative: Manual installation (without the package)

If you cannot use the Composer package, you can manually integrate the widget into your Laravel application.

  1. Get your token:Follow the steps described in “Step 2” above.
  2. Copy the script code:
    
<script>
    (function (d, s, t) {
        var f = d.getElementsByTagName(s)[0],
            j = d.createElement(s);
        j.async = true;
        j.src = '//wcag.dock.codes/accessibility/' + t + '/start.js';
        f.parentNode.insertBefore(j, f);
    })(document, 'script', '<strong>_TOKEN_</strong>');
</script>
  3. Add the script to your Blade layout:Open your main layout file, for example: 
    resources/views/layouts/app.blade.php

    Then paste the script before the closing </body> tag.

  4. Replace the token placeholder:Replace _TOKEN_ with your actual token.
  5. Clear cache: 
    php artisan config:clear
php artisan cache:clear

Once completed, the WCAG accessibility widget will be active in your Laravel application.

Related posts

Still looking for answers?

Ask our experts using online chat

Contact us