Alt Text Tooltip Tool

Overview

The Alt Text Tooltip tool displays alternative text descriptions for images in interactive tooltips positioned above images. It helps users understand image content and provides visual indicators for images that are missing accessibility descriptions.

Features

• Hover Tooltips: Interactive tooltips that appear on image hover with smooth animations
• Smart Positioning: Automatically positions tooltips above images, switching to below if needed
• Missing Alt Detection: Visual indicators and fallback text for images without alt text
• Size Options: Multiple tooltip size levels for different readability needs
• Non-Intrusive Design: Subtle visual enhancements that don't interfere with content
• Adaptive Arrow Positioning: Tooltip arrows adjust position based on viewport constraints

Settings

Level	Description
Disabled	No alt text tooltips are shown
Enabled	Interactive tooltips display image descriptions on hover

Usage

1. Click the Alt Text Tooltip button in the accessibility toolbar
2. Hover over any image to see its alt text description in a tooltip
3. Images without alt text will show "No alt text provided for this image"
4. Tooltips automatically position themselves to remain visible
5. Click the button again to disable tooltips

Accessibility Benefits

• Visual Context: Provides image descriptions for all users
• Missing Alt Detection: Identifies images lacking accessibility descriptions
• Content Understanding: Helps users understand image purpose and content
• Learning Aid: Educational tool for understanding image descriptions
• Quality Assurance: Helps web developers identify accessibility issues
• Cognitive Support: Provides additional context for complex images

Tooltip Features

Smart Display

• Hover Activation: Tooltips appear on mouse hover
• Auto-Positioning: Tooltips position above images, below when necessary
• Fade Animations: Smooth show/hide transitions with CSS animations
• Multiple Lines: Supports long alt text descriptions
• Viewport Awareness: Keeps tooltips within screen boundaries

Visual Indicators

• Missing Alt Warning: Special styling for images without alt text
• Fallback Text: "No alt text provided for this image" message
• Arrow Indicators: Visual arrows pointing to the associated image
• Size Variants: Different tooltip sizes for improved readability

Technical Implementation

Uses event delegation with document-level mouse event listeners for efficient hover detection. Creates dynamic tooltip elements with CSS positioning and maintains a map of active tooltips for proper cleanup and animation management.

API Usage Example

The Alt Text Tooltip tool can be programmatically controlled using the widget API:

// Basic activation
window.BrowseAidWidget.api.enableTool('alt-text-tooltip');

// Enable with specific tooltip size
window.BrowseAidWidget.api.enableTool('alt-text-tooltip', {
  enabled: true,
  level: 'large'           // Size options: 'medium', 'large', 'x-large'
});

// Update tool settings
window.BrowseAidWidget.api.updateTool('alt-text-tooltip', {
  enabled: true,
  level: 'x-large'         // Switch to extra large tooltips
});

// Toggle the tool on/off
const isEnabled = window.BrowseAidWidget.api.toggleTool('alt-text-tooltip');
console.log('Alt Text Tooltip is now:', isEnabled ? 'enabled' : 'disabled');

// Get current settings
const settings = window.BrowseAidWidget.api.getToolState('alt-text-tooltip');
console.log('Current Alt Text Tooltip settings:', settings);

// Disable the tool
window.BrowseAidWidget.api.disableTool('alt-text-tooltip');

// Listen for tool changes
const unsubscribe = window.BrowseAidWidget.api.onToolChange((toolName, settings) => {
  if (toolName === 'alt-text-tooltip') {
    console.log('Alt Text Tooltip settings changed:', settings);
  }
});

Configuration Options

Option	Type	Options	Default	Description
enabled	boolean	true/false	false	Enables or disables the tool
level	string	'medium', 'large', 'x-large'	'medium'	Controls tooltip size and readability

Tooltip Size Examples

• Medium - Standard size tooltips for normal use
• Large - Larger tooltips for improved readability
• X-Large - Maximum size tooltips for users with visual impairments

Usage Patterns

// Standard usage for general accessibility
window.BrowseAidWidget.api.enableTool('alt-text-tooltip', {
  enabled: true,
  level: 'medium'
});

// Enhanced readability for users with visual impairments
window.BrowseAidWidget.api.enableTool('alt-text-tooltip', {
  enabled: true,
  level: 'x-large'
});

// Development mode - quick tooltip activation for testing
window.BrowseAidWidget.api.enableTool('alt-text-tooltip');

// Accessibility audit helper function
function auditPageImages() {
  // Enable tooltips to see alt text coverage
  window.BrowseAidWidget.api.enableTool('alt-text-tooltip', {
    enabled: true,
    level: 'large'
  });

  const images = document.querySelectorAll('img');
  const results = {
    total: images.length,
    withAlt: 0,
    withoutAlt: 0,
    decorative: 0
  };

  images.forEach(img => {
    const alt = img.getAttribute('alt');
    if (alt === null) {
      results.withoutAlt++;
    } else if (alt === '') {
      results.decorative++;
    } else {
      results.withAlt++;
    }
  });

  console.log('Image accessibility audit results:', results);
  return results;
}

// Toggle between tooltip sizes based on user needs
function cycleThroughTooltipSizes() {
  const currentSettings = window.BrowseAidWidget.api.getToolState('alt-text-tooltip');
  const sizes = ['medium', 'large', 'x-large'];
  const currentIndex = sizes.indexOf(currentSettings.level);
  const nextSize = sizes[(currentIndex + 1) % sizes.length];

  window.BrowseAidWidget.api.updateTool('alt-text-tooltip', {
    enabled: true,
    level: nextSize
  });

  console.log(`Tooltip size changed to: ${nextSize}`);
}