Heading Highlighter Tool

The Heading Highlighter Tool makes page structure more visible by highlighting heading elements (H1-H6) with hierarchical color coding. This helps users understand content organization and navigate more effectively.

Features

• Consistent Highlighting: All heading levels receive the same visual treatment
• Visual Structure: Makes document outline clearly visible
• Navigation Aid: Helps users understand content organization
• Dark Mode Support: Adapts highlighting colors for dark themes
• WCAG Compliant: Uses accessible color combinations with sufficient contrast

Settings

Level	Description
Disabled	Headings display with original styling
Enabled	All headings highlighted with consistent color treatment

Usage

1. Click the Heading Highlighter button in the accessibility toolbar
2. All headings (H1-H6) immediately receive highlighting
3. The consistent highlighting helps visualize document structure
4. Click the button again to return to original heading styling

Accessibility Benefits

• Document Structure: Makes page hierarchy clearly visible
• Navigation Assistance: Helps users understand content organization
• Cognitive Support: Visual aids for users with cognitive disabilities
• Screen Reader Complement: Provides visual equivalent of structural information
• Reading Comprehension: Improves understanding of content flow
• Content Scanning: Enables quick identification of main topics

Visual Treatment

Light Mode

• Background: Light green (rgba(144, 238, 144, 0.537))
• Outline: Dotted green border (rgba(0, 154, 67, 0.6))

Dark Mode

• Background: Semi-transparent blue (rgba(70, 130, 180, 0.3))
• Outline: Blue border (rgb(76, 174, 254))

All heading levels (H1-H6) receive the same visual treatment to provide consistent identification without hierarchy-based color coding.

Technical Implementation

Applies CSS background colors and dotted outline styling to all heading elements (H1-H6) using the ada-highlight-headings class on the HTML element. The implementation uses !important declarations to ensure visibility over existing website styles while maintaining text contrast and readability.

API Usage Example

The Heading Highlighter tool can be programmatically controlled using the widget API:

// Enable the tool
window.BrowseAidWidget.api.enableTool('heading-highlighter');

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

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

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

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

Available Settings

Setting	Type	Values	Default	Description
enabled	boolean	true/false	false	Enables or disables the heading highlighting

Usage Patterns

// Check document structure
function analyzeHeadings() {
  // Enable highlighting to visualize structure
  window.BrowseAidWidget.api.enableTool('heading-highlighter');

  // Count headings by level
  const headingCounts = {};
  for (let i = 1; i <= 6; i++) {
    const headings = document.querySelectorAll(`h${i}`);
    headingCounts[`h${i}`] = headings.length;
  }

  console.log('Document structure:', headingCounts);
  return headingCounts;
}

// Accessibility audit mode
function enableStructureTools() {
  // Enable multiple structure visualization tools
  window.BrowseAidWidget.api.enableTool('heading-highlighter');
  window.BrowseAidWidget.api.enableTool('link-highlighter');
  window.BrowseAidWidget.api.enableTool('focus-indicator');
}

// Temporary highlighting for navigation
function highlightHeadingsTemporarily(duration = 5000) {
  window.BrowseAidWidget.api.enableTool('heading-highlighter');

  setTimeout(() => {
    window.BrowseAidWidget.api.disableTool('heading-highlighter');
  }, duration);
}