Accessibility Widget Playground

The accessibility widget is active on this page. Click the floating button in the bottom-left corner or press Alt + A to open settings.

Keyboard Shortcut: Press Alt + A to toggle the accessibility panel. Press Escape to close it.

Sample Text Content

Test the Text Adjustments

This is sample text that demonstrates the text adjustment features. Try changing the font size, line height, letter spacing, and word spacing using the accessibility panel.

You can also test different font families including Arial, Verdana, Georgia, Times New Roman, Courier, and OpenDyslexic which is designed for readers with dyslexia.

The text alignment feature lets you align all text to the left, center, or right, which can help some users read more comfortably.

Links and Headings

Main Heading (H2)

This section contains multiple links like this one and another link here to test the link highlighting feature.

Subheading (H3)

When you enable "Highlight Headings", all headings will have a blue background and left border to make the document structure clearer.

Another Subheading (H4)

Here's one more link to demonstrate how highlighted links appear throughout the content.

Visual Adjustments Demo

Test Visual Modes

Use the accessibility panel to test these visual adjustments:

  • High Contrast: Increases the contrast of the entire page
  • Invert Colors: Inverts all colors (images are inverted back)
  • Grayscale: Removes all color from the page
  • Low/High Saturation: Adjusts color intensity
Sample image 1 Sample image 2 Sample image 3 Sample image 4

The images above demonstrate the "Hide Images" feature which fades out images.

Reading Aids

Reading Guide and Mask

The reading aids help users track their position while reading:

Reading Guide: A horizontal yellow bar that follows your mouse cursor, making it easier to track which line you're reading. This is particularly helpful for users with dyslexia or attention difficulties.

Reading Mask: Darkens everything except a horizontal strip around your cursor, creating a focus area. This helps reduce visual distractions and keeps attention on the current line.

Big Cursor: Enlarges the mouse cursor to make it more visible on screen. This helps users who have difficulty tracking the cursor position.

Focus Indicator: Adds a prominent orange outline to focused elements, making keyboard navigation much more visible. This is essential for users who navigate with keyboards.

Quick Controls

Use these buttons to quickly test features:

Button Position

Move the floating button to any corner of the screen:

You can also set the position via data attribute on the script tag: <script src="accessibility-widget.js" data-position="bottom-right"></script>

Text-to-Speech

Enable the Read Aloud feature to have page content spoken aloud. When enabled, you can click any text to hear it read, or use the play button to read the entire page.

Tip: When TTS is enabled, click on any paragraph on this page to have it read aloud. The clicked text will be highlighted while being read.

Page Zoom

Zoom the entire page up to 400% for users who need larger content. This scales everything - text, images, and layout.

Note: The accessibility widget button and panel remain at their normal size for easy access while zoomed.

Form Elements

Interactive Elements

Test accessibility features with these form elements. Use the Focus Indicator feature to see enhanced focus styles.