Big Cursor Tool

Overview

The Big Cursor tool provides enhanced cursor visibility with larger, high-contrast cursor options. This tool helps users with visual impairments, motor difficulties, or those who have trouble tracking the standard cursor on screen.

Features

• Multiple Cursor Styles: Large black and white cursor variants for different backgrounds
• High Contrast: Enhanced visibility cursors with drop shadows for improved contrast
• Desktop Only: Optimized for desktop environments with cursor interaction (not supported on mobile/touch devices)
• Instant Application: Immediate cursor replacement without page reload
• Universal Coverage: Works across all page elements and interactive areas
• Interactive Element Support: Special hand cursors for buttons, links, and clickable elements

Settings

Level	Description
Default	Standard system cursor
Black	Large black cursor with white outline for light backgrounds
White	Large white cursor with black outline for dark backgrounds

Usage

1. Click the Big Cursor button in the accessibility toolbar
2. Navigate through cursor options using the stepper controls:
   • Step 1: Black cursor (large black arrow with white outline)
   • Step 2: White cursor (large white arrow with black outline)
3. The cursor immediately changes to the selected style
4. Interactive elements (buttons, links) automatically use appropriate hand cursors
5. Return to default cursor by cycling back to the first option

Accessibility Benefits

• Visual Impairments: Larger cursor is easier to locate on screen
• Motor Difficulties: Enhanced target for users with limited motor control
• Cognitive Support: More visible cursor reduces confusion and improves interaction
• Age-Related Changes: Helps users with decreased visual acuity
• Screen Distance: Useful when viewing screens from a distance
• High Resolution Displays: Cursor remains visible on high-DPI screens
• Background Contrast: Different colors work better on various page backgrounds

Cursor Styles

Black Cursor

• Best For: Light backgrounds and high contrast needs
• Size: Approximately 48x48 pixels (2x larger than standard)
• Design: Black arrow with white outline and drop shadow
• Interactive Elements: Uses large black hand cursor for clickable items

White Cursor

• Best For: Dark backgrounds and dark mode interfaces
• Size: Approximately 48x48 pixels (2x larger than standard)
• Design: White arrow with black outline and drop shadow
• Interactive Elements: Uses large white hand cursor for clickable items

Technical Implementation

Uses CSS cursor property with custom SVG cursors encoded as data URIs. Applies cursor styles universally across all page elements with specific hand cursors for interactive elements like buttons, links, and form controls.

API Usage Example

The Big Cursor tool can be programmatically controlled using the widget API:

// Basic activation (enables black cursor by default)
window.BrowseAidWidget.api.enableTool('big-cursor');

// Enable with specific cursor type
window.BrowseAidWidget.api.enableTool('big-cursor', {
  enabled: true,
  level: 'white'    // Options: 'default', 'black', 'white'
});

// Update tool settings
window.BrowseAidWidget.api.updateTool('big-cursor', {
  enabled: true,
  level: 'black'    // Switch to black cursor
});

// Toggle the tool on/off (cycles through cursor types)
const isEnabled = window.BrowseAidWidget.api.toggleTool('big-cursor');
console.log('Big Cursor is now:', isEnabled ? 'enabled' : 'disabled');

// Get current settings
const settings = window.BrowseAidWidget.api.getToolState('big-cursor');
console.log('Current Big Cursor settings:', settings);

// Disable the tool (return to default cursor)
window.BrowseAidWidget.api.disableTool('big-cursor');

// Listen for tool changes
const unsubscribe = window.BrowseAidWidget.api.onToolChange((toolName, settings) => {
  if (toolName === 'big-cursor') {
    console.log('Big Cursor settings changed:', settings);
    console.log('Current cursor type:', settings.level);
  }
});

Configuration Options

Option	Type	Values	Default	Description
enabled	boolean	true/false	false	Enables or disables the tool
level	string	'default', 'black', 'white'	'default'	Cursor type selection

Level Examples

• 'default' - Standard system cursor
• 'black' - Large black cursor with white outline for light backgrounds
• 'white' - Large white cursor with black outline for dark backgrounds

Usage Patterns

// Adaptive cursor based on page background
function setAdaptiveCursor() {
  const backgroundColor = window.getComputedStyle(document.body).backgroundColor;
  const isDarkBackground = isColorDark(backgroundColor);

  const cursorType = isDarkBackground ? 'white' : 'black';
  window.BrowseAidWidget.api.enableTool('big-cursor', {
    enabled: true,
    level: cursorType
  });
}

// Visual impairment profile
const visualProfile = {
  'low-vision': 'black',      // High contrast black cursor
  'mild-impairment': 'black', // Standard large cursor
  'normal': 'default'         // System cursor
};

function setCursorForVision(profile) {
  const cursorLevel = visualProfile[profile] || 'default';
  if (cursorLevel === 'default') {
    window.BrowseAidWidget.api.disableTool('big-cursor');
  } else {
    window.BrowseAidWidget.api.enableTool('big-cursor', {
      enabled: true,
      level: cursorLevel
    });
  }
}

// Environment-based cursor selection
function setCursorForEnvironment(environment) {
  let cursorSettings;

  switch (environment) {
    case 'presentation':
      // Large cursor for presentations
      cursorSettings = { enabled: true, level: 'black' };
      break;
    case 'dark-mode':
      // White cursor for dark interfaces
      cursorSettings = { enabled: true, level: 'white' };
      break;
    case 'high-contrast':
      // Black cursor for maximum visibility
      cursorSettings = { enabled: true, level: 'black' };
      break;
    default:
      cursorSettings = { enabled: false, level: 'default' };
  }

  window.BrowseAidWidget.api.updateTool('big-cursor', cursorSettings);
}

// Helper function to determine if a color is dark
function isColorDark(color) {
  // Simple luminance calculation
  const rgb = color.match(/\d+/g);
  if (!rgb) return false;

  const luminance = (parseInt(rgb[0]) * 0.299 + parseInt(rgb[1]) * 0.587 + parseInt(rgb[2]) * 0.114);
  return luminance < 128;
}

// Toggle between cursor types
function cycleCursorType() {
  const currentSettings = window.BrowseAidWidget.api.getToolState('big-cursor');
  const currentLevel = currentSettings.level || 'default';

  const levels = ['default', 'black', 'white'];
  const currentIndex = levels.indexOf(currentLevel);
  const nextLevel = levels[(currentIndex + 1) % levels.length];

  if (nextLevel === 'default') {
    window.BrowseAidWidget.api.disableTool('big-cursor');
  } else {
    window.BrowseAidWidget.api.enableTool('big-cursor', {
      enabled: true,
      level: nextLevel
    });
  }

  console.log(`Cursor changed to: ${nextLevel}`);
}

Mobile Support

This tool is not supported on mobile devices as touch interfaces do not use cursors. The tool will be automatically disabled or hidden on mobile/touch devices.