A11yControl — The Accessibility Standard for Humans & Agents

// 01. Capabilities

13 Calibrated Assistive Instruments

Engineered to satisfy WCAG 2.1 AA and AAA criteria. Click any instrument card to toggle it in real time on this document.

🔡 1.4.4 AA

Font Size Scaler

Scales document typography from 80% to 200% in 10% increments with dynamic screen reader live announcements.

🎙️ WCAG 1.2.1

Text-to-Speech + Karaoke

On-demand lazy-loaded Web Speech API integration with voice console, rate selection, language cascade, and live streaming karaoke.

📐 1.4.12 AA

Text Spacing

Increases line height (1.6), letter spacing (0.12em), and word spacing (0.16em) to assist low vision and dyslexia.

📏 1.4.8 AAA

Align Left (Unjustify)

Eliminates text justification and automatic hyphenation to remove distracting white rivers for cognitive focus.

🎯 Motor / Vision

High-Contrast Cursor

Universal 32x32px black pointer with crisp white border ensuring continuous visibility on all backgrounds.

🔲 Cognitive Focus

Reading Mask

Dims the page with a clear focal horizontal slit following the mouse or touch to eliminate sensory clutter.

➖ 1.4.8 AAA

Reading Guide

A high-visibility horizontal ruler tracking the pointer to maintain vertical position while reading dense text.

🔤 Cognitive

OpenDyslexic Font

Applies a resilient dyslexia-optimized font stack ('OpenDyslexic', 'Comic Sans MS', 'Lexend', Arial) without external network requests (100% CSP safe).

🌓 1.4.6 AAA

High Contrast Filter

Boosts document luminance contrast ratio and sharpens media elements for users with severe visual impairments.

⚪ 1.4.1 Use of Color

Monochrome / Grayscale

Eliminates color dependence to verify information hierarchy and assist users with monochromatic vision.

🔗 2.4.7 Focus Visible

Highlight Links

Applies high-visibility underlines and contrasting badge halos to interactive anchors across the page.

⚡ 2.3.3 AAA

Reduce Motion

Disables CSS transitions, parallax transforms, and video autoplay for vestibular disorders and motion sickness.

🌙 Photophobia

Dark Mode Theme

Converts document background to deep slate while protecting typography contrast and preserving photo fidelity.

// 02. Reading Lounge

Interactive Verification Playground

Test text-to-speech selection, multilingual speech recognition, text spacing, and contrast filters on realistic content.

Assistive Technology & Modern Frontends

Highlight this sentence to test Speech Karaoke: When Text-to-Speech is enabled, selecting any phrase summons a non-intrusive "Listen" action bubble. Clicking it begins reading aloud with a synchronized streaming karaoke dock!

Multilingual Detection Test:

Surlignez ce passage balisé en français : « L'accessibilité numérique garantit l'équité d'accès aux technologies pour chaque individu, sans barrière physique ou cognitive. » — Le moteur détecte automatiquement l'attribut lang="fr" et sélectionne la voix adéquate !

This paragraph has justified alignment. Observe how activating "Align Left" removes rigid justification and irregular whitespace, easing cognitive tracking. Simultaneously, "Text Spacing" expands line height and letter kerning without breaking layout containers.

Test graphic for high contrast and grayscale filters

// 03. Studio Telemetry

JavaScript API & Live Event Bus

Inspect programmatic hooks, trigger audits, and observe composed custom events passing through the Shadow DOM boundary.

a11y-event-bus.stream • active

// Listening for composed events on window: // - a11y-open // - a11y-close // - a11y-change { key, value, prefs } // - a11y-reset

// 04. Integration

Zero Configuration Installation

Drop the CDN script, install via npm, or configure modular feature gating. Full TypeScript definitions and AI Agent manifests included.

<!-- Option A: Zero-Code Auto-Mount in 1 line (Shopify, WordPress, Webflow, HTML) -->
<script type="module" src="https://cdn.jsdelivr.net/npm/a11y-control" data-auto-mount></script>

<!-- Option B: Standard Custom Element tag -->
<script type="module" src="https://cdn.jsdelivr.net/npm/a11y-control"></script>
<a11y-control lang="en" position="bottom-right"></a11y-control>

# Install via package manager
npm install a11y-control

// In your React, Vue, Svelte, or Vite entry point
import 'a11y-control';

// Or programmatically with the init helper:
import { initA11yControl } from 'a11y-control';
initA11yControl({ position: 'bottom-right', lang: 'en' });

// Or import the class directly for TypeScript / subclassing:
import { A11yControl } from 'a11y-control';

<!-- 1. Whitelist mode: only render specified assistive tools -->
<a11y-control features="fontSize, textSpacing, dyslexiaFont, readingGuide"></a11y-control>

<!-- 2. Blacklist mode: exclude tools your site already has (e.g. existing theme switch) -->
<a11y-control exclude="darkMode"></a11y-control>

<!-- 3. Audio-only setup: speech synthesis reader widget -->
<a11y-control features="speechSynthesis"></a11y-control>

<!-- 4. Dynamic JavaScript reactivity (updates instantly without page reload) -->
<script>
  const a11y = document.querySelector('a11y-control');
  a11y.setAttribute('exclude', 'darkMode, grayscale');
</script>

<!-- Instant Zero-FOUC anti-flicker snippet (paste inside <head>) -->
<script>
  (function(){try{
    var p=JSON.parse(localStorage.getItem('a11y-prefs')||'{}');
    if(p.darkMode)document.documentElement.classList.add('a11y-dark-mode');
    if(p.highContrast)document.documentElement.classList.add('a11y-high-contrast');
    if(p.fontScale&&p.fontScale!==1)document.documentElement.style.fontSize=(p.fontScale*100)+'%';
  }catch(e){}})();
</script>

# llms.txt & Agent Skill
- Technical Manifest: /llms.txt
- Antigravity / Cursor Skill: _agent/skills/accessibility-integration/SKILL.md

// AI Tool Calling Schema:
{
  "name": "a11y_set_preference",
  "description": "Sets an accessibility preference on window.a11y",
  "parameters": {
    "type": "object",
    "properties": {
      "key": {
        "type": "string",
        "enum": [
          "fontScale", "highContrast", "grayscale", "dyslexiaFont",
          "textSpacing", "alignLeft", "bigCursor", "readingGuide",
          "readingMask", "reduceMotion", "highlightLinks", "speechSynthesis", "darkMode"
        ]
      },
      "value": { "type": ["boolean", "number"] }
    },
    "required": ["key", "value"]
  }
}

// 05. Standards Compliance

WCAG 2.1 Criteria Coverage

1.2.1 AA Audio Description / TTS

1.3.1 AAA Semantic Heading Hierarchy (<h3>)

1.4.3 AA Contrast (Minimum 4.5:1)

1.4.4 AA Resize Text to 200%

1.4.6 AAA Contrast (Enhanced 7:1)

1.4.8 AAA Visual Presentation

1.4.11 AA Non-text Contrast (> 3:1)

1.4.12 AA Text Spacing Override

2.1.1 AA Keyboard Navigation

2.1.2 AA No Keyboard Trap & Modal Focus

2.3.3 AAA Animation from Interaction

2.4.7 AA Focus Visible Halos

4.1.2 AA Name, Role, Value (ARIA)