Font Size Tool

Overview

The Font Size tool allows users to increase text size across the entire website for improved readability. This tool is essential for users with visual impairments or those who prefer larger text for better comprehension.

Features

• Progressive Scaling: Increases text size in manageable increments
• Layout Preservation: Maintains page layout integrity while scaling text
• Universal Application: Affects all text elements on the page
• Mobile Support: Works seamlessly across different screen sizes

Settings

Level	Scale	Description
Normal	100%	Default website text size
Small Increase	110%	Slightly larger text for minor visual assistance
Medium Increase	120%	Moderately larger text for improved readability
Large Increase	130%	Significantly larger text for visual impairments
Extra Large	140%	Maximum text scaling for severe visual difficulties

Usage

1. Click the Font Size button in the accessibility toolbar
2. Select your preferred text size level using the stepper controls
3. All text on the page will scale accordingly
4. Navigate through different levels to find your optimal setting

Accessibility Benefits

• Low Vision Support: Essential for users with visual impairments
• Age-Related Vision Changes: Helps older users read content comfortably
• Reading Comfort: Reduces eye strain and improves comprehension
• Distance Viewing: Useful when viewing screens from a distance

Technical Implementation

Uses CSS font-size scaling with careful consideration for layout preservation and responsive design principles. The tool applies scaling factors to the root element while maintaining relative proportions.

API Usage Example

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

// Basic activation with default scaling
window.BrowseAidWidget.api.enableTool('font-size');

// Enable with specific scale level
window.BrowseAidWidget.api.enableTool('font-size', {
  scale: 1.2    // 120% scaling (1.0 = 100%, 1.4 = 140%)
});

// Update tool settings
window.BrowseAidWidget.api.updateTool('font-size', {
  enabled: true,
  scale: 1.3    // Set to 130% scaling
});

// Toggle the tool on/off
const isEnabled = window.BrowseAidWidget.api.toggleTool('font-size');
console.log('Font Size tool is now:', isEnabled ? 'enabled' : 'disabled');

// Toggle with specific scale when enabling
window.BrowseAidWidget.api.toggleTool('font-size', {
  scale: 1.4    // Extra large scaling when enabling
});

// Get current settings
const settings = window.BrowseAidWidget.api.getToolState('font-size');
console.log('Current Font Size settings:', settings);

// Disable the tool (reset to normal size)
window.BrowseAidWidget.api.disableTool('font-size');

// Listen for tool changes
const unsubscribe = window.BrowseAidWidget.api.onToolChange((toolName, settings) => {
  if (toolName === 'font-size') {
    console.log('Font Size settings changed:', settings);
    console.log('Current scale:', settings.scale);
  }
});

Configuration Options

Option	Type	Range	Default	Description
enabled	boolean	true/false	false	Enables or disables the tool
scale	number	1.0 - 1.4	1.1	Font scaling factor

Scale Examples

• 1.0 - Normal size (100%)
• 1.1 - Small increase (110%)
• 1.2 - Medium increase (120%)
• 1.3 - Large increase (130%)
• 1.4 - Extra large (140%)

Usage Patterns

// Gradual scaling for user testing
const scales = [1.0, 1.1, 1.2, 1.3, 1.4];
let currentIndex = 0;

function incrementFontSize() {
  if (currentIndex < scales.length - 1) {
    currentIndex++;
    window.BrowseAidWidget.api.updateTool('font-size', {
      enabled: true,
      scale: scales[currentIndex]
    });
  }
}

// Responsive scaling based on screen size
const screenWidth = window.innerWidth;
const baseScale = screenWidth < 768 ? 1.2 : 1.1; // Larger on mobile
window.BrowseAidWidget.api.enableTool('font-size', {
  scale: baseScale
});