print

Activating TRUENDO's WCAG 2.1 Level AAA Compliance

Introduction#

Ensuring that your website is accessible to all users is not only a legal requirement in many jurisdictions but also an essential aspect of good user experience. The Web Content Accessibility Guidelines (WCAG) 2.1 Level AAA represent the highest standard of web accessibility. By activating TRUENDO's accessibility mode, you can enhance your website's compliance with these guidelines.

This guide provides step-by-step instructions on how to activate TRUENDO's WCAG 2.1 Level AAA compliance features and customize the selected button color for better visibility.

1. Prerequisites#

Before you begin, ensure you have:

  • Access to Your Website's Code: Ability to modify HTML and JavaScript files where the TRUENDO script is implemented.
  • TRUENDO CMP Integrated: The TRUENDO Consent Management Platform (CMP) script should already be implemented on your website.
  • Your TRUENDO Site ID: This can be found in your TRUENDO Console under Integration in the Integrate to Website tab.

2. Activating Accessibility Mode#

To activate TRUENDO's accessibility mode, you need to add specific attributes to the TRUENDO script tag on your website.

A. Adding Required Attributes

Add the following two attributes to your TRUENDO script tag:

  1. data-accessibility="true"
  2. data-transparency="false"

These attributes enable the accessibility features and adjust the transparency settings to meet WCAG Level AAA requirements.

B. Final Script Example

Below is how your TRUENDO script should look after adding the attributes:

<!-- TRUENDO Privacy Center -->
<script
    data-accessibility="true"
    data-transparency="false"
    async
    id="truendoPrivacyPanel"
    type="text/javascript"
    src="https://cdn.priv.center/pc/app.pid.js"
    data-siteid="YOUR_SITE_ID"
></script>
<!-- End TRUENDO Privacy Center -->
  • Replace YOUR_SITE_ID with your actual Site ID provided by TRUENDO.

3. Customizing Selected Button Border Color#

When accessibility mode is enabled, a border appears around selected options to improve visibility. You can customize this border color to match your website's theme or enhance contrast.

A. Choosing a Color

Select a hexadecimal color code that you wish to use for the border. Hex codes are six-digit combinations of numbers and letters prefixed with a #.

Examples:

  • #ff0303 for Red
  • #ffbb00 for Orange
  • #00ffee for Light Blue

You can use Google's built-in hexadecimal color picker to choose a color: Google Hex Color Picker

B. Updating the Script

Add the data-accessibility-border-color attribute to your TRUENDO script with your chosen hex code.

Example:

<!-- TRUENDO Privacy Center -->
<script
    data-accessibility="true"
    data-transparency="false"
    data-accessibility-border-color="#ffbb00"
    id="truendoPrivacyPanel"
    type="text/javascript"
    src="https://cdn.priv.center/pc/app.pid.js"
    data-siteid="YOUR_SITE_ID"
></script>
<!-- End TRUENDO Privacy Center -->
  • Replace #ffbb00 with your selected hex color code.
  • Replace YOUR_SITE_ID with your actual Site ID.

4. Important Notes#

  • Site ID Replacement: Ensure that you replace YOUR_SITE_ID with your actual Site ID. You can find this in your TRUENDO Console under Integration in the Integrate to Website tab.

  • SEO Consideration:

    SEO Note: WCAG Level AAA compliance requires an <h1> tag in the privacy center. According to Google Webmasters, this does not negatively impact your SEO. For more information, you can watch this Google Webmasters Video.

5. Conclusion#

Activating TRUENDO's WCAG 2.1 Level AAA compliance features is a straightforward process that enhances the accessibility of your website. By adding the required attributes to your TRUENDO script, you ensure that your consent management platform is accessible to all users, including those with disabilities. Customizing the selected button border color further improves usability by making navigation clearer and more intuitive.

6. Support and Resources#

End of Guide

If you have any further questions or require assistance with specific configurations, please don't hesitate to reach out to TRUENDO Support or consult the resources provided.

×