Developer API

Controlling AccessiLens from Your Code

For development teams that want to go beyond the standard out-of-the-box experience, AccessiLens provides a programming interface. This allows developers to control the accessibility widget directly from their own code — for example, to open it from a button in their own navigation, or to be notified when a user activates a specific accessibility setting.

How to

Available controls and notifications

window.AccessiLens.open() — opens the accessibility toolbar from your own code. Use this if you want to add your own 'Accessibility' button to your website's header.

window.AccessiLens.applyProfile('ADHD') — activates a specific accessibility profile automatically. Useful if you know your audience has particular needs.

window.AccessiLens.reset() — turns off all active accessibility settings and returns the page to its default appearance.

accessilens:ready event — your code can listen for this notification to know when the AccessiLens engine has fully loaded and is ready to use.

accessilens:profileChanged event — your code is notified whenever a visitor activates an accessibility profile, allowing you to log this information in your own analytics platform.

javascript

// Wait for AccessiLens to finish loading before using it
window.addEventListener('accessilens:ready', () => {
  console.log('AccessiLens is ready!');
  // You could automatically open the widget here if needed:
  // window.AccessiLens.open();
});

// Track which accessibility profiles your visitors are using
window.addEventListener('accessilens:profileChanged', (e) => {
  const activeProfile = e.detail.profile;
  // Send this information to Google Analytics
  gtag('event', 'accessibility_profile_activated', {
    'profile_name': activeProfile
  });
});

Build your own accessibility button

By using window.AccessiLens.open(), you can completely hide the default floating icon and instead place your own 'Accessibility Settings' link directly in your website's main navigation menu. This gives you full control over the visual design.

Connect to your analytics platform

Using the profileChanged event, you can forward accessibility usage data to your own analytics platforms such as Google Analytics, Mixpanel, or any other tool your team uses. This allows you to understand how many of your visitors have accessibility needs.