Link Highlighter Tool

Overview

The Link Highlighter tool enhances the visibility of all links on the page by applying high-contrast styling and visual indicators. This tool helps users quickly identify clickable elements and improves navigation accessibility for users with visual impairments or cognitive difficulties.

Features

• Enhanced Link Visibility: Applies high-contrast colors and bold styling to all links
• Visual Indicators: Adds distinctive borders and background colors
• Universal Coverage: Affects all link types including text links, buttons, and navigation
• Hover Enhancement: Provides clear visual feedback on link interaction
• Focus Improvement: Enhances keyboard navigation with better focus indicators

Settings

Level	Description
Disabled	Links display with original website styling
Enabled	All links highlighted with enhanced visibility styling

Usage

1. Click the Link Highlighter button in the accessibility toolbar
2. All links on the page immediately receive enhanced styling
3. Links become more visible with high-contrast colors and borders
4. Hover and focus states provide clear interactive feedback
5. Click the button again to return to original link styling

Accessibility Benefits

• Visual Impairment Support: Makes links more visible for users with low vision
• Cognitive Assistance: Helps users with cognitive disabilities identify interactive elements
• Navigation Enhancement: Improves overall page navigation and usability
• Color Vision Support: Uses high-contrast combinations that work for colorblind users
• Keyboard Navigation: Enhanced focus indicators improve keyboard accessibility
• Reading Assistance: Helps distinguish links from regular text content

Visual Enhancements

Link Styling

• High Contrast Colors: Bold, easily distinguishable link colors
• Background Highlighting: Subtle background colors for better visibility
• Border Indicators: Clear borders to define clickable areas
• Typography Enhancement: Bold or underlined text for emphasis

Interactive States

• Hover Effects: Clear visual feedback when mouse hovers over links
• Focus Indicators: Enhanced keyboard focus with high-contrast outlines
• Active States: Visual confirmation when links are clicked
• Visited Links: Distinct styling for previously visited links

Technical Implementation

Applies CSS styling overrides to all anchor elements and interactive components. Uses !important declarations to ensure styling takes precedence over existing website styles while maintaining accessibility standards.

API Usage Example

The Link Highlighter tool can be programmatically controlled using the widget API. Here's how to enable and customize the tool:

// Basic activation
window.BrowseAidWidget.api.enableTool('link-highlighter');

// Enable with custom settings
window.BrowseAidWidget.api.enableTool('link-highlighter', {
  highlightColor: '#0066cc',     // Link highlight color (default: '#0066cc')
  backgroundColor: '#f0f8ff',    // Link background color (default: '#f0f8ff')
  borderWidth: 2,                // Border thickness in pixels (default: 1)
  underlineStyle: 'solid'        // Underline style: 'solid', 'dashed', 'dotted' (default: 'solid')
});

// Update tool settings
window.BrowseAidWidget.api.updateTool('link-highlighter', {
  enabled: true,
  highlightColor: '#ff6600',     // Orange highlight color
  backgroundColor: '#fff8f0',    // Light orange background
  borderWidth: 3,                // Thicker borders
  underlineStyle: 'dashed'       // Dashed underlines
});

// Toggle the tool on/off
const isEnabled = window.BrowseAidWidget.api.toggleTool('link-highlighter');
console.log('Link Highlighter is now:', isEnabled ? 'enabled' : 'disabled');

// Get current settings
const settings = window.BrowseAidWidget.api.getToolState('link-highlighter');
console.log('Current Link Highlighter settings:', settings);

// Disable the tool
window.BrowseAidWidget.api.disableTool('link-highlighter');

// Listen for tool changes
const unsubscribe = window.BrowseAidWidget.api.onToolChange((toolName, settings) => {
  if (toolName === 'link-highlighter') {
    console.log('Link Highlighter settings changed:', settings);
  }
});

Configuration Options

Option	Type	Values	Default	Description
enabled	boolean	true/false	false	Enables or disables the tool
highlightColor	string	Any CSS color	'#0066cc'	Color for link text
backgroundColor	string	Any CSS color	'#f0f8ff'	Background color for links
borderWidth	number	1 - 5	1	Border thickness in pixels
underlineStyle	string	'solid', 'dashed', 'dotted', 'double'	'solid'	Underline style

Color Examples

• highlightColor: '#0066cc' - Blue (standard web link color)
• highlightColor: '#cc6600' - Orange (high visibility)
• highlightColor: '#009900' - Green (alternative contrast)
• backgroundColor: '#ffff99' - Yellow background for maximum visibility

Border Examples

• borderWidth: 1 - Subtle border outline
• borderWidth: 2 - Standard visible border
• borderWidth: 3 - Thick border for better visibility
• borderWidth: 5 - Extra thick for severe visual impairments

Usage Patterns

// Vision profile-based highlighting
const visionProfiles = {
  'low-vision': {
    highlightColor: '#ffffff',
    backgroundColor: '#000066',
    borderWidth: 3,
    underlineStyle: 'solid'
  },
  'color-blind': {
    highlightColor: '#000000',
    backgroundColor: '#ffff00',
    borderWidth: 2,
    underlineStyle: 'double'
  },
  'standard': {
    highlightColor: '#0066cc',
    backgroundColor: '#f0f8ff',
    borderWidth: 1,
    underlineStyle: 'solid'
  }
};

function setLinkHighlightingForVision(profile) {
  const settings = visionProfiles[profile] || visionProfiles['standard'];
  window.BrowseAidWidget.api.updateTool('link-highlighter', {
    enabled: true,
    ...settings
  });
}

// Context-sensitive highlighting
function setLinkHighlightingForContent(contentType) {
  let settings;

  switch (contentType) {
    case 'dense-text':
      // Heavy highlighting for text-heavy pages
      settings = {
        highlightColor: '#ff6600',
        backgroundColor: '#fff8f0',
        borderWidth: 2,
        underlineStyle: 'solid'
      };
      break;
    case 'navigation':
      // Moderate highlighting for navigation areas
      settings = {
        highlightColor: '#0066cc',
        backgroundColor: 'transparent',
        borderWidth: 2,
        underlineStyle: 'dashed'
      };
      break;
    case 'minimal':
      // Subtle highlighting for clean designs
      settings = {
        highlightColor: '#0066cc',
        backgroundColor: 'transparent',
        borderWidth: 1,
        underlineStyle: 'solid'
      };
      break;
  }

  if (settings) {
    window.BrowseAidWidget.api.updateTool('link-highlighter', {
      enabled: true,
      ...settings
    });
  }
}