Vanilla JS SDK

Coming soon

npm package coming soon — use the script tag today. @incluxa/a11y-sdk is not published to npm yet, so the install commands and imports on this page show the planned API and will not work until it is released. To add the widget today, paste the script tag before </body> (see the script tag guide):

index.html

<script
  src="https://cdn.angstroma.com/widget-v1e53f7da.js"
  integrity="sha384-HlP32lTm2OI1Il1KqCoQLgaPFlF6jpiSY43JpewsQOOmml95m0VMl4vnQxAP+XMi"
  crossorigin="anonymous"
  data-key="inc_live_YOUR_KEY"
  async
></script>

IncluxaA11y 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 (coming soon)

npm install @incluxa/a11y-sdk

Basic setup

main.js

import { IncluxaA11y } from '@incluxa/a11y-sdk'

const a11y = new IncluxaA11y({
  apiKey: 'inc_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 INCLUXA 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 { IncluxaA11y } from '@incluxa/a11y-sdk'

const a11y = new IncluxaA11y({ 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 { IncluxaA11y, A11yApiError } from '@incluxa/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}`)
    }
  }
}