Open Source • Pure Vanilla JavaScript

Make Your Website Inclusive & Accessible For Everyone

Download Back To CSSScript.Com

This interactive playground lets you experience all features of the Accessibility Widget in real-time. Click the floating blue button at the bottom-left corner to begin!

👈 Click the Blue Accessibility Trigger Button at the Bottom Left

Open the accessibility menu to adjust text sizing, switch to Dark Mode, enable Dyslexia-friendly font, or activate the Audio Reader (TTS).

📖 1. Typography & Font Controls

Test the Font Size (+ / -), Dyslexia Font, Line Height, and Text Alignment (Justify / Center) on this section.

"Digital accessibility is not a luxury or an afterthought—it is a fundamental human right for every web user worldwide."

Notice how letter-spacing and word-spacing adapt smoothly when toggled from the widget panel.

🗣️ 2. Voice Assistant (Text-to-Speech)

Activate the Text To Speech button inside the accessibility menu.

👉 Select or highlight this sentence with your mouse, or hover over this test link: Listen To This Automated Narration!

The widget uses the native browser Web Speech API without requiring external server calls or API tokens.

🎨 3. Dark Mode & High Contrast

Experience tailored visual themes for sensitive eyes and low-light environments:

  • Dark Mode: Deep navy slate background with crisp, readable text.
  • Invert Colors: Negative contrast with photo color protection.
  • High Contrast & Monochrome: Sharp boundaries or pure grayscale.

Also try Highlight Title and Highlight Links for fast visual scanning.

🖼️ 4. Hide Images & Freeze Animations

Toggle Hide Images from the menu to remove visual clutter and conceal the sample photo below:

Serene Tropical Beach

Toggle Stop Animations to halt motion effects on this bouncing element:

⚡ Bouncing Motion Box (Stop Animations Test)

🎯 5. Focus Outline & Keyboard Access

Fully compliant with WCAG 2.4.7 (Focus Visible) and WCAG 2.1 (Keyboard Accessible):

  • Keyboard Shortcut: Press Alt + A anywhere to open or close the menu.
  • Focus Outline: Enable in menu, then press Tab to see ultra-bright neon focus rings.
Skip Link

📏 6. Reading Mask & Spotlight

Tailored for neurodiverse users, ADHD, and cognitive ease:

  • Reading Guide: A horizontal guiding ruler tracking the mouse pointer.
  • Reading Mask: Dims the entire page except for a horizontal spotlight slit around your reading line!