Auto-Fix Accessibility Issues

Deploy twik’s accessibility variant to automatically fix site accessibility issues.

// var timeOnIncreaseDifference = 0;
let colorChangeStep = 5;
let enableColorAdjustments = true;

// helper functions

function generateQuerySelector(element) {
  if (element.tagName.toLowerCase() == "html") return "HTML";
  let str = element.tagName;
  str += element.id != "" ? "#" + element.id : "";
  if (element.className) {
    let classes = element.className.split(/\s/);
    for (let i = 0; i  " + str;
}
// ############################################################################################################################
// ############################################################################################################################
// LOW CONTRAST
// ############################################################################################################################
// ############################################################################################################################

function LightenDarkenColor(col, amt) {
  var usePound = false;

if (col[0] == "#") {
    col = col.slice(1);
    usePound = true;
  }

var num = parseInt(col, 16);

var r = (num >> 16) + amt;

if (r > 255) r = 255;
  else if (r > 8) & 0x00ff) + amt;

if (b > 255) b = 255;
  else if (b  255) g = 255;
  else if (g < 0) g = 0;

return (usePound ? "#" : "") + (g | (b << 8) | (r << 16)).toString(16);
}

// uses hex colors (eg "00A000")
function getPerceptualBrightness_hex(color, alpha) {
  if (alpha == 0) {
    return 1530;
  }
  var r = parseInt(color.substring(0, 2), 16);
  var g = parseInt(color.substring(2, 4), 16);
  var b = parseInt(color.substring(4, 6), 16);
  return r * 2 + g * 3 + b;
}

// uses rgb colors

function componentToHex(c) {
  var hex = c.toString(16);
  return hex.length == 1 ? "0" + hex : hex;
}

function rgbToHex(r, g, b) {
  return `${componentToHex(r)}${componentToHex(g)}${componentToHex(b)}`;
}

function hexToRgb(hex) {
  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result
    ? [
        parseInt(result[1], 16),
        parseInt(result[2], 16),
        parseInt(result[3], 16),
      ]
    : null;
}

function increaseDifference(brighterHex, darkerHex, desiredDifference) {
  let new_brighterHex = brighterHex;
  let new_darkerHex = darkerHex;

// making sure the hex is always of length 6
  while (new_brighterHex.length < 6) {
    new_brighterHex = "0" + new_brighterHex;
  }
  while (new_darkerHex.length < 6) {
    new_darkerHex = "0" + new_darkerHex;
  }

//calculating difference

let difference =
    parseInt(getPerceptualBrightness_hex(new_brighterHex)) -
    parseInt(getPerceptualBrightness_hex(new_darkerHex));

// increasing the difference if needed
  while (difference = 1530) {
      desiredDifference = 1530;
    }

if (desiredDifference < 0) {
      desiredDifference = 0;
    }

if (new_brighterHex.toLowerCase() !== "ffffff") {
      new_brighterHex = LightenDarkenColor(new_brighterHex, colorChangeStep);
    }
    if (new_darkerHex !== "000000") {
      new_darkerHex = LightenDarkenColor(new_darkerHex, -colorChangeStep);
    }

// making sure the hex is always of length 6
    while (new_brighterHex.length < 6) {
      new_brighterHex = "0" + new_brighterHex;
    }
    while (new_darkerHex.length  0) {
          elemStyle = window.getComputedStyle(elem, "::placeholder");
          console.log("elem", elem);
          console.log("placeholder color", parseColor(elemStyle["color"]));
        }
      }
      var backgroundElemStyle = window.getComputedStyle(backgroundElem);

// store rgba values into variables
      var [r_text, g_text, b_text, alpha_text] = parseColor(elemStyle["color"]);
      var [
        r_background,
        g_background,
        b_background,
        alpha_background,
      ] = parseColor(backgroundElemStyle["backgroundColor"]);

// if the element's background is transparent - search for nearest non-zero alpha element
      try {
        while (alpha_background == "0") {
          backgroundElem = backgroundElem.parentElement;
          backgroundElemStyle = window.getComputedStyle(backgroundElem);
          [
            r_background,
            g_background,
            b_background,
            alpha_background,
          ] = parseColor(backgroundElemStyle["backgroundColor"]);
        }
      } catch {}

// continue if the text and background color have 0 alpha
      if (parseInt(alpha_background) + parseInt(alpha_text) === 0) {
        continue;
      }

// convert rgb colors to hex
      let backgroundHex = rgbToHex(
        parseInt(r_background),
        parseInt(g_background),
        parseInt(b_background)
      );
      let textHex = rgbToHex(
        parseInt(r_text),
        parseInt(g_text),
        parseInt(b_text)
      );

// measure brightness of colors
      var background_brightness = getPerceptualBrightness_hex(
        backgroundHex,
        alpha_background
      );
      var text_brightness = getPerceptualBrightness_hex(textHex, alpha_text);

// deciding which color was brigher and which darker and brightening the brighter color and darkening the darker color
      if (text_brightness > background_brightness) {
        var [new_text_hex, new_background_hex] = increaseDifference(
          textHex,
          backgroundHex,
          desiredDifference
        );
      } else {
        var [new_background_hex, new_text_hex] = increaseDifference(
          backgroundHex,
          textHex,
          desiredDifference
        );
      }

// making sure hex colors like 10101 are always represented as 010101
      while (new_text_hex.length < 6) {
        var new_text_hex = "0" + new_text_hex;
      }

while (new_background_hex.length  0) {
          // if text color was adjusted but new alpha is 0, make it 1 (fixes issues with ::before and ::after icons)
          if (alpha_text == 0) {
            new_text_rgba = formatRGBA(new_text_rgb_array, "1");
          }
          document.head.insertAdjacentHTML(
            "beforeend",
            `
                    
                        ${generateQuerySelector(
                          elem
                        )}::-webkit-input-placeholder {
                            color: ${new_text_rgba} !important;
                        }
                    
                    `
          );
        }
      } catch {}
      if (backgroundHex !== new_background_hex) {
        if (
          window.getComputedStyle(backgroundElem)["background-color"] ===
          window.getComputedStyle(backgroundElem)["borderColor"]
        ) {
          backgroundElem.style.setProperty(
            "background-color",
            new_background_rgba,
            "important"
          );
          backgroundElem.style.setProperty(
            "border-color",
            new_background_rgba,
            "important"
          );
        } else {
          backgroundElem.style.setProperty(
            "background-color",
            new_background_rgba,
            "important"
          );
        }
      }

// done
    } catch {}
  }

// let end = performance.now();
  // let duration = end - start;
  // console.log("duration", duration);
  console.log("adjusted element");
}

document.head.insertAdjacentHTML(
  "beforeend",
  `

.invisible-placeholder::-webkit-input-placeholder {
        font-size: 0px;
        color: rgba(0,0,0,0);
    }
`
);

function runNonContrastRelatedAdjustments(ancestorElem) {
  try {
    // ############################################################################################################################
    // images having no alt and svg have no title
    // ############################################################################################################################

let images = ancestorElem.querySelectorAll("img");
    for (let image of images) {
      try {
        if (typeof image.alt === "undefined" || image.alt.length === 0) {
          image.alt = "image";
        }
      } catch {}
    }

let svgs = ancestorElem.querySelectorAll("svg");
    for (let svg of svgs) {
      try {
        if (svg.querySelector("title").length === 0) {
          svg.insertAdjacentHTML(
            "afterbegin",
            `
            <title style="font-size:0px !important">svg title</title>
            `
          );
        }
      } catch {}
    }

// ############################################################################################################################
    // broken ARIA menu (An ARIA menu does not contain required menu items.)
    // An element with role="menu" does not contain at least one element with role="menuitem", role="menuitemcheckbox", or role="menuitemradio".
    // ############################################################################################################################
    let roleMenuElements = ancestorElem.querySelectorAll('[role="menu"]');
    if (roleMenuElements.length > 0) {
      for (let menu of roleMenuElements) {
        let menuItems = menu.querySelectorAll(
          '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]'
        );
        if (menuItems.length === 0) {
          menu.insertAdjacentHTML(
            "beforeend",
            `
                <div role="menuitem" style="font-size:0px !important;width: 0px !important;height: 0px !important">
                    menuitem
                </div>
                `
          );
        }
      }
    }

// ############################################################################################################################
    // replacing i tags with em tags
    // ############################################################################################################################
    function cloneAttributes(target, source) {
      [...source.attributes].forEach((attr) => {
        target.setAttribute(attr.nodeName, attr.nodeValue);
      });
    }

let iTags = ancestorElem.querySelectorAll("i");
    for (let i of iTags) {
      if (i.textContent > 0) {
        let new_em_tag = document.createElement("em");
        new_em_tag.innerHTML - i.innerHTML;
        cloneAttributes(new_em_tag, i);

i.parentNode.replaceChild(new_em_tag, i);
      }
    }

// ############################################################################################################################
    // adding placeholders and labels to inputs
    // ############################################################################################################################

let inputs = ancestorElem.querySelectorAll("input, textarea");

function getRandomInt(min, max) {
      min = Math.ceil(min);
      max = Math.floor(max);
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }

for (let input of inputs) {
      try {
        var newLabel = document.createElement("label");
        newLabel.style.setProperty("font-size", "0px", "important");
        newLabel.style.setProperty("color", "rgba(0,0,0,0)", "important");
        newLabel.style.setProperty("width", "0px", "important");
        newLabel.style.setProperty("height", "0px", "important");
        newLabel.style.setProperty("margin", "0px", "important");
        newLabel.style.setProperty("padding", "0px", "important");

let randomTenDigitSequence = (() => {
          let randomTenDigitNumber_array = [];
          for (let i = 0; i  0 && input.placeholder.length > 0) {
          if (typeof input.id === "undefined" || input.id.length === 0) {
            input.id = randomTenDigitSequence;
          }

newLabel.htmlFor = input.id;
          newLabel.innerHTML = input.name;
        }

// if input has name but no placeholder - use name as invisible placeholder and label.htmlFor
        else if (
          (typeof input.placeholder === "undefined" ||
            input.placeholder.length === 0) &&
          input.name.length > 0
        ) {
          if (typeof input.id === "undefined" || input.id.length === 0) {
            input.id = randomTenDigitSequence;
          }

newLabel.htmlFor = input.id;
          input.placeholder = input.name;
          newLabel.innerHTML = input.name;

input.classList.add("invisible-placeholder");
        }

// if input has placeholder but no name - use placeholder as invisible placeholder and label.htmlFor
        else if (
          (typeof input.name === "undefined" || input.name.length === 0) &&
          input.placeholder.length > 0
        ) {
          if (typeof input.id === "undefined" || input.id.length === 0) {
            input.id = randomTenDigitSequence;
          }
          newLabel.htmlFor = input.id;

input.name = input.placeholder;
          newLabel.innerHTML = input.name;
        }

if (typeof input.title === "undefined" || input.title.length === 0) {
          try {
            input.title = "input title";
          } catch {}
        }

// label cannot be inside of another label element
        var inputParent = input;
        while (inputParent) {
          inputParent = inputParent.ancestorElement;
          if (inputParent.tagName.toLowerCase() === "label") {
            break;
          } else if (inputParent.tagName.toLowerCase() === "html") {
            input.ancestorElement.insertBefore(newLabel, input);
            break;
          }
        }
      } catch {}
    }

// ############################################################################################################################
    // forms having no labels
    // form labels being hidden
    // labels having no textContent
    // ############################################################################################################################

if (
      typeof document.documentElement.lang === "undefined" ||
      document.documentElement.lang.length === 0 ||
      (typeof document.documentElement.lang === "undefined" &&
        document.documentElement.lang.length === 0)
    ) {
      document.documentElement.lang = "en-US";
    }

// ############################################################################################################################
    // dealing with missing title
    // ############################################################################################################################

if (typeof document.title === "undefined" || document.title.length === 0) {
      document.title = "Website title";
    }

// ############################################################################################################################
    // empty table header
    // ############################################################################################################################

let tableHeaders = ancestorElem.querySelectorAll("th");
    for (let header of tableHeaders) {
      let spacelessString = header.textContent.replace(/\s/g, "");
      if (spacelessString.length === 0) {
        header.style.fontSize = "0px";
        header.style.color = "transparent";
        header.insertAdjacentHTML(
          "beforeend",
          `<span>empty header</span>`
        );
      }
    }

// ############################################################################################################################
    // ensuring iframes have titles
    // ############################################################################################################################
    let iframes = ancestorElem.querySelectorAll("iframe");
    for (let iframe of iframes) {
      try {
        if (typeof iframe.title === "undefined" || iframe.title.length === 0) {
          iframe.title = "iframe title";
        }
      } catch {}
    }

// ############################################################################################################################
    // empty button (no value)
    // ############################################################################################################################

let buttons = ancestorElem.querySelectorAll("button");
    for (let button of buttons) {
      let spacelessString = button.textContent.replace(/\s/g, "");
      if (spacelessString.length === 0) {
        button.style.color = "transparent";
        button.insertAdjacentHTML(
          "beforeend",
          `<span>empty button</span>`
        );
      }
    }

// ############################################################################################################################
    // link contains no text (<a></a> - no text between tags)
    // ############################################################################################################################

let elements = document.body.querySelectorAll("*");
runNonContrastRelatedAdjustments(document);

if (enableColorAdjustments) {
  adjustContrast(1200, elements);
  let observer = new MutationObserver((e) => {
    // insertedNodes.push(e.target);
    runNonContrastRelatedAdjustments(e.target);
    adjustContrast(1200, [e.target]);
    // console.log("adjusted new element");
  });
  observer.observe(document, { childList: true, subtree: true });
}

// Broken ARIA reference - aria is linked to a hidden item

Overview

Deploy twik’s accessibility variant to automatically fix site accessibility issues. The variant will add blank alt tags where missing, labels to forms, low contrast issues, links with no text, language specifications and more.