Accessibility Tool

Free & Customizable Accessibility Tool to embed on your Website

Improve your website’s usability for all visitors with this free Accessibility Tool. It's a lightweight, customizable widget that empowers users to adjust font sizes, spacing, contrast, alignment, and more in real time. Designed for ADA compliance and enhanced user experience, this tool ensures your site is accessible on all devices and browsers, including mobile and desktop. From muting media to highlighting titles and reading page content aloud, it’s the perfect solution for businesses looking to create inclusive, user-friendly websites without sacrificing design.

Our Stance On WEBSITE ACCESSIBILITY

<style>
  /* load FA for icons */
  @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

:root {
    --acc-accent:     #829169;    /* Accent color */
    --acc-bg:         #ffffff;    /* Panel background */
    --acc-text:       #000000;    /* Panel text */
    --acc-font-step:  0.1;        /* 10% per click */
    --acc-font-read:  'Arial', sans-serif; /* Readable font */
  }

/* Trigger button */
  #acc-btn {
    position: fixed !important;
    bottom: 12px !important;
    left: 12px !important;
    width: 48px !important;
    height: 48px !important;
    background: var(--acc-accent) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 3px 8px rgba(0,0,0,0.15) !important;
    transition: transform .2s !important;
    z-index: 10000 !important;
    font-size: 24px !important;
    line-height: normal !important;
    transform: none !important;
  }
  #acc-btn:hover { transform: scale(1.05) !important; }
  #acc-btn:focus { outline: 3px solid #fff !important; }
  /* Icon stays fixed size */
  #acc-btn i {
    font-size: 24px !important;
    line-height: 1 !important;
  }

/* Panel */
  #acc-panel {
    position: fixed; bottom: 5.5em; left: 0.75em;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .4em; padding: .75em;
    background: var(--acc-bg); color: var(--acc-text);
    border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,0.1);
    font-family: "Segoe UI", sans-serif;
    min-width: 14em; max-width: calc(100vw - 1.5em);
    max-height: calc(100vh - 6em); overflow-y: auto;
    font-size: 0.9rem;
    visibility: hidden; opacity: 0; transform: translateY(8px);
    transition: opacity .2s, transform .2s, visibility .2s;
    z-index: 10000;
  }
  #acc-panel.visible {
    visibility: visible; opacity: 1; transform: translateY(0);
  }
  #acc-panel button.full,
  #acc-panel .section-title {
    grid-column: 1 / -1;
  }

/* Lock panel's own text styles */
  #acc-panel,
  #acc-panel * {
    font-size: 0.9rem !important;
    line-height: normal !important;
    letter-spacing: normal !important;
    text-align: initial !important;
    transform: none !important;
  }

/* Section Containers */
  .section-container {
    grid-column: 1 / -1;
    background: #f7f7f7;
    padding: .5em;
    border-radius: 7px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .4em;
  }

/* Section Titles */
  #acc-panel .section-title {
    font-weight: bold;
    margin-bottom: .4em;
    font-size: 0.95em;
    color: var(--acc-accent);
    grid-column: 1 / -1;
  }

/* Header & Footer */
  #acc-panel .acc-title {
    grid-column: 1 / -1;
    text-align: center;
    font-weight: bold;
    margin-bottom: .4em;
  }
  #acc-panel .acc-footer {
    grid-column: 1 / -1;
    text-align: center;
    font-size: 0.7em;
    opacity: 0.7;
    margin-top: .4em;
  }

/* Buttons */
  #acc-panel button {
    background: none; border: 2px solid var(--acc-accent);
    color: var(--acc-accent); border-radius: 7px;
    padding: .4em; font-size: .85em; cursor: pointer;
    transition: background .2s, color .2s; text-align: center;
    width: 100%;
  }
  #acc-panel button:hover {
    background: var(--acc-accent); color: #fff;
  }
  #acc-panel button:focus {
    outline: 3px solid var(--acc-accent);
  }
  #acc-panel button.active {
    background: var(--acc-accent); color: #fff;
  }

/* Text control */
  #acc-text-control,
  #acc-line-height-control,
  #acc-letter-spacing-control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .4em .6em;
    border: 2px solid var(--acc-accent);
    border-radius: 7px;
    font-size: .85em;
  }
  #acc-text-control span,
  #acc-line-height-control span,
  #acc-letter-spacing-control span {
    font-weight: bold; font-size: 1em; user-select: none;
  }

/* Alignment icons next to letter spacing */
  #acc-align-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .3em;
    align-items: center;
  }
  #acc-align-buttons button {
    background: none; border: 2px solid var(--acc-accent);
    color: var(--acc-accent); border-radius: 7px;
    padding: .25em; cursor: pointer; text-align: center;
    transition: background .2s, color .2s;
    font-size: .9em !important;
    line-height: 1 !important;
  }
  #acc-align-buttons button:hover {
    background: var(--acc-accent); color: #fff;
  }
  #acc-align-buttons button.active {
    background: var(--acc-accent); color: #fff;
  }

/* Highlight styles */
  .acc-highlight-titles h1,
  .acc-highlight-titles h2,
  .acc-highlight-titles h3,
  .acc-highlight-titles h4,
  .acc-highlight-titles h5,
  .acc-highlight-titles h6 {
    background: yellow;
  }
  .acc-highlight-links a {
    background: yellow;
  }

/* States */
  .reduce-motion *, .reduce-motion *::before, .reduce-motion *::after {
    animation-duration: 0s !important;
    transition-duration: 0s !important;
  }
  body.high-contrast > *:not(#acc-panel):not(#acc-btn) {
    filter: contrast(150%) brightness(120%) !important;
  }
  body.bw > *:not(#acc-panel):not(#acc-btn) {
    filter: grayscale(100%) brightness(90%) !important;
  }
  /* Hide images only in content, not panel/button */
  body.hide-img > :not(#acc-panel):not(#acc-btn) img,
  body.hide-img > :not(#acc-panel):not(#acc-btn) * img {
    display: none !important;
  }
  /* Readable font only in content, not panel/button */
  body.readable-font > :not(#acc-panel):not(#acc-btn),
  body.readable-font > :not(#acc-panel):not(#acc-btn) * {
    font-family: var(--acc-font-read) !important;
  }
</style>

<div id="acc-panel" role="region" aria-label="Accessibility controls">
  <div class="acc-title">Accessibility Tool</div>

<div class="section-container">
    <div class="section-title">Text Adjustments</div>

<button id="acc-reset-text" class="full">Reset Text</button>

<button id="acc-text-control">
      <span id="acc-decrease-icon">−</span> Text <span id="acc-increase-icon">+</span>
    </button>
    <div id="acc-align-buttons">
      <button id="acc-align-left" aria-label="Align Left">
        <i class="fas fa-align-left"></i>
      </button>
      <button id="acc-align-center" aria-label="Align Center">
        <i class="fas fa-align-center"></i>
      </button>
      <button id="acc-align-right" aria-label="Align Right">
        <i class="fas fa-align-right"></i>
      </button>
      <button id="acc-align-reset" aria-label="Reset Align">
        <i class="fas fa-times"></i>
      </button>
    </div>

<button id="acc-letter-spacing-control">
      <span id="acc-decrease-letter">−</span> Letter Spacing <span id="acc-increase-letter">+</span>
    </button>
    <button id="acc-line-height-control">
      <span id="acc-decrease-line">−</span> Line Height <span id="acc-increase-line">+</span>
    </button>

<button id="acc-highlight-titles">Highlight Titles</button>
    <button id="acc-highlight-links">Highlight Links</button>
  </div>

<div class="section-container">
    <div class="section-title">Media Adjustments</div>
    <button id="acc-motion">Motion</button>
    <button id="acc-contrast">Contrast</button>
    <button id="acc-bw">B&W</button>
    <button id="acc-font">Readable Font</button>
    <button id="acc-hide-img">Hide Images</button>
    <button id="acc-mute">Mute</button>
  </div>

<div class="section-container">
    <div class="section-title">General</div>
    <button id="acc-reset-all">Reset All</button>
    <button id="acc-read">Read Page</button>
  </div>

<div class="acc-footer">
    Built with love by
    <a href="https://www.apeforge.com"
       target="_blank" rel="noopener"
       style="color: var(--acc-accent); text-decoration: none;">
      Ape Forge
    </a>
  </div>
</div>

var pausedV = [], pausedG = [];

// Apply only if user had previously changed something
  function applyToContent(fn) {
    var nodes = document.querySelectorAll('body > :not(#acc-panel):not(#acc-btn)');
    for (var i = 0; i < nodes.length; i++) {
      var el = nodes[i];
      fn(el);
      var descendants = el.querySelectorAll('*');
      for (var j = 0; j < descendants.length; j++) {
        fn(descendants[j]);
      }
    }
  }

// Check saved settings existence
  var hasScale   = localStorage.getItem('acc_scale') !== null;
  var hasLineHt  = localStorage.getItem('acc_lineHeight') !== null;
  var hasLetter  = localStorage.getItem('acc_letterSpacing') !== null;
  var hasAlign   = localStorage.getItem('acc_align') !== null;
  var titlesSaved= localStorage.getItem('acc_titlesHighlighted') === 'true';
  var linksSaved = localStorage.getItem('acc_linksHighlighted') === 'true';
  var motionSaved= localStorage.getItem('acc_reduceMotion') === 'true';
  var hcSaved    = localStorage.getItem('acc_highContrast') === 'true';
  var bwSaved    = localStorage.getItem('acc_bw') === 'true';
  var rfSaved    = localStorage.getItem('acc_readableFont') === 'true';
  var hiSaved    = localStorage.getItem('acc_hideImg') === 'true';
  var mutedSaved = localStorage.getItem('acc_muted') === 'true';

// Load saved values or defaults
  var scale        = hasScale   ? parseFloat(localStorage.getItem('acc_scale')) : 1;
  var lineHeight   = hasLineHt  ? parseFloat(localStorage.getItem('acc_lineHeight')) : 1.5;
  var letterSpacing= hasLetter  ? parseFloat(localStorage.getItem('acc_letterSpacing')) : 0;
  var currentAlign = hasAlign   ? localStorage.getItem('acc_align') : null;
  var titlesHighlighted = titlesSaved;
  var linksHighlighted  = linksSaved;

// Apply only if saved
  if (hasScale) {
    applyToContent(function(el) {
      el.style.fontSize = (scale * 100) + '%';
    });
  }
  if (hasLineHt) {
    applyToContent(function(el) {
      el.style.lineHeight = lineHeight.toFixed(1);
    });
  }
  if (hasLetter) {
    applyToContent(function(el) {
      el.style.letterSpacing = letterSpacing + 'px';
    });
  }
  if (hasAlign) {
    applyToContent(function(el) {
      el.style.textAlign = currentAlign;
    });
    setActiveAlign(currentAlign);
  }
  if (titlesSaved) {
    applyToContent(function(el) {
      el.classList.add('acc-highlight-titles');
    });
    document.getElementById('acc-highlight-titles').classList.add('active');
  }
  if (linksSaved) {
    applyToContent(function(el) {
      el.classList.add('acc-highlight-links');
    });
    document.getElementById('acc-highlight-links').classList.add('active');
  }
  if (motionSaved) {
    root.classList.add('reduce-motion');
    document.getElementById('acc-motion').classList.add('active');
    var vids = document.querySelectorAll('video');
    for (var v = 0; v < vids.length; v++) { vids[v].pause(); }
    var imgs = document.querySelectorAll('img');
    for (var i = 0; i < imgs.length; i++) {
      var img = imgs[i];
      if (/\.gif(\?.*)?$/i.test(img.src)) {
        var c = document.createElement('canvas');
        c.width = img.width; c.height = img.height;
        c.style.cssText = img.style.cssText;
        c.getContext('2d').drawImage(img, 0, 0);
        img.style.display = 'none';
        img.parentNode.insertBefore(c, img);
        pausedG.push({ img: img, canvas: c });
      }
    }
  }
  if (hcSaved) {
    body.classList.add('high-contrast');
    document.getElementById('acc-contrast').classList.add('active');
  }
  if (bwSaved) {
    body.classList.add('bw');
    document.getElementById('acc-bw').classList.add('active');
  }
  if (rfSaved) {
    body.classList.add('readable-font');
    document.getElementById('acc-font').classList.add('active');
  }
  if (hiSaved) {
    body.classList.add('hide-img');
    document.getElementById('acc-hide-img').classList.add('active');
  }
  if (mutedSaved) {
    document.getElementById('acc-mute').classList.add('active');
    applyMute(true);
  }

// PANEL TOGGLE
  btn.addEventListener('click', function() {
    panel.classList.toggle('visible');
    var expanded = panel.classList.contains('visible');
    btn.setAttribute('aria-expanded', expanded);
  });
  btn.addEventListener('keydown', function(e) {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      panel.classList.toggle('visible');
      var expanded = panel.classList.contains('visible');
      btn.setAttribute('aria-expanded', expanded);
    }
  });

// TEXT ADJUSTMENT CONTROLS

// Align text buttons
  var alignButtons = {
    left: document.getElementById('acc-align-left'),
    center: document.getElementById('acc-align-center'),
    right: document.getElementById('acc-align-right'),
    reset: document.getElementById('acc-align-reset')
  };
  alignButtons.left.addEventListener('click', function() {
    currentAlign = 'left';
    applyToContent(function(el) {
      el.style.textAlign = 'left';
    });
    setActiveAlign('left');
    localStorage.setItem('acc_align', 'left');
    hasAlign = true;
  });
  alignButtons.center.addEventListener('click', function() {
    currentAlign = 'center';
    applyToContent(function(el) {
      el.style.textAlign = 'center';
    });
    setActiveAlign('center');
    localStorage.setItem('acc_align', 'center');
    hasAlign = true;
  });
  alignButtons.right.addEventListener('click', function() {
    currentAlign = 'right';
    applyToContent(function(el) {
      el.style.textAlign = 'right';
    });
    setActiveAlign('right');
    localStorage.setItem('acc_align', 'right');
    hasAlign = true;
  });
  alignButtons.reset.addEventListener('click', function() {
    currentAlign = null;
    applyToContent(function(el) {
      el.style.textAlign = '';
    });
    setActiveAlign(null);
    localStorage.removeItem('acc_align');
    hasAlign = false;
  });
  function setActiveAlign(value) {
    var positions = ['left','center','right'];
    for (var i = 0; i < positions.length; i++) {
      var pos = positions[i];
      alignButtons[pos].classList.toggle('active', pos === value);
    }
    alignButtons.reset.classList.toggle('active', value === null);
  }

// Highlight Titles
  document.getElementById('acc-highlight-titles').addEventListener('click', function() {
    titlesHighlighted = !titlesHighlighted;
    applyToContent(function(el) {
      if (titlesHighlighted) el.classList.add('acc-highlight-titles');
      else el.classList.remove('acc-highlight-titles');
    });
    this.classList.toggle('active', titlesHighlighted);
    localStorage.setItem('acc_titlesHighlighted', titlesHighlighted);
  });

// Highlight Links
  document.getElementById('acc-highlight-links').addEventListener('click', function() {
    linksHighlighted = !linksHighlighted;
    applyToContent(function(el) {
      if (linksHighlighted) el.classList.add('acc-highlight-links');
      else el.classList.remove('acc-highlight-links');
    });
    this.classList.toggle('active', linksHighlighted);
    localStorage.setItem('acc_linksHighlighted', linksHighlighted);
  });

// Reset Text only
  document.getElementById('acc-reset-text').addEventListener('click', function() {
    // Always clear, regardless of previous flags
    scale = 1;
    applyToContent(function(el) { el.style.fontSize = ''; });
    localStorage.removeItem('acc_scale');
    hasScale = false;

lineHeight = 1.5;
    applyToContent(function(el) { el.style.lineHeight = ''; });
    localStorage.removeItem('acc_lineHeight');
    hasLineHt = false;

letterSpacing = 0;
    applyToContent(function(el) { el.style.letterSpacing = ''; });
    localStorage.removeItem('acc_letterSpacing');
    hasLetter = false;

currentAlign = null;
    applyToContent(function(el) { el.style.textAlign = ''; });
    setActiveAlign(null);
    localStorage.removeItem('acc_align');
    hasAlign = false;

if (titlesHighlighted) {
      titlesHighlighted = false;
      applyToContent(function(el) { el.classList.remove('acc-highlight-titles'); });
      document.getElementById('acc-highlight-titles').classList.remove('active');
      localStorage.removeItem('acc_titlesHighlighted');
    }
    if (linksHighlighted) {
      linksHighlighted = false;
      applyToContent(function(el) { el.classList.remove('acc-highlight-links'); });
      document.getElementById('acc-highlight-links').classList.remove('active');
      localStorage.removeItem('acc_linksHighlighted');
    }
  });

// MEDIA ADJUSTMENT CONTROLS

// Motion toggle
  var motionBtn = document.getElementById('acc-motion');
  motionBtn.addEventListener('click', function() {
    var on = root.classList.toggle('reduce-motion');
    motionBtn.classList.toggle('active', on);
    if (on) localStorage.setItem('acc_reduceMotion', true);
    else localStorage.removeItem('acc_reduceMotion');

if (on) {
      applyToContent(function(el) {
        if (el.tagName === 'IMG' && /\.gif(\?.*)?$/i.test(el.src)) {
          var c = document.createElement('canvas');
          c.width = el.width; c.height = el.height;
          c.style.cssText = el.style.cssText;
          c.getContext('2d').drawImage(el, 0, 0);
          el.style.display = 'none';
          el.parentNode.insertBefore(c, el);
          pausedG.push({ img: el, canvas: c });
        }
      });
    } else {
      for (var k = 0; k < pausedG.length; k++) {
        pausedG[k].canvas.remove();
        pausedG[k].img.style.display = '';
      }
      pausedG = [];
    }
  });

// Contrast, B&W, Readable Font, Hide Images toggles
  var togglesList = [
    {id:'acc-contrast', cls:'high-contrast', key:'acc_highContrast'},
    {id:'acc-bw',       cls:'bw',           key:'acc_bw'},
    {id:'acc-font',     cls:'readable-font',key:'acc_readableFont'},
    {id:'acc-hide-img', cls:'hide-img',     key:'acc_hideImg'}
  ];
  for (var t = 0; t < togglesList.length; t++) {
    (function(t) {
      var b = document.getElementById(togglesList[t].id);
      b.addEventListener('click', function() {
        var on = body.classList.toggle(togglesList[t].cls);
        b.classList.toggle('active', on);
        if (on) localStorage.setItem(togglesList[t].key, true);
        else localStorage.removeItem(togglesList[t].key);
      });
    })(t);
  }

// Mute toggle
  function applyMute(on) {
    var mediaEls = document.querySelectorAll('video,audio');
    for (var i = 0; i < mediaEls.length; i++) {
      mediaEls[i].muted = on;
      if (on) mediaEls[i].volume = 0;
    }
    var iframes = document.querySelectorAll('iframe');
    for (var j = 0; j < iframes.length; j++) {
      var iframe = iframes[j];
      var src = iframe.src || '';
      if (/youtube\.com\/embed|youtube\.com\/watch/.test(src)) {
        var newSrc = src;
        if (!/[?&]enablejsapi=1/.test(newSrc)) {
          if (newSrc.indexOf('?') !== -1) newSrc += '&enablejsapi=1';
          else newSrc += '?enablejsapi=1';
          iframe.src = newSrc;
        }
        try {
          var cmd = on ? 'mute' : 'unMute';
          iframe.contentWindow.postMessage(
            JSON.stringify({ event: 'command', func: cmd, args: [] }),
            '*'
          );
        } catch (e) {}
      }
    }
  }
  document.getElementById('acc-mute').addEventListener('click', function() {
    isMuted = !isMuted;
    this.classList.toggle('active', isMuted);
    applyMute(isMuted);
    if (isMuted) localStorage.setItem('acc_muted', true);
    else localStorage.removeItem('acc_muted');
  });

// Read aloud (content only, excluding panel/button)
  var speaking = false;
  var readBtn = document.getElementById('acc-read');
  readBtn.addEventListener('click', function() {
    if (!speaking) {
      var contentText = '';
      var contentNodes = document.querySelectorAll('body > :not(#acc-panel):not(#acc-btn)');
      for (var i = 0; i < contentNodes.length; i++) {
        contentText += contentNodes[i].innerText + '\n';
      }
      var utter = new SpeechSynthesisUtterance(contentText);
      utter.onend = function() {
        speaking = false;
        readBtn.textContent = 'Read Page';
      };
      synth.speak(utter);
      speaking = true;
      readBtn.textContent = 'Stop Reading';
    } else {
      synth.cancel();
      speaking = false;
      readBtn.textContent = 'Read Page';
    }
  });

// Reset All
  document.getElementById('acc-reset-all').addEventListener('click', function() {
    if (hasScale) {
      scale = 1; applyToContent(function(el) { el.style.fontSize = ''; });
      localStorage.removeItem('acc_scale'); hasScale = false;
    }
    if (hasLineHt) {
      lineHeight = 1.5; applyToContent(function(el) { el.style.lineHeight = ''; });
      localStorage.removeItem('acc_lineHeight'); hasLineHt = false;
    }
    if (hasLetter) {
      letterSpacing = 0; applyToContent(function(el) { el.style.letterSpacing = ''; });
      localStorage.removeItem('acc_letterSpacing'); hasLetter = false;
    }
    if (hasAlign) {
      currentAlign = null; applyToContent(function(el) { el.style.textAlign = ''; });
      setActiveAlign(null); localStorage.removeItem('acc_align'); hasAlign = false;
    }
    var alignBtns = ['acc-align-left','acc-align-center','acc-align-right','acc-align-reset'];
    for (var a = 0; a < alignBtns.length; a++) {
      document.getElementById(alignBtns[a]).classList.remove('active');
    }
    if (titlesHighlighted) {
      titlesHighlighted = false;
      applyToContent(function(el) { el.classList.remove('acc-highlight-titles'); });
      document.getElementById('acc-highlight-titles').classList.remove('active');
      localStorage.removeItem('acc_titlesHighlighted');
    }
    if (linksHighlighted) {
      linksHighlighted = false;
      applyToContent(function(el) { el.classList.remove('acc-highlight-links'); });
      document.getElementById('acc-highlight-links').classList.remove('active');
      localStorage.removeItem('acc_linksHighlighted');
    }

if (root.classList.contains('reduce-motion')) {
      root.classList.remove('reduce-motion');
      document.getElementById('acc-motion').classList.remove('active');
      localStorage.removeItem('acc_reduceMotion');
      var vids2 = document.querySelectorAll('video');
      for (var v2 = 0; v2 < vids2.length; v2++) { vids2[v2].play(); }
      for (var k = 0; k < pausedG.length; k++) {
        pausedG[k].canvas.remove();
        pausedG[k].img.style.display = '';
      }
      pausedG = [];
    }

for (var t = 0; t < togglesList.length; t++) {
      var bttn = document.getElementById(togglesList[t].id);
      if (body.classList.contains(togglesList[t].cls)) body.classList.remove(togglesList[t].cls);
      bttn.classList.remove('active');
      localStorage.removeItem(togglesList[t].key);
    }

if (mutedSaved) {
      isMuted = false;
      document.getElementById('acc-mute').classList.remove('active');
      applyMute(false);
      localStorage.removeItem('acc_muted');
      mutedSaved = false;
    }

synth.cancel();
    speaking = false;
    readBtn.textContent = 'Read Page';

// Ensure trigger button remains fixed size without scaling
    btn.style.width = '48px';
    btn.style.height = '48px';
    btn.style.transform = 'none';
  });
});
</script>

Builder

Accent Color: Panel Background: Text Color:

Preview

Generated Code

Step-By-Step Installation

To make sure the Accessibility Tool appears on every page of your site, you’ll want to place the code in a global area, such as the footer or a site-wide embed block. Here’s how:

Step-by-Step Installation:

Copy the Full Code
Get the complete Accessibility Tool code (HTML, CSS, and JavaScript) from our generator or documentation.
Open Your Website Builder
Log into your website platform (like Squarespace, Weebly, WordPress, Wix, Webflow, etc.).
Find the Global Footer or Code Injection Area
Look for an option like:
- “Footer Code”
- “Site-Wide Embed”
- “Before tag”
- “Custom HTML block in the global template
Paste the Code
Paste the full Accessibility Tool code snippet into that section.
Save and Publish
Save your changes and publish your site. The Accessibility Tool button will now appear across all pages of your website.

💡 Pro Tip: If your platform doesn’t allow global code injection, simply add the tool to each page manually using an embed or HTML block.

Website Accessibility Tool

Free & Customizable Accessibility Tool to embed on your Website

Builder

Preview

Generated Code

Get In Touch

Mumbo-Jumbo

Adventure With Us