JavaScript API

The Accessify widget exposes a global window.Accessify object that gives you full programmatic control over every widget feature. Use it to build custom accessibility triggers, integrate with consent flows, fire analytics events, or embed accessibility into your SPA lifecycle.

When to Use the JavaScript API

• Custom trigger buttons — hide the default floating icon and open the widget from your own navigation bar or footer link.
• Cookie consent integration — delay widget initialization until a visitor accepts your GDPR / ePrivacy cookie banner.
• A/B testing — enable specific features for a test cohort and measure engagement.
• Analytics — listen to widget events and forward them to Google Analytics 4, Mixpanel, Segment, or any data pipeline.
• SPA frameworks — mount and unmount the widget in sync with your React, Vue, or Angular component lifecycle.
• Headless / embedded accessibility — use Accessify features without showing the panel at all, driving every feature from your own UI.

Availability

The window.Accessify object is available after the widget script has loaded and initialized. Always wait for the accessify:ready event before calling any method:

window.addEventListener('accessify:ready', (e) => {
  // The widget is fully initialized
  const instance = e.detail.instance;
  console.log('Accessify ready', instance);

  // Safe to call any API method
  window.Accessify.widgetOpen();
});

If you call a method before the widget is ready, the call is silently queued and executed once initialization completes.

Widget Control

Methods for opening, closing, and resetting the widget panel and floating icon.

Feature Control

Enable or disable individual accessibility features programmatically. Stage-based features accept a numeric level (1–4) controlling intensity.

Profiles

Profiles are curated presets that activate multiple features at once, tailored to specific accessibility needs. Use applyProfile(name) to activate any of the 14 built-in profiles:

// Activate a profile by name
Accessify.applyProfile('visually_impaired');

// Available profiles:
Accessify.applyProfile('visually_impaired'); // Dark contrast, large text, legible fonts, big cursor
Accessify.applyProfile('blind');             // Keyboard nav, TTS, page structure, tooltips
Accessify.applyProfile('motor_impaired');    // Keyboard nav, big cursor, enhanced focus
Accessify.applyProfile('adhd');              // Stop animations, low saturation, reading guide
Accessify.applyProfile('elderly');           // Larger text, light contrast, legible fonts
Accessify.applyProfile('dyslexia');          // Legible fonts, extra spacing, reading guide
Accessify.applyProfile('cognitive');         // Stop animations, low saturation, tooltips
Accessify.applyProfile('seizure_safe');      // Stop animations, grayscale

// Reset the active profile
Accessify.resetAll();

Language

Change the widget interface language at runtime with changeLanguage(langCode). The widget ships with 20 languages:

Accessify.changeLanguage('fr'); // Switch to French

// Supported language codes:
// en  — English          fr  — French           de  — German
// es  — Spanish          it  — Italian          pt  — Portuguese
// nl  — Dutch            pl  — Polish           cs  — Czech
// sk  — Slovak           sl  — Slovenian         hr  — Croatian
// hu  — Hungarian        ro  — Romanian          bg  — Bulgarian
// el  — Greek            da  — Danish            fi  — Finnish
// sv  — Swedish          ar  — Arabic (RTL)

RTL layout is automatically applied when switching to Arabic.

Events

The widget dispatches custom events on window that you can listen to for analytics, debugging, or custom integrations.

Practical Examples

Custom Accessibility Button

Hide the default floating icon and use your own button to toggle the widget panel:

<!-- Your custom button anywhere on the page -->
<button id="my-a11y-btn" aria-label="Open accessibility settings">
  <img src="/icons/accessibility.svg" alt="" />
  Accessibility
</button>

<script>
  window.addEventListener('accessify:ready', () => {
    // Hide the default floating icon
    Accessify.iconVisibilityOff();

    // Wire up your custom button
    document.getElementById('my-a11y-btn')
      .addEventListener('click', () => {
        Accessify.widgetToggle();
      });
  });
</script>

Cookie Consent Integration

Only show the widget after the user has accepted your GDPR cookie consent banner:

<script>
  // Hide the widget icon on load
  window.addEventListener('accessify:ready', () => {
    if (!hasUserConsented()) {
      Accessify.iconVisibilityOff();
    }
  });

  // When the user accepts cookies, show the widget
  function onConsentGranted() {
    Accessify.iconVisibilityOn();
  }

  function hasUserConsented() {
    return document.cookie.includes('consent=accepted');
  }
</script>

Analytics Integration

Track every widget interaction in Google Analytics 4:

<script>
  window.addEventListener('accessify:feature_toggle', (e) => {
    gtag('event', 'accessibility_feature', {
      feature_name: e.detail.feature,
      feature_value: String(e.detail.value),
      event_category: 'accessibility',
    });
  });

  window.addEventListener('accessify:profile_applied', (e) => {
    gtag('event', 'accessibility_profile', {
      profile_name: e.detail.profile,
      event_category: 'accessibility',
    });
  });

  window.addEventListener('accessify:widget_opened', () => {
    gtag('event', 'accessibility_panel_open', {
      event_category: 'accessibility',
    });
  });
</script>

Conditional Loading

Show the widget only on specific pages of your site:

<script>
  window.addEventListener('accessify:ready', () => {
    const path = window.location.pathname;

    // Hide on admin pages, show everywhere else
    if (path.startsWith('/admin') || path.startsWith('/checkout')) {
      Accessify.iconVisibilityOff();
    }
  });
</script>

SPA Framework Integration

Listen for the widget ready event inside a React component:

import { useEffect, useState } from 'react';

function useAccessify() {
  const [ready, setReady] = useState(false);

  useEffect(() => {
    const handler = () => setReady(true);
    window.addEventListener('accessify:ready', handler);

    // Check if already initialized
    if (window.Accessify) setReady(true);

    return () => window.removeEventListener('accessify:ready', handler);
  }, []);

  return { ready, accessify: window.Accessify ?? null };
}

// Usage in a component
function AccessibilityButton() {
  const { ready, accessify } = useAccessify();

  if (!ready) return null;

  return (
    <button onClick={() => accessify.widgetToggle()}>
      Toggle Accessibility
    </button>
  );
}

Framework Examples

React

// app/layout.tsx (Next.js App Router)
import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://cdn.accessify.io/widget.js"
          data-account="YOUR_ACCOUNT_KEY"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Vue 3

<!-- App.vue -->
<script setup>
import { onMounted, onUnmounted, ref } from 'vue';

const accessifyReady = ref(false);

function onReady() {
  accessifyReady.value = true;
}

onMounted(() => {
  window.addEventListener('accessify:ready', onReady);

  // Inject the script tag
  const script = document.createElement('script');
  script.src = 'https://cdn.accessify.io/widget.js';
  script.dataset.account = 'YOUR_ACCOUNT_KEY';
  script.async = true;
  document.body.appendChild(script);
});

onUnmounted(() => {
  window.removeEventListener('accessify:ready', onReady);
});

function toggleWidget() {
  if (accessifyReady.value) {
    window.Accessify.widgetToggle();
  }
}
</script>

<template>
  <button @click="toggleWidget">Accessibility</button>
</template>

Angular

// accessibility.service.ts
import { Injectable, NgZone } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

declare global {
  interface Window { Accessify: any; }
}

@Injectable({ providedIn: 'root' })
export class AccessibilityService {
  ready$ = new BehaviorSubject<boolean>(false);

  constructor(private zone: NgZone) {
    window.addEventListener('accessify:ready', () => {
      this.zone.run(() => this.ready$.next(true));
    });
  }

  toggle() { window.Accessify?.widgetToggle(); }
  open()   { window.Accessify?.widgetOpen(); }
  close()  { window.Accessify?.widgetClose(); }
  reset()  { window.Accessify?.resetAll(); }

  applyProfile(name: string) {
    window.Accessify?.applyProfile(name);
  }
}

TypeScript Reference

Below are the TypeScript interfaces describing the window.Accessify API. Useful if you're working in a TypeScript project and want type-safe access to the widget:

// Type definitions for window.Accessify
// You can declare these in a .d.ts file in your project

// AccessifyInstance — all API methods
interface AccessifyInstance {
  widgetOpen(): void;
  widgetClose(): void;
  widgetToggle(): void;
  resetAll(): void;
  iconVisibilityOn(): void;
  iconVisibilityOff(): void;
  contrastEnable(stage: 1 | 2 | 3 | 4): void;
  contrastDisable(): void;
  bigTextEnable(stage: 1 | 2 | 3 | 4): void;
  bigTextDisable(): void;
  stopAnimationEnable(): void;
  stopAnimationDisable(): void;
  bigCursorEnable(): void;
  bigCursorDisable(): void;
  readingGuideEnable(): void;
  readingGuideDisable(): void;
  ttsEnable(): void;
  ttsDisable(): void;
  applyProfile(name: AccessifyProfile): void;
  changeLanguage(code: string): void;
}

// Profile names
type AccessifyProfile =
  | 'visually_impaired'
  | 'blind'
  | 'motor_impaired'
  | 'adhd'
  | 'elderly'
  | 'dyslexia'
  | 'cognitive'
  | 'seizure_safe';

// Widget positions
type WidgetPosition =
  | 'top-left'    | 'top-center'    | 'top-right'
  | 'middle-left' | 'middle-center' | 'middle-right'
  | 'bottom-left' | 'bottom-center' | 'bottom-right';

Error Handling

The API is designed to be safe to call at any time:

• Before ready: method calls are silently queued and executed once the widget initializes.
• Invalid arguments: methods validate inputs and log a warning to the console in development mode without throwing.
• Script blocked: if a content blocker prevents the widget script from loading, the accessify:ready event will never fire.

Recommended defensive pattern:

function safeAccessify(callback) {
  try {
    if (window.Accessify) {
      callback(window.Accessify);
    } else {
      window.addEventListener('accessify:ready', () => {
        callback(window.Accessify);
      }, { once: true });
    }
  } catch (error) {
    console.warn('Accessify API error:', error);
  }
}

// Usage
safeAccessify((af) => {
  af.applyProfile('elderly');
  af.iconVisibilityOff();
});

Browser Compatibility

The Accessify widget and JavaScript API are supported on all modern browsers:

The Text-to-Speech (TTS) feature requires the Web Speech API, which is supported in Chrome, Edge, Safari, and Firefox. On mobile browsers, TTS availability depends on the device operating system speech synthesis engine. Internet Explorer is not supported.