@web-engine-dev/accessibility

Accessibility features (a11y) for web-engine-dev.

Features

• Screen Reader Support: ARIA labels and live regions
• Keyboard Navigation: Full keyboard control
• High Contrast: Visual accessibility modes
• Text-to-Speech: Audio descriptions
• Colorblind Modes: Color vision deficiency filters
• Motor Accessibility: Input assistance

Installation

npm install @web-engine-dev/accessibility
# or
pnpm add @web-engine-dev/accessibility

Quick Start

import { Accessibility, ScreenReader, ColorblindFilter } from '@web-engine-dev/accessibility';

// Initialize accessibility system
const a11y = new Accessibility();

// Enable screen reader
a11y.enableScreenReader();

// Announce to screen reader
a11y.announce('Game started. Press Space to jump.');

// Enable colorblind mode
a11y.setColorblindMode('deuteranopia');

// Enable high contrast
a11y.setHighContrast(true);

API Overview

Screen Reader

// Announce messages
a11y.announce('Level complete!');
a11y.announce('Enemy approaching', { priority: 'assertive' });

// Describe UI elements
a11y.describe(button, 'Start game button');

// Live regions for dynamic content
a11y.setLiveRegion(scoreDisplay, 'polite');

Keyboard Navigation

const keyboard = new KeyboardNavigation({
  focusIndicator: true,
  focusIndicatorStyle: {
    color: '#ffff00',
    width: 3,
  },
});

// Register focusable elements
keyboard.register(menuButtons);

// Navigate
keyboard.focusNext();
keyboard.focusPrevious();
keyboard.activate();

Colorblind Modes

// Set colorblind filter
a11y.setColorblindMode('protanopia'); // Red-blind
a11y.setColorblindMode('deuteranopia'); // Green-blind
a11y.setColorblindMode('tritanopia'); // Blue-blind

// Apply to renderer
renderer.postProcess.add(a11y.getColorFilter());

Motor Accessibility

// Enable sticky keys
a11y.enableStickyKeys();

// Enable auto-aim assistance
a11y.enableAutoAim({ strength: 0.5 });

// Extended timing
a11y.setQTETimeScale(2.0);

// One-switch mode
a11y.enableOneSwitchMode();

Text-to-Speech

// Speak text
a11y.speak('You found a treasure chest');

// Read UI
a11y.readElement(dialogBox);

// Settings
a11y.tts.setRate(1.0);
a11y.tts.setVolume(0.8);
a11y.tts.setVoice('english-us');

Accessibility Settings UI

// Show accessibility menu
a11y.showSettingsUI();

// Get current settings
const settings = a11y.getSettings();

// Apply settings
a11y.applySettings(savedSettings);