AccessibleWeb Widget Demo

This page demonstrates the AccessibleWeb Widget. Look for the accessibility button in the bottom-left corner of your screen.

⚠️ Important: This widget provides user preference controls only (similar to browser settings). It does NOT make your website accessible or ensure compliance with WCAG, ADA, or other accessibility standards.

Proper accessibility must be built into your website's code. This tool is not an automated "overlay" solution. Learn more: Overlay Factsheet | Full Disclaimer

Available Features

Content Adjustments

  • Increase text size (3 levels)
  • Bold text
  • Adjust line spacing
  • Adjust letter spacing
  • Dyslexia-friendly font
  • Hide images

Color Adjustments

  • Dark contrast
  • Light contrast
  • Invert colors
  • High saturation
  • Low saturation
  • Monochrome

Navigation Tools

  • Highlight links
  • Highlight headings
  • Large cursor
  • Reading guide
  • Stop animations

Test Content

This is a paragraph of text to test the various accessibility features. Try enabling different options from the accessibility menu to see how they affect this content.

Here's a link to test the link highlighting feature, and here's another link to see how multiple links are styled.

Subheading for Testing

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Implementation

To add this widget to your own website, simply add this script tag before the closing </body> tag:

<script src="https://cdn.jsdelivr.net/gh/ifrederico/accessible-web-widget@latest/dist/accessible-web-widget.min.js"></script>

The widget will automatically initialize and appear on your page.