WCAG20_GTM - Accessibility Helper Tag for Google Tag Manager

README.md

WCAG20_GTM

Accessibility Helper Tag for Google Tag Manager

Audits current webpage accessibility using ACE and pushes results to dataLayer.

Usage

Add a new custom HTML tag and paste code. Fire on every page load or use any condition to take only a sample.

Example dataLayer push

dataLayer.push({
  event: "aceCheckResults",
  aceResults: {
    count: 3,
    summary: "aria_content_in_landmark: <ul id=\"skiplinks\"> | aria_navigation_label_unique: <na" +
             "v class=\"clearfix\" id=\"navback\"> | aria_navigation_label_unique: <nav class=\"f" +
             "cnt fcntn\" id=\"lftr\">",
    source: "FRESH",
    settings: {resultTypes: ["FAIL"], rules: ["VIOLATION"]},
    details: [
      {
        ruleId: "aria_content_in_landmark",
        value: ["VIOLATION", "FAIL"],
        node: "HTMLUListElement: html.no-js > body > ul#skiplinks",
        path: {dom: "/html[1]/body[1]/ul[1]", aria: "/document[1]/list[1]"},
        ruleTime: 0,
        reasonId: "Fail_1",
        message: "Content is not within a landmark element",
        messageArgs: [],
        apiArgs: [],
        bounds: {left: -2971, top: 0, height: 49, width: 189},
        snippet: "<ul id=\"skiplinks\">",
        category: "Accessibility"
      },
      {
        ruleId: "aria_navigation_label_unique",
        value: ["VIOLATION", "FAIL"],
        node: "HTMLElement: html.no-js > body > nav.clearfix#navback",
        path: {dom: "/html[1]/body[1]/nav[1]", aria: "/document[1]/navigation[1]"},
        ruleTime: 1,
        reasonId: "Fail_1",
        message: "Multiple elements with \"navigation\" role do not have unique labels",
        messageArgs: [""],
        apiArgs: [],
        bounds: {left: 0, top: 120, height: 43, width: 801},
        snippet: "<nav class=\"clearfix\" id=\"navback\">",
        category: "Accessibility"
      },
      {
        ruleId: "aria_navigation_label_unique",
        value: ["VIOLATION", "FAIL"],
        node: "HTMLElement: html.no-js > body > footer.clearfix#footer > div.ctframe.clearfix > n" +
              "av.fcnt.fcntn#lftr",
        path: {
          dom: "/html[1]/body[1]/footer[1]/div[1]/nav[1]",
          aria: "/document[1]/contentinfo[1]/navigation[1]"
        },
        ruleTime: 0,
        reasonId: "Fail_1",
        message: "Multiple elements with \"navigation\" role do not have unique labels",
        messageArgs: [""],
        apiArgs: [],
        bounds: {left: 15, top: 2485, height: 206, width: 771},
        snippet: "<nav class=\"fcnt fcntn\" id=\"lftr\">",
        category: "Accessibility"
      }
    ]
  },
  gtm.uniqueEventId: 8
})

WCAG20_GTM.tag.html

<script>
  /**
 * @name WCAG20_GTM (Accessibility Helper Tag for Google Tag Manager)
 * @description audits accessibility using ACE and pushes results to dataLayer
 * @version 1.0.1
 * @author Markus Baersch
 * @see {@link https://www.npmjs.com/package/accessibility-checker-engine|documentation}
 */

  (function(){

    //SETUP
    var config = {
      eventName: "aceCheckResults",
      //rules can be VIOLATION, RECOMMENDATION, INFORMATION
      listRules: ["VIOLATION"],
      //possible results: PASS, FAIL, POTENTIAL, MANUAL
      listResultTypes: ["FAIL"],
      //most tracking codes will create unaccessible iFrames...
      ignoreIframes: true,
      logToConsole: true,
      pushToDataLayer: true
    };

    var handleResults = function(rs, type) {
      if (!type) type = "current";
      if (config.logToConsole) 
        console.log(type + " ACE results ("+rs.length+")", rs);
      if (config.pushToDataLayer) {
        var rsMapped = rs.map(function(item){
          return item.ruleId + ": " + item.snippet;
        }).join(" | ");
        window.dataLayer = window.dataLayer||[];
        window.dataLayer.push({
          event: config.eventName || "aceCheckResults",
          aceResults: {
            count: rs.length,
            summary: rsMapped,
            source: type,
            settings: {resultTypes: config.listResultTypes, rules: config.listRules},
            details: rs
          } 
        });
      }
    }

    function createReport() {
      try {
        var intervalId = setInterval(function(){
          if (typeof ace !== 'undefined') {  
            clearInterval(intervalId);
            var checker = new ace.Checker();  
            checker.check(document, ["IBM_Accessibility"])
              .then(function(report) {
              var accResults = report.results.filter(function(item) {
                var lst = config.listRules.indexOf(item.value[0]) >= 0 && 
                    config.listResultTypes.indexOf(item.value[1]) >= 0;
                if (lst && (config.ignoreIframes === true) && item.path) 
                  lst = item.path.dom.indexOf("/iframe") < 0;
                return lst;
              });
              window._aceCheckResults = accResults;
              handleResults(window._aceCheckResults);
            });      
          }
        }, 500);  
      } catch (error) {
        console.error("Error loading script:", error);
      }
    }

    if (window._aceCheckResults) handleResults(window._aceCheckResults, "cached"); else {
      var scr = document.createElement('script'); 
      scr.src = 'https://unpkg.com/accessibility-checker-engine@latest/ace.js'; 
      scr.onload = createReport();
      document.body.appendChild(scr);  
    }   

  })();

</script>

example in preview