How to install the accessibility widget in Laravel

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
   Copy text

2. Publish configuration file:After installation, publish the package configuration file:

   php artisan vendor:publish --provider="Dock\\AssistForWCAG\\DockServiceProvider" --tag="config"
   Copy text

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, GitHub or your own e-mail address and password.

After creating an account, go to the “My sites” tab and click the “Add site” (opens in a new tab) button.

In the form for adding a new site, enter the addresses of the websites where you want to use the token. If your site runs on a domain such as example.com and also www.example.com, add both addresses. Read more about this in the documentation (opens in a new tab).

Finally, click “Save” and copy the generated token from the “Your token” field.

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]"
   Copy text

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
   Copy text

2. Insert the @assistForWCAG directive before the closing </body> tag:

   <body>
       @assistForWCAG
   </body>
   Copy text

Step 5: Clear configuration cache

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

php artisan config:clear
php artisan cache:clear
Copy text

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 = '//dockaccess.org/accessibility/' + t + '/start.js';
           f.parentNode.insertBefore(j, f);
       })(document, 'script', '_TOKEN_');
   </script>
   Copy text

3. Add the script to your Blade layout:Open your main layout file, for example:

   resources/views/layouts/app.blade.php
   Copy text

   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
   Copy text

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