Hide Images Tool

Overview

The Hide Images Tool removes visual distractions by hiding all images on the page while preserving their alternative text descriptions. This tool is essential for users with cognitive disabilities, attention difficulties, or those who prefer text-only browsing for improved focus and faster page loading.

Features

• Selective Image Hiding: Smart filtering that preserves essential images while hiding distracting content
• Alt Text Display: Shows alternative text descriptions in place of hidden images
• SVG Exception: Optionally preserves SVG icons and graphics that are typically functional
• Small Image Filtering: Configurable size threshold to preserve icons and UI elements
• Dynamic Content Support: Automatically processes images added to the page after initial load
• Layout Preservation: Maintains page structure using wrapper elements with preserved dimensions
• Wrapper-Based Implementation: Uses container elements to preserve original layout and styling

Settings

Setting	Type	Description
Enabled	Boolean	Activates or deactivates the image hiding functionality
Show Alt Text	Boolean	Displays alternative text descriptions in place of hidden images
Skip SVG Images	Boolean	Preserves SVG images which are often icons or functional graphics
Skip Small Images	Boolean	Preserves images below the size threshold (typically icons)
Size Threshold	Number	Pixel size limit for small images (default: 24px)

Usage

1. Click the Hide Images button in the accessibility toolbar
2. All qualifying images are immediately hidden from view
3. Alternative text appears in place of hidden images (if enabled)
4. Essential icons and small graphics remain visible (if configured)
5. Click the button again to restore all images

Accessibility Benefits

• Cognitive Load Reduction: Removes visual clutter for users with cognitive disabilities
• Attention Focus: Eliminates distracting images for users with ADHD or attention difficulties
• Reading Comprehension: Allows focus on text content without visual interruptions
• Bandwidth Conservation: Reduces data usage by preventing image display
• Processing Speed: Improves page performance for users with slower devices
• Content Prioritization: Emphasizes textual information over decorative elements

Filtering Logic

Image Classification

• Hidden Images: Regular content images, photos, banners, decorative graphics
• Preserved Images: SVG icons, small UI elements below threshold, functional graphics
• Alt Text Handling: Missing alt text displays placeholder message for accessibility awareness

Size-Based Filtering

• Small Image Threshold: Configurable pixel limit (default: 24px)
• Dimension Checking: Evaluates both width and height against threshold
• Icon Preservation: Maintains visibility of likely interface elements
• Layout Icons: Preserves functional graphics essential for navigation

Dynamic Processing

• Mutation Observer: Monitors DOM changes for newly added images
• Real-time Processing: Automatically applies hiding rules to dynamic content
• Wrapper Preservation: Maintains layout integrity during image replacement
• Style Inheritance: Preserves important CSS properties from original images

Technical Implementation

The tool uses a wrapper-based approach that replaces images with container elements while preserving layout properties. Key technical features include:

• Wrapper Elements: Creates .ada-img-wrapper containers to maintain layout
• Style Preservation: Transfers critical CSS properties to maintain visual structure
• Alt Text Overlay: Adds .ada-img-alt-text elements for alternative text display
• Mutation Monitoring: Uses MutationObserver for dynamic content handling
• CSS Classes: Applies ada-hide-images and ada-show-alt-text classes for styling control

API Usage Example

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

// Basic activation
window.BrowseAidWidget.api.enableTool('hide-images');

// Enable with custom settings
window.BrowseAidWidget.api.enableTool('hide-images', {
  enabled: true,
  showAltText: true,        // Show alt text in place of images
  skipSvgImages: true,      // Preserve SVG icons
  skipSmallImages: true,    // Preserve small images/icons
  smallImageThreshold: 32   // Size threshold in pixels
});

// Update tool settings
window.BrowseAidWidget.api.updateTool('hide-images', {
  enabled: true,
  showAltText: false,       // Hide images without showing alt text
  skipSvgImages: false,     // Hide all images including SVGs
  smallImageThreshold: 48   // Larger threshold for small images
});

// Toggle the tool on/off
const isEnabled = window.BrowseAidWidget.api.toggleTool('hide-images');
console.log('Hide Images is now:', isEnabled ? 'enabled' : 'disabled');

// Get current settings
const settings = window.BrowseAidWidget.api.getToolState('hide-images');
console.log('Current Hide Images settings:', settings);

// Disable the tool
window.BrowseAidWidget.api.disableTool('hide-images');

// Listen for tool changes
const unsubscribe = window.BrowseAidWidget.api.onToolChange((toolName, settings) => {
  if (toolName === 'hide-images') {
    console.log('Hide Images settings changed:', settings);
  }
});

Configuration Options

Option	Type	Values	Default	Description
enabled	boolean	true/false	false	Enables or disables the tool
showAltText	boolean	true/false	true	Shows alternative text in place of hidden images
skipSvgImages	boolean	true/false	true	Preserves SVG images (typically icons)
skipSmallImages	boolean	true/false	true	Preserves images below size threshold
smallImageThreshold	number	1-200	24	Size limit in pixels for small images

Threshold Examples

• 16 - Very small icons only (favicons, tiny UI elements)
• 24 - Small icons and buttons (default)
• 32 - Medium icons and small graphics
• 48 - Larger icons and small images
• 64 - Small to medium images

Usage Patterns

// Cognitive accessibility mode - hide all visual distractions
window.BrowseAidWidget.api.enableTool('hide-images', {
  enabled: true,
  showAltText: true,
  skipSvgImages: true,      // Keep functional icons
  skipSmallImages: true,
  smallImageThreshold: 24
});

// Bandwidth saving mode - hide all images
window.BrowseAidWidget.api.enableTool('hide-images', {
  enabled: true,
  showAltText: false,       // Don't show alt text
  skipSvgImages: false,     // Hide everything
  skipSmallImages: false,
  smallImageThreshold: 0
});

// Reading focus mode - preserve essential UI
window.BrowseAidWidget.api.enableTool('hide-images', {
  enabled: true,
  showAltText: true,
  skipSvgImages: true,
  skipSmallImages: true,
  smallImageThreshold: 48   // Larger threshold
});

// Accessibility audit mode - show alt text coverage
window.BrowseAidWidget.api.enableTool('hide-images', {
  enabled: true,
  showAltText: true,        // Highlight alt text issues
  skipSvgImages: false,     // Include all images
  skipSmallImages: false,
  smallImageThreshold: 0
});

// Custom filtering function
function enableSmartImageHiding() {
  const hasSlowConnection = navigator.connection?.effectiveType === 'slow-2g' ||
                           navigator.connection?.effectiveType === '2g';

  window.BrowseAidWidget.api.enableTool('hide-images', {
    enabled: true,
    showAltText: !hasSlowConnection,  // Show alt text unless on slow connection
    skipSvgImages: true,
    skipSmallImages: true,
    smallImageThreshold: hasSlowConnection ? 16 : 32
  });
}

// Image audit helper
function auditPageImages() {
  window.BrowseAidWidget.api.enableTool('hide-images', {
    enabled: true,
    showAltText: true,
    skipSvgImages: false,
    skipSmallImages: false,
    smallImageThreshold: 0
  });

  // Count images by type
  const images = document.querySelectorAll('img');
  const audit = {
    total: images.length,
    withAlt: 0,
    withoutAlt: 0,
    svg: 0,
    small: 0
  };

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

    if (img.src.includes('.svg') || img.src.includes('svg+xml')) {
      audit.svg++;
    }

    if (img.width <= 24 || img.height <= 24) {
      audit.small++;
    }
  });

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

// Performance-based auto-activation
function enableForPerformance() {
  // Enable if many images detected
  const imageCount = document.querySelectorAll('img').length;

  if (imageCount > 20) {
    window.BrowseAidWidget.api.enableTool('hide-images', {
      enabled: true,
      showAltText: true,
      skipSvgImages: true,
      skipSmallImages: true,
      smallImageThreshold: 32
    });

    console.log(`Auto-enabled Hide Images due to ${imageCount} images detected`);
  }
}

Integration Notes

• Layout Preservation: Uses wrapper elements to maintain page structure
• CSS Integration: Applies ada-hide-images and ada-show-alt-text classes to HTML element
• Dynamic Content: MutationObserver monitors for newly added images
• Performance: Efficient processing with Set-based tracking of processed images
• Accessibility: Preserves alternative text and provides fallback messages
• Style Inheritance: Maintains critical CSS properties for layout integrity

Best Practices

• Enable "Show Alt Text" to maintain content accessibility
• Use "Skip SVG Images" to preserve functional icons
• Set appropriate size thresholds based on your site's design
• Consider bandwidth limitations when configuring settings
• Test with dynamic content to ensure proper image handling

Limitations

• Cannot hide CSS background images
• Some images may require manual alt text addition
• Layout may shift slightly with very large images
• Dynamic content processing depends on MutationObserver support