Reading Guide Tool

The Reading Guide Tool provides a horizontal visual guide that helps users track their reading position on web pages. This tool is particularly helpful for users with dyslexia, attention difficulties, or visual processing challenges.

Features

• Visual Line Tracking: Displays a horizontal line with arrow indicator that follows cursor movement
• Automatic Positioning: Follows mouse movement in real-time for precise line tracking
• Non-Intrusive Design: Semi-transparent design that doesn't interfere with content readability
• Desktop Only: Requires mouse cursor movement - not available on mobile or touch devices

Settings

The Reading Guide tool has a simple on/off toggle:

Level	Description
Disabled	Reading guide is hidden
Enabled	Shows horizontal guide line with arrow following mouse cursor

Usage

1. Click the Reading Guide button in the accessibility toolbar
2. Move your mouse cursor over any content to see the guide line follow
3. The guide automatically positions itself at your cursor location
4. Click the button again to disable

Accessibility Benefits

• Dyslexia Support: Helps maintain line focus while reading
• ADHD Assistance: Reduces distractions by providing clear reading focus
• Visual Tracking: Aids users with visual processing difficulties
• Reading Comprehension: Improves text navigation and reduces reading fatigue

Technical Implementation

The tool uses CSS positioning and JavaScript mouse event listeners to track cursor movement and dynamically position the guide line with arrow indicator in real-time.

API Usage Example

The Reading Guide tool can be programmatically controlled using the widget API. Here's how to enable and control the tool:

// Basic activation
window.BrowseAidWidget.api.enableTool('reading-guide');

// Enable with settings
window.BrowseAidWidget.api.enableTool('reading-guide', {
  enabled: true
});

// Update tool settings
window.BrowseAidWidget.api.updateTool('reading-guide', {
  enabled: true
});

// Toggle the tool on/off
const isEnabled = window.BrowseAidWidget.api.toggleTool('reading-guide');
console.log('Reading Guide is now:', isEnabled ? 'enabled' : 'disabled');

// Get current settings
const settings = window.BrowseAidWidget.api.getToolState('reading-guide');
console.log('Current Reading Guide settings:', settings);

// Disable the tool
window.BrowseAidWidget.api.disableTool('reading-guide');

// Listen for tool changes
const unsubscribe = window.BrowseAidWidget.api.onToolChange((toolName, settings) => {
  if (toolName === 'reading-guide') {
    console.log('Reading Guide settings changed:', settings);
  }
});

Configuration Options

Option	Type	Range	Default	Description
enabled	boolean	true/false	false	Enables or disables the reading guide tool

Device Compatibility

The Reading Guide tool requires mouse cursor movement and is not supported on mobile devices or touch interfaces. The tool will be automatically disabled on devices without cursor support.