Testing Visua11y Agent Accessibility Widget

Use this page to manually verify accessibility tools, widget placement, screen reader, and voice navigation behaviour. Build the project first with npm run build so the script in dist/ is up-to-date.

Feature Playground

Use the widget controls to explore each accessibility feature. Each card below highlights behaviours you can validate directly on this page.

Multilingual UI

  • Open the language picker in the widget and switch between bundled locales.
  • Use the custom registration action below to add Bahasa Indonesia on the fly.

Content Adjustments

  • Adjust font size, letter spacing, and line height to test copy reflow.
  • Toggle dyslexia-friendly text and highlight links for quick scanning.

Color & Contrast

  • Compare high-contrast presets, monochrome, and custom palette selections.
  • Verify headings, backgrounds, and body text remain legible after tweaks.

Reading & Focus Tools

  • Enable the reading guide overlay while navigating this content.
  • Trigger text-to-speech or screen reader helper on selected passages.

Motion & Cursor

  • Stop animations to freeze the shimmering cards and calm the layout.
  • Activate the oversized cursor to confirm pointer visibility.

Widget Customization

  • Move the launcher to every supported corner using the widget settings.
  • Apply icon changes via the helper controls demonstrated below.

Motion Stress Test

The cards below intentionally animate so you can confirm the widget's Stop Animations control halts motion on this page. Toggle the tool on and both experiences should immediately freeze.

Shimmering Spotlight

This card uses a sweeping highlight animation. When Stop Animations is active, the glow should pause instead of sliding endlessly.

CSS animation: linear gradient shimmer.

A decorative orb orbits the dashed track while pulsing. Enabling Stop Animations should freeze the dot and calm the orbit effect.

CSS animations: orbiting dot and dashed pulse.

Image Desaturation Testbed

Scroll the widget to Motion & Cursor and toggle Image Desaturation. The colourful assets below should switch to grayscale instantly; turn the setting off to restore the original hues.

Visua11y Agent hero banner with gradient background and illustration
Expect the banner illustration to lose its purple/blue gradient and appear black and white.
Vibrant gradient pattern sample
This synthetic gradient highlights how saturation drops across complex colour blends.

Developer Hooks & APIs

After the bundle loads it exposes window.Visua11yAgentPlugin so you can wire the widget to your app. Try the helpers below or trigger them manually from the browser console.

Launcher Icon

Swap the floating button icon using setIcon.

Language Switcher

Switch locales at runtime via changeLanguage.

Custom Translation

Register a bespoke locale with registerLanguage.

The dictionary contains a small subset of labels—extend it from the console to experiment.

Manual Checklist

  1. Open the widget and move the launcher to each supported corner.
  2. Apply typography adjustments and verify the text wraps cleanly.
  3. Test high-contrast, monochrome, and custom color palette modes.
  4. Toggle Image Desaturation and confirm the banner and gradient art become grayscale.
  5. Enable the reading guide, screen reader helper, and text-to-speech.
  6. Activate voice navigation and issue commands like “Open menu”.
  7. Use the helper controls to change the icon and switch languages.
  8. Register the Bahasa Indonesia locale and confirm new labels appear.
  9. Refresh the page to ensure your settings persist in local storage.