Interactive Demo • All Features Unlocked

A11yGo Toolbar Demo

Experience and test all accessibility capabilities live on this interactive sandbox page. Toggle visual, text, motion, and voice options using the floating toolbar.

Live Playground

The A11yGo Toolbar is active on this page. Click the accessibility launcher icon to inspect any feature in real time.

Feature Index
Related Links Documentation License Encoder Plans & Pricing

Toolbar Floating Position

Test the floating launcher in different screen corners and middle positions:

The toolbar will reposition immediately.

Visual Features

Dark Mode

Inverts colors for reduced eye strain in low-light conditions.

Test: Click the dark mode icon in the toolbar
High Contrast

Increases color contrast between text and background.

Test: Click the high contrast icon in the toolbar
Monochrome

Converts all colors to grayscale for colorblind users.

Test: Click the monochrome icon in the toolbar

Text & Reading Features

Page Zoom

Increase or decrease text size smoothly from 100% to 200%.

Test: Use the zoom controls (A⁺ A⁻) in the toolbar
Dyslexic Font

Switches typography to OpenDyslexic font for enhanced readability.

Test: Click the font icon (𝖠) in the toolbar
Line Height

Adjusts line height and vertical paragraph spacing.

Test: Click the line height icon (↕) in the toolbar

Interaction Features

Big Cursor

Enlarges the cursor guide for stronger visibility and tracking.

Test: Click the cursor icon in the toolbar
Reduce Motion

Pauses CSS animations and auto-playing carousel transitions.

Bouncing Live Animation
Test: Enable "Reduce Motion" in toolbar to stop animations
Hide Images

Hides background and decorative images for high focus.

Test: Click the image icon in the toolbar

Sample Content for Reading Tests

Understanding Digital Accessibility

Digital accessibility ensures that websites, mobile applications, and online workflows can be perceived, operated, and understood by everyone.

Accessible digital design provides tangible benefits:

  • Perceivable: Information is presentable in ways users can comprehend (text alternatives, contrast).
  • Operable: Navigation components can be controlled via keyboard, mouse, and assistive touch.
  • Understandable: Clear typography, consistent layout, and readable text structures.
  • Robust: Content is reliably interpreted by screen readers and modern browsers.

Image Gallery Test Area

Use the "Hide Images" button on the toolbar to test instant removal of image elements across this gallery.

Sample image 1 - Cat Sample image 2 - Dog Sample image 3 - Flower Sample image 4 - Mountain Sample image 5 - Ocean Sample image 6 - City Sample image 7 - Forest Path Sample image 8 - Sunset Landscape

Motion & Animation Test

This carousel auto-rotates. Toggle Reduce Motion in the toolbar to freeze animations and stop slides.

Live Animated Banner (Reduce Motion Target)

Voice & Speech Synthesizer

Voice Selection

Select custom synthesizer voices (Female, Male, or Auto default).

Test: Open voice settings in the toolbar to pick speech engine voice
Speak on Hover

Reads paragraph and heading text aloud when hovering with the cursor.

Test: Enable "Speak Hover" in toolbar, then hover over any text

Testing Guide & Tips

Recommended Verification Checklist:
  • Verify that combinations of features (e.g. Dark Mode + Big Cursor + Dyslexic Font) render seamlessly together.
  • Use the Reset All button in the toolbar to immediately restore original styling without page reloads.
  • Check responsiveness across different screen sizes (desktop, tablet, mobile).