enablestack-widget

v1.0.3

Published

11 days ago

Enablestack Widget by enableuser — Enterprise Accessibility Infrastructure. A comprehensive, lightweight accessibility widget that enhances web accessibility for all users. Provides 14+ accessibility features including screen reader support, voice control

Downloads

496

Enablestack Widget

Enterprise Accessibility Infrastructure by enableuser

A comprehensive, zero-dependency accessibility widget that enhances web accessibility for all users. This lightweight, single-file JavaScript solution provides 14+ accessibility features to make any website instantly more inclusive and compliant with WCAG 2.1 AA, Section 508, and EN 301 549 standards.

Note: This widget helps meet accessibility criteria but does not guarantee full compliance. Complete WCAG/Section 508 compliance requires proper HTML semantics, ARIA attributes, manual testing, and user validation.

Supported Languages

English, Deutsch, Espanol, Italiano, Francais, Russkiy, Turkce, al-Arabiyyah, Hindi, Simplified Chinese, Nihongo, Portugues, Bangla, Hangugeo, Tieng Viet, Bahasa Indonesia, Thai, Polski, Nederlands, Ellinika, Svenska, Norsk, Dansk, Suomi, Cestina, Magyar, Romana, Ivrit, Farsi, Urdu, Punjabi, Marathi, Telugu, Tamil, Bahasa Melayu, Filipino

Quick Start

CDN (one line — paste before `</body>`)

<script src="https://cdn.jsdelivr.net/npm/enablestack-widget@latest/widget.js"></script>

npm

npm install enablestack-widget

import 'enablestack-widget';

Framework Usage

React (Vite / CRA)

// App.jsx — import once at the root
import 'enablestack-widget';

export default function App() {
  return <div>Your app here</div>;
}

Next.js (App Router)

Next.js server components don't run in the browser, so wrap the import in a client component:

// components/EnablestackWidget.tsx
'use client';
import 'enablestack-widget';
export default function EnablestackWidget() { return null; }

// app/layout.tsx
import EnablestackWidget from '@/components/EnablestackWidget';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <EnablestackWidget />
      </body>
    </html>
  );
}

Vue

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import 'enablestack-widget';

createApp(App).mount('#app');

Vanilla HTML

<script src="https://cdn.jsdelivr.net/npm/enablestack-widget@latest/widget.js"></script>

Key Features

Visual Enhancements

High Contrast Mode - 3 levels (Medium 1.3x, High 1.5x, Ultra 2.0x) for improved visibility
Text Size Control - 4 size options (Default, Medium 20px, Large 24px, X-Large 28px)
Line Height Adjustment - 3 spacing levels (2em, 3em, 4em) for better readability
Text Spacing - Enhanced letter (0.2em) and word spacing (0.3em)
Text Alignment - Left, Center, or Right alignment options
Bigger Cursor - High-contrast 48x72px cursor with SVG rendering
Hide Images - Text-only mode for focused reading or bandwidth saving

Cognitive Support

Dyslexia-Friendly Font - Comic Sans MS and other dyslexia-optimized fonts
Font Selection - Choose between Arial, Times New Roman, or Verdana
Animation Control - Pause all animations and transitions
Reduced Motion - Motion sensitivity support for vestibular disorders

Assistive Technology

Screen Reader - Built-in text-to-speech using Web Speech API
Voice Control - Hands-free navigation with 15+ voice commands
Color Blindness Filters - Protanopia, Deuteranopia, Tritanopia, and Grayscale modes
Keyboard Navigation - Full Tab/Arrow key support with proper focus indicators

Compliance & Standards

| Feature | WCAG Criteria | EU EN 301 549 | US Section 508 | |---------|---------------|---------------|----------------| | High Contrast Mode | 1.4.3, 1.4.6 | Yes | Yes | | Text Size Adjustment | 1.4.4 | Yes | Yes | | Text Spacing | 1.4.12 | Yes | Yes | | Line Height Adjustment | 1.4.12 | Yes | Yes | | Text Alignment | 1.4.8 | Yes | Yes | | Cursor Enhancement | 2.5.5 | Yes | Yes | | Pause Animations | 2.2.2, 2.3.3 | Yes | Yes | | Reduced Motion | 2.3.3 | Yes | Yes | | Hide Images | 1.1.1 | Yes | Yes | | Dyslexia-Friendly Font | 1.4.8 | Yes | Yes | | Screen Reader | 4.1.3 | Yes | Yes | | Voice Control | Browser API | Partial | Partial | | Color Filters | 1.4.1 | Yes | Yes |

Installation Methods

CDN

<!-- jsDelivr (recommended) -->
<script src="https://cdn.jsdelivr.net/npm/enablestack-widget@latest/widget.js"></script>

<!-- unpkg -->
<script src="https://unpkg.com/enablestack-widget@latest/widget.js"></script>

npm

npm install enablestack-widget

// ES Module
import 'enablestack-widget';

// CommonJS
require('enablestack-widget');

Direct Download

Download widget.js from npm or GitHub
Include in your HTML:

<script src="path/to/widget.js"></script>

Configuration

Zero Configuration (works out of the box)

<script src="https://cdn.jsdelivr.net/npm/enablestack-widget@latest/widget.js"></script>

Custom Configuration

Define window.ENABLESTACK_CONFIG before loading the script:

<script>
window.ENABLESTACK_CONFIG = {
  // Disable specific features
  enableVoiceControl: false,
  enableScreenReader: true,

  // Custom styling
  widgetWidth: '400px',
  colors: {
    primary: '#330064',
    secondary: '#ffffff'
  },

  // Position
  widgetPosition: {
    side: 'left',
    left: '20px',
    bottom: '20px'
  }
};
</script>
<script src="https://cdn.jsdelivr.net/npm/enablestack-widget@latest/widget.js"></script>

Full Configuration Options

window.ENABLESTACK_CONFIG = {
  // ===== Core Feature Toggles =====
  enableHighContrast: true,        // 3-level high contrast mode
  enableBiggerText: true,          // 4-level text size control
  enableTextSpacing: true,         // 3-level text spacing
  enablePauseAnimations: true,     // Pause animations & reduced motion
  enableHideImages: true,          // Hide images toggle
  enableDyslexiaFont: true,        // Dyslexia-friendly fonts
  enableBiggerCursor: true,        // Large cursor
  enableLineHeight: true,          // 3-level line height (2em, 3em, 4em)
  enableTextAlign: true,           // Text alignment (left, center, right)

  // ===== Advanced Features =====
  enableScreenReader: true,        // Built-in text-to-speech
  enableVoiceControl: true,        // Voice command control
  enableFontSelection: true,       // Font family selection
  enableColorFilter: true,         // Color blindness filters

  // ===== Widget Layout =====
  widgetWidth: '440px',

  // ===== Grid Configuration =====
  gridLayout: {
    columns: '1fr 1fr',            // Default 2-column grid
    gap: '10px'                    // Gap between grid items
  },

  // ===== Position =====
  widgetPosition: {
    side: 'left',                  // 'left' or 'right'
    right: '20px',
    left: '20px',
    bottom: '20px'
  },

  // ===== Colors =====
  colors: {
    primary: '#330064',            // Header bg, main button, active borders
    secondary: '#ffffff',          // Main button icon, header text
    optionBg: '#ffffff',           // Option button background
    optionText: '#333333',         // Option button text
    optionIcon: '#000000'          // Option button icons
  },

  // ===== Button Styling =====
  button: {
    size: '55px',
    borderRadius: '100px',
    iconSize: '40px',
    shadow: '0 4px 8px rgba(0, 0, 0, 0.2)'
  },

  // ===== Menu Styling =====
  menu: {
    headerHeight: '70px',
    padding: '0 10px 10px 10px',
    optionPadding: '20px 10px',
    optionMargin: '10px',
    borderRadius: '8px',
    fontSize: '16px',
    titleFontSize: '16px',
    closeButtonSize: '44px'
  },

  // ===== Typography =====
  typography: {
    fontFamily: 'Arial, sans-serif',
    fontSize: '17px',
    titleFontSize: '22px',
    titleFontWeight: '700',
    lineHeight: '1'
  },

  // ===== Animation =====
  animation: {
    transition: '0.2s',
    hoverScale: '1.05'
  },

  // ===== Internationalization (i18n) =====
  lang: {
    accessibilityMenu: 'Accessibility Menu',
    closeAccessibilityMenu: 'Close Accessibility Menu',
    accessibilityTools: 'Accessibility Tools',
    resetAllSettings: 'Reset All Settings',
    screenReader: 'Screen Reader',
    voiceCommand: 'Voice Command',
    textSpacing: 'Text Spacing',
    pauseAnimations: 'Pause Animations',
    hideImages: 'Hide Images',
    dyslexiaFriendly: 'Dyslexia Friendly',
    biggerCursor: 'Bigger Cursor',
    lineHeight: 'Line Height',
    fontSelection: 'Font Selection',
    colorFilter: 'Color Filter',
    textAlign: 'Text Align',
    textSize: 'Text Size',
    highContrast: 'High Contrast',
    defaultFont: 'Default Font',
    noFilter: 'No Filter',
    default: 'Default',
    screenReaderOn: 'Screen reader on',
    screenReaderOff: 'Screen reader off',
    voiceControlActivated: 'Voice control activated',
    notSupportedBrowser: 'is not supported in this browser',
    close: 'Close',
    reset: 'Reset',
    saturation: 'Saturation',
    selectLanguage: 'Select Language'
  },

  // ===== Voice Commands =====
  voiceCommands: {
    en: {
      showMenu: ['show menu', 'open menu', 'accessibility menu'],
      highContrast: ['high contrast', 'contrast', 'dark mode'],
      biggerText: ['bigger text', 'large text', 'text size'],
      textSpacing: ['text spacing', 'spacing'],
      pauseAnimations: ['pause animations', 'stop animations'],
      hideImages: ['hide images', 'remove images'],
      dyslexiaFont: ['dyslexia friendly', 'dyslexia font'],
      biggerCursor: ['bigger cursor', 'large cursor'],
      lineHeight: ['line height', 'line spacing'],
      textAlign: ['align text', 'text align'],
      screenReader: ['screen reader', 'read aloud'],
      voiceControl: ['voice command', 'voice control'],
      resetAll: ['reset all', 'reset everything', 'clear all']
    }
  }
};

Voice Commands

When voice control is enabled (Chrome/Edge only):

| Command | Action | |---------|--------| | "show menu" / "open menu" | Opens accessibility menu | | "high contrast" | Toggles contrast mode | | "bigger text" / "large text" | Increases text size | | "text spacing" | Toggles text spacing | | "pause animations" | Stops all animations | | "hide images" | Removes images | | "dyslexia font" | Activates dyslexia-friendly font | | "bigger cursor" | Enlarges cursor | | "line height" | Adjusts line spacing | | "screen reader" | Activates text-to-speech | | "reset all" | Resets all settings |

All commands are fully customizable via the voiceCommands configuration.

Technical Highlights

Zero Dependencies - Pure vanilla JavaScript, no frameworks required
SSR Safe - Safely no-ops in Node.js/SSR environments (Next.js, Nuxt, etc.)
Lightweight - Single file, under 200KB
Persistent Settings - localStorage saves user preferences across sessions
Keyboard Accessible - Full Tab/Arrow key navigation with focus management
ARIA Compliant - Complete ARIA labels and roles
Performance Optimized - DOM caching, efficient event delegation, debounced updates
Shadow DOM - Widget styles are fully encapsulated, won't conflict with your site
Responsive - Works on desktop, tablet, and mobile
35+ Languages - Auto-detects browser language with full i18n support
Auto-initialization - Loads when DOM is ready, no setup code needed

Browser Compatibility

| Browser | Core Features | Screen Reader | Voice Control | |---------|---------------|---------------|---------------| | Chrome 90+ | Yes | Yes | Yes | | Edge 90+ | Yes | Yes | Yes | | Firefox 88+ | Yes | Yes | No | | Safari 14+ | Yes | Yes | No | | Opera 76+ | Yes | Yes | Yes |

Voice Control requires Web Speech Recognition API (Chromium-based browsers only).

Usage Examples

Minimal HTML Page

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Accessible Website</title>
</head>
<body>
    <h1>Welcome</h1>
    <p>This site is fully accessible.</p>

    <script src="https://cdn.jsdelivr.net/npm/enablestack-widget@latest/widget.js"></script>
</body>
</html>

Custom Themed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Custom Theme</title>
</head>
<body>
    <h1>Custom Accessibility</h1>

    <script>
    window.ENABLESTACK_CONFIG = {
      widgetWidth: '380px',
      colors: {
        primary: '#330064',
        secondary: '#ffffff'
      },
      enableVoiceControl: false,
      widgetPosition: {
        side: 'left',
        left: '15px',
        bottom: '15px'
      }
    };
    </script>
    <script src="https://cdn.jsdelivr.net/npm/enablestack-widget@latest/widget.js"></script>
</body>
</html>

License

GPL-3.0 License - See LICENSE file for details.

Author

enableuser - Enterprise Accessibility Infrastructure

Website: enableuser.com
GitHub: github.com/enableuser
npm: npmjs.com/package/enablestack-widget

Built for a more accessible web by enableuser