Accessly Toolbar Demo

Test all features of the Accessly Toolbar on this page. Try different configurations and see the toolbar in action.

Demo Info

This page demonstrates all Accessly Toolbar features. The toolbar should appear in the bottom-right corner.

Demo Contents Test
Quick Links
Documentation Pricing Integration Guide

Toolbar Position

Test different toolbar positions by clicking the buttons below:

The toolbar will move to the selected position 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 palette icon in the toolbar

Text & Reading Features

Page Zoom

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

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

Switches to OpenDyslexic font for better readability.

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

Adjusts spacing between lines of text.

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

Interaction Features

Big Cursor

Enlarges the cursor for better visibility.

Test: Click the cursor icon in the toolbar
Reduce Motion

Reduces or removes animations for users sensitive to motion.

Animated Element
Test: Enable "Reduce Motion" in the toolbar to see animations stop
Hide Images

Removes decorative images for faster loading and focus.

Test: Click the image icon in the toolbar

Sample Content for Testing

Understanding Web Accessibility

Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them.

More specifically, people can:

  • Perceive, understand, navigate, and interact with the Web
  • Contribute to the Web
  • Have equal access and opportunity to information

Why Accessibility Matters

Accessibility is essential for developers and organizations that want to create high-quality websites and web tools, and not exclude people from using their products and services.

Tip: Use the toolbar above to test how these features affect content readability.

Image Gallery Test Area

This section contains images that can be hidden using the "Hide Images" feature. Test it by clicking the image icon in the toolbar.

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 Sample image 9 - Colorful Abstract Sample image 10 - Moon

Motion & Animation Test

This carousel demonstrates animations. Enable "Reduce Motion" in the toolbar to see the difference.

Note: Users with vestibular disorders or motion sensitivity may experience discomfort from animations. Always provide a "reduce motion" option.

Voice & Speech Features

Voice Selection

Choose from different voices for text-to-speech functionality.

Test: Open voice settings in the toolbar menu - choose from Female, Male, or Auto (system default) voice options
Speak Hover

Reads text aloud when hovering over elements.

Try it: Enable "Speak Hover" in toolbar, then hover over any text on this page to hear it read aloud.

Testing Instructions

How to Test All Features

  1. Look for the accessibility icon (usually in bottom-right corner)
  2. Click the icon to open the toolbar
  3. Try each feature by clicking its icon
  4. Test combinations of features (e.g., Dark Mode + High Contrast)
  5. Use the API buttons above to test programmatic control
  6. Try different toolbar positions using position buttons above
  7. Check how features affect different content types on this page
Pro Tips
  • Test each feature individually first, then try combinations
  • Pay attention to how features interact with different content types
  • Try the toolbar on different screen sizes (resize your browser)
  • Check browser console (F12) for debugging information if needed