Managing Features
A11yCore provides a JavaScript API to programmatically control accessibility features. All methods returntrueon success orfalseif the feature key is not recognized.
Core Methods
A11yCore.features.enable('featureName')Enable a feature by key. Returns boolean.A11yCore.features.disable('featureName')Disable a feature by key. Returns boolean.A11yCore.features.toggle('featureName')Toggle a feature on/off. Returns boolean.A11yCore.features.colorFilter('monochrome')Apply color filter: 'invert', 'monochrome', 'protanopia', 'deuteranopia', 'tritanopia'A11yCore.features.spacing(2)Set text spacing level: 0 (reset), 1, 2, 3A11yCore.features.transcript()Show transcript overlay for media elementsAvailable Feature Keys
These are the exact feature keys accepted byenable(),disable(), andtoggle():
| Key | Description | |
|---|---|---|
| highContrast | Force a high-contrast color scheme | |
| keyboardNav | Add skip link and strong focus styles | |
| ariaInjector | Inject ARIA labels for unlabeled elements | |
| textSize:120 | Resize text to 120% (also 130, 140, 150, 200) | |
| highlightLinks | Outline all links for discoverability | |
| readingGuide | Horizontal line following pointer/focus | |
| readingMask | Dim surroundings with focus window | |
| reduceMotion | Disable animations and smooth scrolling | |
| accessibleFont | Use dyslexia-friendly font stack | |
| darkMode | Apply dark theme with adjusted colors | |
| largeCursor | Large, high-contrast SVG cursor | |
| highlightHeadings | Visually emphasize all headings | |
| hitTargets | Increase minimum target size (44x44px) | |
| landmarks | Add skip-to-content and semantic landmarks | |
| toc | Show Table of Contents overlay | |
| breadcrumbs | Generate breadcrumb trail from URL | |
| altSuggest | Suggest alt text for images | |
| contrastAdjust | Enforce minimum contrast ratio (AA) | |
| contrastAdjustAAA | Enforce AAA contrast ratio | |
| hoverDisable | Pause animations on hover | |
| captions | Enable caption tracks for media | |
| formAssist | Add labels, validation, error announcements | |
| simplifyText | Clean layout, limit content width | |
| tabOrder | Normalize tabindex to follow DOM order | |
| focusAssist | Keep focused element visible | |
| muteMedia | Mute and pause all audio/video | |
| labelInName | Ensure visible text in aria-label | |
| inputPurpose | Add autocomplete to form inputs | |
| singleKeyBlock | Block single-character shortcuts | |
| redundantEntry | Reuse previously entered values | |
| timeoutAssist | Simulate activity to avoid timeouts | |
| flashGuard | Mitigate rapid flashing animations | |
| motionActuation | Block device motion events | |
| langAssist | Set missing lang/dir attributes | |
| titleAssist | Set missing document title | |
| pointerCancellation | Pointer cancellation support | |
| dragAlternative | Provide drag alternatives | |
| linkPurpose | Enhance link purpose clarity | |
| headingHierarchy | Analyze and fix heading hierarchy |
Feature Events
A11yCore emits events when features are enabled or disabled. Use these for analytics or UI synchronization.
// Listen for feature enable
A11yCore.on('featureEnabled', (featureName) => {
console.log('Feature enabled:', featureName);
analytics.track('a11y_feature_enabled', { feature: featureName });
});
// Listen for feature disable
A11yCore.on('featureDisabled', (featureName) => {
console.log('Feature disabled:', featureName);
});
// Remove listener
A11yCore.off('featureEnabled', myHandler);Events fire whenever feature state changes, whether from API calls or user interactions with the widget.