🚀 Advanced Capabilities

• Undo/Redo System: Full history tracking with Ctrl+Z / Ctrl+Y
• Persistent Settings: Auto-save preferences per website
• Dark/Light Mode: Toggle toolbar theme to match your preference
• Export/Import: Backup and restore your settings
• Keyboard Shortcuts: Full keyboard navigation support
• Real-time Performance: < 5ms enhancement execution time

💾 Smart Personalization

• Site-specific settings that remember your preferences
• Auto-apply saved enhancements when revisiting websites
• Export settings as JSON for backup or sharing
• Import settings across devices

📦 Installation

Chrome Web Store (Recommended)

Link

Manual Installation (Developer Mode)

1. Clone the repository

   git clone https://github.com/FrankenSama/accessibility-text-enhancer.git
   cd accessibility-text-enhancer
   

2. Load in Chrome

   • Open Chrome and navigate to chrome://extensions/
   • Enable "Developer mode" (toggle in top-right)
   • Click "Load unpacked"
   • Select the project directory

3. Verify Installation

   • The extension icon should appear in your toolbar
   • Click it to see the popup interface

🎯 Usage

Basic Usage

1. Select Text: Highlight any text on any webpage
2. Toolbar Appears: The accessibility toolbar will appear at the top of your screen
3. Apply Enhancements: Click any button to enhance the selected text
4. Undo if Needed: Use the undo button or Ctrl+Z to revert changes

Keyboard Shortcuts

The extension supports full keyboard navigation:

Settings Panel

Access advanced settings by clicking the ⚙️ button in the toolbar:

• Auto-save Settings: Automatically save preferences for each website
• Show Tooltips: Toggle button descriptions
• Enable Shortcuts: Turn keyboard shortcuts on/off
• Export/Import: Backup or restore your configuration

🔬 Research Background

This extension was developed as part of a Master's dissertation titled:

"A User-Driven Browser Extension for Real-Time Web Accessibility Enhancement"
Octavio Silva, MSc Computer Engineering
Solent University, 2024-2025

Key Research Findings

Performance Metrics (tested on 20 diverse websites):

• ✅ 100% success rate for toolbar injection across all sites
• ✅ 95%+ success rate for core enhancement features
• ✅ < 2.5MB memory overhead per tab
• ✅ < 3% CPU increase during enhancement
• ✅ < 5ms execution time for all enhancements

Tested Environments:

• News websites (BBC, The Guardian)
• E-commerce (Amazon, eBay)
• Social media (Twitter/X, Reddit)
• SPAs (Google Docs, YouTube)
• Government sites (GOV.UK)

Research Questions Addressed

RQ1: Can a browser extension provide effective, real-time remediation for perceptual accessibility issues?

✅ Answer: Yes. The extension successfully applies CSS overrides with !important flags, achieving universal compatibility across diverse DOM structures with minimal performance impact.

RQ2: What is the performance impact of real-time, client-side accessibility enhancement?

✅ Answer: Negligible. Memory overhead averages 2.5MB per tab with CPU spikes < 3% during enhancement execution and no sustained load.

Academic Citations

If you use this tool in research, please cite:

@mastersthesis{silva2025accessibility,
  author = {Silva, Octavio},
  title = {A User-Driven Browser Extension for Real-Time Web Accessibility Enhancement},
  school = {Solent University},
  year = {2025},
  type = {MSc Dissertation},
  note = {COM726 - Computer Engineering}
}

🏗️ Technical Architecture

Technology Stack

• Manifest V3: Modern Chrome Extension API
• Vanilla JavaScript (ES6+): Zero dependencies for maximum compatibility
• CSS3: Advanced styling with Flexbox
• Chrome Storage API: Persistent settings management
• Web Speech API: Text-to-speech functionality

Project Structure

accessibility-text-enhancer/
├── manifest.json              # Extension configuration
├── background.js              # Service worker for shortcuts & stats
├── popup/
│   ├── popup.html            # Extension popup interface
│   └── popup.js              # Popup logic
├── content-scripts/
│   ├── content.js            # Main enhancement engine
│   └── content.css           # Toolbar styling
├── icons/                    # Extension icons (16, 48, 128px)
├── docs/                     # Documentation & research papers
└── README.md                 # This file

Architecture Diagram

┌─────────────────┐
│   User Action   │
│ (Text Selection)│
└────────┬────────┘
         │
         ▼
┌─────────────────────────────────┐
│   Content Script (content.js)   │
│  ┌──────────────────────────┐  │
│  │  Selection Event Handler  │  │
│  └────────┬─────────────────┘  │
│           │                     │
│           ▼                     │
│  ┌──────────────────────────┐  │
│  │   Toolbar Creation        │  │
│  │   & Positioning           │  │
│  └────────┬─────────────────┘  │
│           │                     │
│           ▼                     │
│  ┌──────────────────────────┐  │
│  │  Command Execution        │  │
│  │  - Bold / Highlight       │  │
│  │  - Size / Spacing         │  │
│  │  - Contrast / TTS         │  │
│  └────────┬─────────────────┘  │
│           │                     │
│           ▼                     │
│  ┌──────────────────────────┐  │
│  │   DOM Manipulation        │  │
│  │   (CSS Injection)         │  │
│  └────────┬─────────────────┘  │
│           │                     │
│           ▼                     │
│  ┌──────────────────────────┐  │
│  │   History Management      │  │
│  │   (Undo/Redo Stack)       │  │
│  └──────────────────────────┘  │
└─────────────────────────────────┘
         │
         ▼
┌─────────────────┐
│  Chrome Storage │
│  (Persistence)  │
└─────────────────┘

Key Design Decisions

1. Parent Element Modification: Modifies parent containers rather than wrapping selected text, trading surgical precision for robustness across diverse sites

2. !important CSS Flags: Ensures accessibility enhancements override existing styles regardless of specificity

3. Client-Side Processing: All operations occur in-browser—no server calls, ensuring privacy and zero latency

4. Fixed Toolbar Position: Positioned at viewport top to prevent interference with text selection

🎓 Development

Prerequisites

• Chrome/Chromium browser (v88+)
• Basic understanding of Chrome Extension APIs
• Text editor (VS Code recommended)

Setup Development Environment

# Clone repository
git clone https://github.com/FrankenSama/accessibility-text-enhancer.git

# Navigate to directory
cd accessibility-text-enhancer

# Load in Chrome (chrome://extensions/)
# Enable Developer Mode → Load Unpacked → Select directory

Debugging

1. Content Script: Right-click page → Inspect → Console tab
2. Popup: Right-click extension icon → Inspect popup
3. Background Script: chrome://extensions/ → Details → Inspect views

🤝 Contributing

Contributions are welcome! This project aims to make the web more accessible for everyone.

How to Contribute

1. Fork the repository
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Contribution Guidelines

• Follow existing code style and conventions
• Add comments for complex logic
• Update README.md if adding new features
• Test on multiple websites before submitting
• Ensure accessibility of any new UI elements

Areas Needing Help

• 🎨 UI/UX Design: Improve toolbar aesthetics
• 🧪 Testing: Cross-browser compatibility testing
• 📝 Documentation: Improve guides and examples
• 🌍 Localization: Translations for international users
• ♿ Accessibility: User testing with screen readers

Compatibility

Tested and verified on:

• ✅ Chrome 88+
• ✅ Edge 88+
• ✅ Brave 1.20+
• ✅ Opera 74+

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

MIT License Summary

Copyright (c) 2025 Octavio Silva

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software...

🙏 Acknowledgments

• Solent University - Academic support and research facilities
• Bacha Rehman - Module leader and dissertation supervisor
• WebAIM - Accessibility research and testing resources
• W3C - WCAG guidelines and standards
• Chrome Extensions Team