Accessibility Widget

Follow the steps below to integrate the Accessibility Widget into your website.

Copy and paste the following code immediately before the closing </body> tag on every page (or theme footer page) where you want the widget to appear. Loading the script at the end of the page helps ensure that your website content loads first while the widget initializes after the page has been rendered.

The first script loads the latest version of the Accessibility Widget from the official CDN. The second script updates the default accessibility widget link so that it points to your website's home page instead of the default destination. It also monitors dynamically added content to ensure the link remains updated, making it suitable for modern websites that load content asynchronously.

<script defer='defer' src='https://cdn.jsdelivr.net/npm/sienna-accessibility@latest/dist/sienna-accessibility.umd.js'></script>
<script>
  (function () {

    function fixLink() {
      document
        .querySelectorAll('a[href="https://accessibility-widget.pages.dev"]')
        .forEach(link => {
          link.setAttribute("href", "/");
          link.removeAttribute("target"); // optional: keeps navigation in same tab
          link.setAttribute("rel", "noopener"); // optional safety
        });
    }

    // Run once after load
    document.addEventListener("DOMContentLoaded", fixLink);

    // Watch for dynamically added elements
    const observer = new MutationObserver(fixLink);
    observer.observe(document.body, {
      childList: true,
      subtree: true
    });

  })();
</script>

Note: If your website uses a Content Security Policy (CSP), ensure that https://cdn.jsdelivr.net is included in the script-src directive. After installation, refresh your browser and verify that the Accessibility Widget is displayed correctly and functions as expected on all pages.