Add fully compliant accessibility to your site using AccessiBe & Tealium
If you run a website chances are that you've heard about accessibility. Giving users the ability to easily navigate your website using just a keyboard or screen reader is not only extremely beneficial to those users but also in many parts of the world now a legal requirement.
You can easily add the AccessiBe code to your website by following their integration guide but for this post I'm going to focus on how to add AccessiBe using Tealium.
To add a custom container in Tealium, click on Tags and then Add Tag. Search the marketplace for Custom Container and add it.
A new modal will appear. Simply give the container a meaningful name: 'AccessiBe Container' and click Finish.
Once the tag has been created, find the tag in your list and click to expand it open. Click on Edit in the top right corner of Tag Configuration section. The tag modal will appear. Scroll down until you see Advanced Settings and expand it. Scroll down some more and click on Edit Templates, choosing to edit the Version.
Save your template changes and Save and Publish your new tag as you normally would in Tealium.
The final step is for you to output a line of HTML where the AccessiBe content will be injected into from the script you've saved. You can do this a number of ways, either through Tealium using a Content Modification Extension or by simply adding it to your html page manually. The code you need to place is:
<span data-acsb="trigger" role="button" aria-label="Open accessibility interface" class="acsb-ready">Accessibility</span>
Using a Content Modification Extension, your setup would look something like this:
Now that everything is in place, head over to your website and once your page loads press the tab key to see if accessiBe initializes for you. If it all worked well you should see their accessibility menu pop up for you.