Installation

A11yCore offers two installation methods: the modernESM bundle(recommended) for optimal performance, or thelegacy script tagfor maximum compatibility.

97% Smaller Initial Load

The ESM bundle is only~14KBcompared to 522KB for the legacy bundle. Features load on-demand as users interact with them, dramatically improving page load times.

ESM Installation

Add this module script to your page. The ESM bundle uses modern JavaScript imports and loads features on-demand.

HTML (ESM)

<script type="module">
  import A11yCore from 'https://cdn.a11ycore.org/a11ycore/dist/esm/core.js';
  
  A11yCore.init({ licenseKey: 'YOUR_LICENSE_KEY' });
</script>

With Configuration

Use async/await for more control over initialization and configuration:

HTML (ESM with config)

<script type="module">
  // Async/await pattern for more control
  import A11yCore from 'https://cdn.a11ycore.org/a11ycore/dist/esm/core.js';
  
  await A11yCore.init({
    licenseKey: 'YOUR_LICENSE_KEY',
    config: {
      widget: { position: 'bottom-right' }
    }
  });
  
  console.log('A11yCore initialized!');
</script>

ESM Bundle Options

Bundle	Size	Use Case
/esm/core.js	~14KB	Lightweight core with on-demand feature loading (recommended)
/esm/index.js	~27KB	Full API with all feature references

Script Attributes

Attribute	Required	Description
data-key	Yes	Your license key from the A11yCore dashboard. Required for license verification.
data-config	No	URL to a JSON configuration file for remote config loading.
data-debug	No	Set to "true" to enable console logging for debugging.
data-autoinit	No	Set to "false" to disable auto-initialization. Use with manual init.
defer	Recommended	Defers script execution until DOM is ready. Prevents render blocking.

Subresource Integrity (SRI)

For enhanced security, add theintegrityattribute with the SHA-384 hash from your dashboard. The browser will verify the script hasn't been tampered with.

HTML with SRI

<script
  src="https://cdn.a11ycore.org/a11ycore/dist/v1/a11ycore.min.js"
  data-key="YOUR_LICENSE_KEY"
  integrity="sha384-[HASH_FROM_DASHBOARD]"
  crossorigin="anonymous"
  defer
></script>

How Auto-Initialization Works

When the script loads, A11yCore automatically:

Waits for the DOM to be ready (DOMContentLoadedorreadyState === 'interactive')
Reads thedata-keyattribute from the script tag
Verifies your license with the A11yCore server
Starts a MutationObserver to scan for accessibility issues
Initializes the accessibility widget UI
Sets up keyboard shortcut handlers (default:Alt+A)

License Key Required

Without a valid license key, A11yCore displays a watermark and some features may be limited. Get your key from thedashboardafter signing up.