# Create your own accessibility widget

Why Build Your Own Accessibility Widget

• 💰 Cost Savings – Avoid recurring payments for third-party tools.
• ⚡ Performance – Many external widgets can slow down your site.
• 🎨 Customization – Build the experience to suit your users' needs.
• 🏗️ No Overlays – Many accessibility overlays offer only quick fixes and can potentially break your UI.
• 🔒 No Privacy Concerns – Accessibility overlays store user preferences in cookies and provide admin users with usage statistics, but their additional data collection is questionable.

Key Features to Implement

Text Size Adjustment – Increase/decrease font size for better readability.

function increaseTextSize(zoom = 1.1) {
  document.body.style.zoom = zoom;
}

High Contrast Mode – Toggle dark/high contrast themes.

function toggleHighContrast() {
  document.body.classList.toggle("high-contrast");
}

const style = document.createElement("style");
style.innerHTML = `
  .high-contrast * {
    filter: contrast(4) brightness(0.8);
    background: #000 !important;
    color: #fff !important;
  }
`;
document.head.appendChild(style);

Change page saturation - Adjust color intensity for better readability.

function adjustSaturation(level = "50%") {
  document.body.style.filter = `saturate(${level})`;
}

Pause Animations – Stop distracting or harmful animations.

function toggleHighContrast() {
  document.body.classList.toggle("stopped-animation");
}

const style = document.createElement("style");
style.innerHTML = `
  .stopped-animation * {
    transition-timing-function: step-end !important;
    transition-duration: 0s !important;
    animation-timing-function: step-end !important;
    animation-iteration-count: 1 !important;
    animation-duration: 0s !important;
    animation: none !important;
  }
`;
document.head.appendChild(style);

Increase Spacing – Adjust letter, word, and line spacing.

function increaseSpacing(amount = "4px") {
  document.body.style.letterSpacing = amount;
  document.body.style.wordSpacing = amount;
}

Adjust line height - Modify spacing between lines for accessibility.

function increaseLineHeight(factor = 1.5) {
  document.body.style.lineHeight = factor;
}

Change text alignment - Align text left, center, or right for readability.

function changeTextAlignment(alignment = "right") {
  document.body.style.textAlign = alignment;
}

Hide Images – Allow users to disable images for better focus.

function toggleImages() {
  document.querySelectorAll("img").forEach((img) => {
    img.style.display = img.style.display === "none" $2 "block" : "none";
  });
}

Cursor Enlargement – Make the pointer more visible.

function enlargeCursor() {
  document.body.style.cursor =
    "url('https://your-domain.com/large-cursor.png'), auto";
}

Screen Reader Support – Enable text-to-speech functionality.

document.querySelectorAll("h1,h2,h3,h4,h5,h6,a,p,strong").forEach((el) => {
  el.addEventListener("mouseover", () => {
    speechSynthesis.speak(new SpeechSynthesisUtterance(el.innerText));
  });

  el.addEventListener("mouseout", () => {
    speechSynthesis.cancel();
  });
});

Structure Outlining – Highlight page sections for better navigation.

function showPageStructure() {
  document
    .querySelectorAll(
      "h1, h2, h3, h4, h5, h6, nav, main, aside, footer, header"
    )
    .forEach((el) => {
      el.style.outline = "2px solid red";
      el.style.padding = "2px";
    });
}

Link Highlighting – Make links more visible for users with low vision.

function highlightLinks() {
  document.querySelectorAll("a").forEach((link) => {
    link.style.backgroundColor = "yellow";
    link.style.color = "#000";
    link.style.textDecoration = "underline";
  });
}

Final Thoughts

Instead of relying on expensive third-party accessibility tools, you can take control and implement an accessibility widget that is lightweight, customizable, and truly effective. By embedding accessibility best practices directly into your website, you ensure a better experience for all users without unnecessary dependencies.

Remember, no accessibility overlay can guarantee full EAA compliance! Instead, build a strong accessibility culture within your company and make inclusivity a priority.