@angstroma/ng-a11y-sdk

Angular wrapper for the Angstroma accessibility SDK — a single injectable service that adds 112 WCAG 2.2 features (contrast, text zoom, dyslexia font, screen reader, and more) to your Angular app.

Install

npm install @angstroma/ng-a11y-sdk @angstroma/a11y-sdk

Get a publishable API key from the Angstroma dashboard.

Quick start (standalone — Angular 16+)

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideAngstroma } from '@angstroma/ng-a11y-sdk';

export const appConfig: ApplicationConfig = {
  providers: [
    provideAngstroma({
      apiKey: 'pk_live_...',
      // optional:
      // studentId: currentUser.id,
      // autoMount: true,
    }),
  ],
};

// any.component.ts
import { Component, inject } from '@angular/core';
import { AngstromaService } from '@angstroma/ng-a11y-sdk';

@Component({
  selector: 'app-a11y-toolbar',
  standalone: true,
  template: `
    <button (click)="a11y.toggle('contrast')">Toggle contrast</button>
    <button (click)="a11y.applyPreset('dyslexia-friendly')">Dyslexia mode</button>
    <p>Active: {{ (a11y.enabledFeatures$ | async)?.join(', ') }}</p>
  `,
})
export class A11yToolbarComponent {
  protected readonly a11y = inject(AngstromaService);
}

Quick start (NgModule)

// app.module.ts
import { AngstromaModule } from '@angstroma/ng-a11y-sdk';

@NgModule({
  imports: [
    AngstromaModule.forRoot({ apiKey: 'pk_live_...' }),
  ],
})
export class AppModule {}

API

AngstromaService

| Member | Description | |--------|-------------| | ready$: Observable<boolean> | Emits true once the SDK is mounted. | | enabledFeatures$: Observable<string[]> | Emits the current list of enabled feature codes whenever it changes. | | enable(code, value?) | Turn on a feature. | | disable(code) | Turn off a feature. | | toggle(code, value?) | Flip a feature's state. | | isEnabled(code) | Returns a boolean. | | getEnabledFeatures() | Returns string[]. | | applyPreset(presetCode) | Apply a named preset — returns Promise<void>. | | getPresets() | List available presets — returns Promise<Preset[]>. | | save() | Persist current state to the API. | | reset() | Turn every feature off. | | destroy() | Unmount and release resources. | | init(config) | Manually initialize when config comes from a runtime fetch. | | instance | The underlying vanilla AngstromaA11y instance (advanced). |

AI content transforms

await a11y.simplify(text, 5);                              // grade-5 reading level
await a11y.getHints(question, answer, { gradeLevel: 8 });
await a11y.generateAltText(imageUrl);
await a11y.rephrase(question, answer, 8);
await a11y.extractVocabulary(text, 8);

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

Configuration

interface AngstromaConfig {
  apiKey: string;                 // required
  apiUrl?: string;                // default: https://api.angstroma.com/api/v1
  studentId?: string;             // for profile persistence
  autoMount?: boolean;            // default: true
  mountTarget?: string | HTMLElement;  // default: document.body
}

// For i18n, import setLocale from @angstroma/a11y-sdk directly:
//   import { setLocale } from '@angstroma/a11y-sdk';
//   setLocale('es');

Requirements

• Angular: 15.0+ (tested through 17)
• RxJS: 7.0+
• Peer: @angstroma/a11y-sdk (installed separately)

Links

• Dashboard & API keys: https://app.angstroma.com
• Docs: https://angstroma.com/docs
• Support: https://angstroma.com/support

License

MIT © Angstroma, Inc.