@angstroma/a11y-sdk

Programmatic accessibility SDK for WCAG compliance — React components, vanilla JS API, and AI-powered content transforms.

Two ways to install Angstroma on your site — pick one:

| Option | Best for | Install | |--------|----------|---------| | CDN script tag | Static sites, CMS platforms, quickest integration | <script src="https://cdn.angstroma.com/widget.js" data-key="YOUR_KEY"></script> | | npm SDK (this package) | React/Vue/Angular apps, custom UI, AI transforms, per-user presets | npm install @angstroma/a11y-sdk |

Full docs: https://angstroma.com/docs

Install

npm install @angstroma/a11y-sdk
# or
pnpm add @angstroma/a11y-sdk
# or
yarn add @angstroma/a11y-sdk

Get a publishable API key from the Angstroma dashboard → API Keys.

Quick start — React

import { A11yProvider, A11yToolbar } from '@angstroma/a11y-sdk';

export default function App() {
  return (
    <A11yProvider apiKey={process.env.NEXT_PUBLIC_ANGSTROMA_KEY!}>
      <YourApp />
      <A11yToolbar position="bottom-right" />
    </A11yProvider>
  );
}

Access the engine from any component:

import { useA11y } from '@angstroma/a11y-sdk';

function FontSizeToggle() {
  const { enable, disable, toggle, applyPreset } = useA11y();
  return <button onClick={() => toggle('text-zoom')}>Bigger text</button>;
}

Quick start — Vanilla JS (no React)

<script type="module">
  import { AngstromaA11y } from 'https://unpkg.com/@angstroma/a11y-sdk/dist/vanilla.esm.js';

  const a11y = new AngstromaA11y({ apiKey: 'YOUR_KEY' });
  await a11y.init();
  a11y.enable('contrast');
  a11y.applyPreset('dyslexia-friendly');
</script>

AI content transforms

import { simplify, generateAltText, getHints } from '@angstroma/a11y-sdk';

const simpler = await simplify(client, { text, targetLevel: 'grade-5' });
const alt = await generateAltText(client, { imageUrl });
const hints = await getHints(client, { question, answer, gradeLevel: 8 });

Full AI reference: https://angstroma.com/docs/ai-module

What's included

| Category | Exports | |----------|---------| | React components | A11yProvider, A11yToolbar, A11yReader, A11yPresetBar, A11yQuizToolbar | | React hook | useA11y() | | Vanilla JS | AngstromaA11y class | | AI module | simplify, rephrase, generateAltText, getHints, extractVocabulary, checkGrammar, extractImageText, summarize, translate | | Features (headless) | enableFeature, disableFeature, applyFeatureSet, disableAllFeatures | | Feature appliers | bionicReading, contrast, focusHighlight, fontSwap, largeCursor, largeTargets, readingMask, reducedMotion, textSpacing, textZoom, tts | | Profile management | ProfileManager, applyFeatureSet | | i18n | setLocale, getLocale, registerLocale, isRtl, t | | Error class | A11yApiError |

Subpath imports

Tree-shake by importing only what you need:

import { simplify } from '@angstroma/a11y-sdk/ai';           // AI only (~1.5 KB)
import { AngstromaA11y } from '@angstroma/a11y-sdk/vanilla'; // Vanilla only (no React)
import { contrast } from '@angstroma/a11y-sdk/features';     // Feature appliers only

Requirements

• React (optional): 18.0 or newer. Vanilla usage works without React.
• Node.js: 18.0+ for build-time tools. No Node at runtime (browser-only).
• Browsers: evergreen (Chrome, Edge, Firefox, Safari). No IE 11.

Links

• Dashboard & API keys: https://app.angstroma.com
• Docs: https://angstroma.com/docs
• SDK reference: https://angstroma.com/docs/sdk
• Support: https://angstroma.com/support
• Status: https://angstroma.com/status

License

MIT © Angstroma, Inc.