Vanilla JS SDK

AngstromaA11y is a framework-agnostic class that gives you full control over accessibility features, profiles, and AI transforms â€” no React dependency required. Works with Vue, Angular, Svelte, plain HTML, or any server-rendered application.

Installation

npm install @angstroma/a11y-sdk

Basic setup

main.js

import { AngstromaA11y } from '@angstroma/a11y-sdk'

const a11y = new AngstromaA11y({
  apiKey: 'ang_live_YOUR_KEY',
  studentId: currentUser.id,   // optional: loads/saves the user's profile
})

// Mount on an element (or omit to scope to document.body)
await a11y.mount('#content')

// Profile is loaded automatically â€” DOM is updated
console.log(a11y.getEnabledFeatures())  // ['reading_mask', 'large_cursor', ...]

Feature control

// Enable a feature
a11y.enable('reading_mask')
a11y.enable('text_zoom', '150')   // with an optional value

// Disable a feature
a11y.disable('reading_mask')

// Toggle on/off
a11y.toggle('large_cursor')

// Check state
a11y.isEnabled('large_cursor')   // boolean

// Get all enabled codes
a11y.getEnabledFeatures()        // string[]

// Reset all features to off
a11y.reset()

Presets

// Apply a named preset
await a11y.applyPreset('dyslexia-friendly')

// List available presets
const presets = await a11y.getPresets()
// [{ code: 'dyslexia-friendly', name: 'Dyslexia Friendly', ... }, ...]

Saving preferences

Call save() to persist the current feature state to the user's profile in the Angstroma API. On next mount(), those settings are restored automatically.

// Save current state to the API
await a11y.save()

// Reload profile from the API
await a11y.loadProfile()

AI transforms

// Simplify text to a reading level
const result = await a11y.simplify(
  'The mitochondria is the powerhouse of the cell.',
  5   // target grade level
)
console.log(result.result)   // simplified text

// Generate alt text for an image
const alt = await a11y.generateAltText(
  'https://example.com/diagram.png',
  'Biology diagram'    // optional context hint
)

// Get scaffolded hints for a question
const hints = await a11y.getHints(
  'What is photosynthesis?',
  'Plants use sunlight to make food',
  { gradeLevel: 6, subject: 'biology' }
)

// Extract vocabulary words
const vocab = await a11y.extractVocabulary(
  'The cytoplasm surrounds the nucleus...',
  6   // grade level
)

// Rephrase a question/answer pair
const rephrased = await a11y.rephrase(
  'What is the boiling point of water?',
  '100Â°C at standard pressure',
  8   // grade level
)

Feature sub-modules

For direct DOM manipulation without the full class, import individual feature modules:

import { AngstromaA11y } from '@angstroma/a11y-sdk'

const a11y = new AngstromaA11y({ apiKey: '...' })

// Direct sub-module access
a11y.tts.speak('Hello, world')
a11y.tts.stop()

a11y.readingMask.enable()
a11y.readingMask.disable()

a11y.bionicReading.enable(document.getElementById('content'))

a11y.contrast.enable('high')   // 'high' | 'inverted' | 'monochrome'

a11y.textZoom.set(150)         // percentage

a11y.largeCursor.enable()
a11y.focusHighlight.enable()
a11y.reducedMotion.enable()

Cleanup

// Remove all accessibility effects and clean up event listeners
a11y.destroy()

Tip

Call a11y.destroy() in your framework's component unmount hook to prevent memory leaks and stale DOM mutations.

Error handling

import { AngstromaA11y, A11yApiError } from '@angstroma/a11y-sdk'

try {
  await a11y.applyPreset('dyslexia-friendly')
} catch (err) {
  if (err instanceof A11yApiError) {
    if (err.status === 429) {
      console.warn('AI quota exceeded')
    } else if (err.status === 401) {
      console.error('Invalid API key')
    } else {
      console.error(`API error ${err.status}: ${err.body}`)
    }
  }
}