Skip to main content

Framework Integrations

A11yCore works with any web framework. Here are complete integration examples with best practices for each platform.

New: ESM Bundle (97% smaller)

All examples below use the new ESM bundle which loads only~14KBinitially. Features load on-demand as users interact with them, dramatically improving page load times.

Key principle:Initialize A11yCore once at the application root. The widget persists across client-side navigation in SPAs. You don't need to reinitialize on each page.

React

// App.tsx - ESM import (recommended)
import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const initA11yCore = async () => {
      const A11yCore = await import('https://cdn.a11ycore.org/a11ycore/dist/esm/core.js');
      await A11yCore.default.init({
        licenseKey: import.meta.env.VITE_A11YCORE_KEY,
        debug: import.meta.env.DEV,
      });
    };
    initA11yCore();
  }, []);
  
  return <div>...</div>;
}
  • ESM import loads only ~14KB initially vs 550KB legacy
  • Features load on-demand as users interact
  • Initialize once in your root App component

Next.js (App Router)

// app/providers.tsx - ESM with client component
'use client';
import { useEffect } from 'react';

export function A11yCoreProvider({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    const init = async () => {
      const A11yCore = await import('https://cdn.a11ycore.org/a11ycore/dist/esm/core.js');
      await A11yCore.default.init({
        licenseKey: process.env.NEXT_PUBLIC_A11YCORE_KEY!,
      });
    };
    init();
  }, []);
  
  return <>{children}</>;
}

// app/layout.tsx
import { A11yCoreProvider } from './providers';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <A11yCoreProvider>{children}</A11yCoreProvider>
      </body>
    </html>
  );
}
  • Use a client component wrapper for ESM dynamic import
  • Place provider in root layout.tsx for site-wide coverage
  • ESM works perfectly with Next.js 13+ App Router

Vue.js

// main.ts - ESM import
import { createApp, onMounted } from 'vue';
import App from './App.vue';

const app = createApp(App);

// Initialize A11yCore
const initA11yCore = async () => {
  const A11yCore = await import('https://cdn.a11ycore.org/a11ycore/dist/esm/core.js');
  await A11yCore.default.init({
    licenseKey: import.meta.env.VITE_A11YCORE_KEY,
  });
};

app.mount('#app');
initA11yCore();
  • ESM import works great with Vite + Vue
  • Initialize after app mount for optimal loading
  • Works with both Vue 2 and Vue 3

Shopify

{%- comment -%} theme.liquid - ESM (modern browsers) {%- endcomment -%}

{%- if shop.metafields.a11ycore.license_key -%}
  <script type="module">
    import A11yCore from 'https://cdn.a11ycore.org/a11ycore/dist/esm/core.js';
    A11yCore.init({ licenseKey: '{{ shop.metafields.a11ycore.license_key }}' });
  </script>
  
  {%- comment -%} Fallback for older browsers {%- endcomment -%}
  <script nomodule
    src="https://cdn.a11ycore.org/a11ycore/dist/v1/a11ycore.min.js"
    data-key="{{ shop.metafields.a11ycore.license_key }}"
    defer
  ></script>
{%- endif -%}
  • ESM for modern browsers, nomodule fallback for IE11
  • Store license key in Shop metafields for security
  • 97% smaller load for most Shopify visitors

WordPress

// functions.php - ESM with fallback
function a11ycore_enqueue_scripts() {
  $key = esc_attr(get_option('a11ycore_license_key'));
  if (!$key) return;
  
  // ESM for modern browsers
  echo "<script type='module'>
    import A11yCore from 'https://cdn.a11ycore.org/a11ycore/dist/esm/core.js';
    A11yCore.init({ licenseKey: '{$key}' });
  </script>";
  
  // Legacy fallback
  wp_enqueue_script('a11ycore-legacy', 
    'https://cdn.a11ycore.org/a11ycore/dist/v1/a11ycore.min.js',
    [], '2.0.0', ['strategy' => 'defer', 'in_footer' => false]
  );
  add_filter('script_loader_tag', function($tag, $handle) use ($key) {
    if ($handle === 'a11ycore-legacy') {
      return str_replace('<script', "<script nomodule data-key='{$key}'", $tag);
    }
    return $tag;
  }, 10, 2);
}
add_action('wp_head', 'a11ycore_enqueue_scripts');
  • ESM module script + nomodule legacy fallback
  • Modern browsers get 97% smaller bundle
  • Full compatibility with older browsers maintained

Static HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Website</title>
  
  <!-- A11yCore ESM (recommended - 14KB) -->
  <script type="module">
    import A11yCore from 'https://cdn.a11ycore.org/a11ycore/dist/esm/core.js';
    A11yCore.init({ licenseKey: 'YOUR_LICENSE_KEY' });
  </script>
  
  <!-- Legacy fallback for IE11 (optional) -->
  <script nomodule
    src="https://cdn.a11ycore.org/a11ycore/dist/v1/a11ycore.min.js"
    data-key="YOUR_LICENSE_KEY"
    defer
  ></script>
</head>
<body>
  ...
</body>
</html>
  • ESM loads only 14KB vs 550KB legacy bundle
  • Use nomodule for IE11 fallback if needed
  • Features load on-demand when users need them