Configuration Options Reference

Complete reference for all BrowseAid Widget configuration options.

Overview

The BrowseAid Widget accepts configuration through the global window.BrowseAidOptions object. All options are optional and have sensible defaults.

interface BrowseAidWidgetOptions {
  theme: 'v1' | 'v2'
  position: PositionOptions
  draggableToggle?: boolean
  sectionsCollapsible?: boolean
  sectionsCollapsed?: boolean
  tools?: ToolsConfiguration
  languages?: LanguagesConfiguration
  sections?: SectionsConfiguration
  profiles?: ProfilesConfiguration
}

Core Options

theme

Type: 'v1' | 'v2'Default: 'v2'

Selects the visual theme for the widget.

window.BrowseAidOptions = {
    theme: 'v2'  // Modern design with improved accessibility
};

Available themes:

• 'v1' - Classic theme
• 'v2' - Modern theme (recommended)

position

Type: PositionOptions

Controls the positioning of both the toggle button and widget panel.

interface PositionOptions {
  button: 'left-bottom' | 'right-bottom' | 'left-top' | 'right-top'
  widget: 'left' | 'right'
}

Defaults:

position: {
    button: 'right-bottom',
    widget: 'right'
}

Examples:

// Button in top-left, widget panel on left side
window.BrowseAidOptions = {
    position: {
        button: 'left-top',
        widget: 'left'
    }
};

draggableToggle

Type: booleanDefault: true

Enables or disables the draggable functionality for the widget button. When enabled, users can drag the button to a custom position on the screen.

window.BrowseAidOptions = {
    draggableToggle: true  // Allow the button to be draggable
};

sectionsCollapsible

Type: booleanDefault: true

Global setting that determines if widget sections can be collapsed/expanded.

window.BrowseAidOptions = {
    sectionsCollapsible: false  // All sections always expanded
};

sectionsCollapsed

Type: booleanDefault: false

Global setting for initial collapsed state of sections.

window.BrowseAidOptions = {
    sectionsCollapsed: true  // All sections start collapsed
};

Tools Configuration

tools

Type: Record<string, boolean>

Enable or disable specific accessibility tools globally.

window.BrowseAidOptions = {
    tools: {
        'font-size': true,           // Enable font size tool
        'text-to-speech': false,     // Disable text-to-speech
        'dark-mode': true,           // Enable dark mode
        'color-inversion': false,    // Disable color inversion
        'reading-guide': true        // Enable reading guide
    }
};

Available Tools:

Tool Key	Description
font-size	Adjust text size
line-spacing	Modify line height
text-align	Change text alignment
letter-spacing	Adjust character spacing
word-spacing	Modify word spacing
readable-fonts	Apply dyslexia-friendly fonts
dark-mode	Toggle dark/light theme
contrast	Adjust color contrast
color-filter	Apply colorblind filters
saturation	Modify color saturation
color-inversion	Invert page colors
blue-filter	Reduce blue light
reading-guide	Show reading line guide
reading-mask	Focus reading area
text-to-speech	Read text aloud
hide-images	Hide/show images
alt-text-tooltip	Show image descriptions
sound-mute	Mute page sounds
link-highlighter	Highlight links
heading-highlighter	Highlight headings
focus-indicator	Enhanced focus outline
table-of-contents	Page structure navigation
reduced-motion	Reduce animations
big-cursor	Enlarged cursor

Languages Configuration

languages

Type: string[] | Record<string, boolean>

Configure available interface languages.

Array Format:

window.BrowseAidOptions = {
    languages: ['en', 'es', 'fr', 'de', 'zh']
};

Object Format:

window.BrowseAidOptions = {
    languages: {
        'en': true,   // English (always available)
        'es': true,   // Spanish
        'fr': true,   // French
        'de': false,  // German (disabled)
        'zh': true    // Chinese
    }
};

Supported Language Codes:

Code	Language	Native Name
en	English	English
es	Spanish	Español
fr	French	Français
de	German	Deutsch
zh	Chinese	中文
bg	Bulgarian	Български
cs	Czech	Čeština
da	Danish	Dansk
el	Greek	Ελληνικά
et	Estonian	Eesti
fi	Finnish	Suomi
hi	Hindi	हिन्दी
hr	Croatian	Hrvatski
hu	Hungarian	Magyar
it	Italian	Italiano
ja	Japanese	日本語
ko	Korean	한국어
lt	Lithuanian	Lietuvių
lv	Latvian	Latviešu
nl	Dutch	Nederlands
no	Norwegian	Norsk
pl	Polish	Polski
pt	Portuguese	Português
ro	Romanian	Română
ru	Russian	Русский
sk	Slovak	Slovenčina
sl	Slovenian	Slovenščina
sv	Swedish	Svenska
tr	Turkish	Türkçe

Note: English (en) is always available as a fallback language.

Sections Configuration

sections

Type: Record<string, SectionConfiguration>

Configure individual widget sections.

interface SectionConfiguration {
  enabled: boolean
  title?: string
  titleLocalized?: Record<string, string>
  collapsible?: boolean
  collapsed?: boolean
  tools?: Record<string, boolean>
}

Available Sections:

• profiles - Accessibility Profiles
• language - Language Settings
• text - Text Settings
• color - Color Settings
• reading - Reading Tools
• media - Media Settings
• navigation - Navigation Helpers

Example:

window.BrowseAidOptions = {
    sections: {
        text: {
            enabled: true,
            title: 'Typography Options',
            titleLocalized: {
                'es': 'Opciones de Tipografía',
                'fr': 'Options de Typographie'
            },
            collapsible: false,  // Override global setting
            collapsed: true,     // Start collapsed
            tools: {
                'font-size': true,
                'line-spacing': true,
                'readable-fonts': false
            }
        },
        color: {
            enabled: true,
            tools: {
                'dark-mode': true,
                'color-inversion': false
            }
        },
        media: {
            enabled: false  // Disable entire section
        }
    }
};

Profiles Configuration

profiles

Type: Record<string, ProfileConfiguration>

Create, modify, or disable accessibility profiles.

interface ProfileConfiguration {
  enabled?: boolean
  title?: string
  titleLocalized?: Record<string, string>
  description?: string
  descriptionLocalized?: Record<string, string>
  tools?: Record<string, ToolSettings>
}

interface ToolSettings {
  enabled: boolean
  [option: string]: any  // Tool-specific options
}

Default Profiles:

• seizureSafe - Eliminates flashes and reduces color
• visionImpaired - Enhances visuals for better readability
• adhdFriendly - Reduces distractions and improves focus
• cognitiveDisability - Assists with reading and focusing
• keyboardNavigation - Optimizes for keyboard-only use
• blindUser - Optimizes for screen readers

Examples:

Override Existing Profile:

window.BrowseAidOptions = {
    profiles: {
        seizureSafe: {
            title: 'Enhanced Seizure Safety',
            description: 'Maximum protection against seizure triggers',
            tools: {
                'reduced-motion': { enabled: true },
                'hide-images': { enabled: true, showAltText: true },
                saturation: { enabled: true, level: 50 }  // Lower saturation
            }
        }
    }
};

Create Custom Profile:

window.BrowseAidOptions = {
    profiles: {
        myCustomProfile: {
            title: 'High Contrast Reading',
            titleLocalized: {
                'es': 'Lectura de Alto Contraste',
                'fr': 'Lecture à Contraste Élevé'
            },
            description: 'Optimized for users with low vision',
            descriptionLocalized: {
                'es': 'Optimizado para usuarios con baja visión',
                'fr': 'Optimisé pour les utilisateurs malvoyants'
            },
            tools: {
                'font-size': { enabled: true, level: 1.8 },
                'contrast': { enabled: true, level: 'enhanced' },
                'line-spacing': { enabled: true, level: '2.0' },
                'dark-mode': { enabled: true }
            }
        }
    }
};

Disable Profile:

window.BrowseAidOptions = {
    profiles: {
        adhdFriendly: {
            enabled: false  // Remove from interface
        }
    }
};

Tool-Specific Settings

When configuring tools in profiles, you can include tool-specific options:

Font Size

'font-size': {
    enabled: true,
    level: 1.5  // 150% of original size
}

Text to Speech

'text-to-speech': {
    enabled: true,
    speechRate: 1.2,     // Speaking speed
    speechPitch: 1.0,    // Voice pitch
    highlightMode: 'word' // 'word' | 'sentence' | 'paragraph'
}

Color Saturation

saturation: {
    enabled: true,
    level: 80  // 80% saturation
}

Reading Guide

'reading-guide': {
    enabled: true,
    thickness: 3,    // Line thickness
    color: '#ff0000' // Custom color
}

Complete Example

window.BrowseAidOptions = {
    // Core settings
    theme: 'v2',
    position: {
        button: 'right-bottom',
        widget: 'right'
    },

    // Section behavior
    sectionsCollapsible: true,
    sectionsCollapsed: false,

    // Available languages
    languages: ['en', 'es', 'fr', 'de'],

    // Global tool settings
    tools: {
        'text-to-speech': false,  // Disable globally
        'color-inversion': false
    },

    // Section configuration
    sections: {
        text: {
            enabled: true,
            title: 'Typography',
            collapsible: true,
            collapsed: false,
            tools: {
                'font-size': true,
                'line-spacing': true,
                'readable-fonts': true
            }
        },
        profiles: {
            enabled: true,
            collapsible: false  // Always expanded
        }
    },

    // Custom profiles
    profiles: {
        // Override existing profile
        visionImpaired: {
            title: 'Low Vision Support',
            tools: {
                'font-size': { enabled: true, level: 2.0 },
                'contrast': { enabled: true, level: 'enhanced' },
                'big-cursor': { enabled: true, level: 'white' }
            }
        },

        // Custom profile
        officeWorker: {
            title: 'Office Environment',
            description: 'Optimized for long computer sessions',
            tools: {
                'blue-filter': { enabled: true, level: 'medium' },
                'dark-mode': { enabled: true },
                'reduced-motion': { enabled: true }
            }
        }
    }
};

Validation and Fallbacks

The widget automatically handles invalid configurations:

• Invalid themes → Falls back to 'v2'
• Unknown language codes → Filtered out with console warnings
• Missing English → Always added as fallback
• Invalid positions → Uses defaults
• Unknown tools → Ignored silently
• Malformed sections → Uses defaults

Next Steps

• 🛠️ API Reference - Programmatic widget control
• 📚 Tool Documentation - Individual tool options