­
BarrierFree, by Mertsch-Web - Joomla Extension Directory

Introduction

Accessibility

BarrierFree is a comprehensive accessibility plugin for Joomla, designed to make websites more accessible for people with various impairments. The plugin features an intuitive, floating toolbar that allows visitors to customize the website’s appearance and functionality according to their individual needs.


Key Features

🔊 Text-to-Speech (Reading Function)

  • Automatic reading of page content
  • Smart content detection (filters out menus and navigation)
  • Supports both German and English
  • Adjustable reading speed
  • Visual highlighting of the currently read text
  • Scroll tracking for better orientation

📝 Text Adjustments

  • Font Size Adjustment: From 70% to 200% in 10% increments
  • Letter Spacing: 3 levels to improve readability
  • All changes are saved automatically

🎨 Visual Adjustments

  • Grayscale Mode: Reduces distractions from colors
  • Color Inversion: Inverts all colors for better contrast
  • Link Highlighting: Makes links clearly visible
  • Link Underlining: Adds extra emphasis on links

🖱️ Navigation & Interaction

  • Large Cursor: Enhanced visibility of the mouse pointer
  • Reading Ruler: Movable guide to improve text focus
  • Keyboard Navigation: Fully operable via keyboard

🌍 Multilingual Support

  • Full support for German and English
  • Automatic language detection based on browser settings
  • Easy language switching via the toolbar

🎨 Customizable Appearance

  • 7 Color Schemes: Blue, Green, Red, Purple, Orange, Teal, Dark
  • Toolbar Positioning: Left or right side of the screen
  • Responsive design for all devices

Technical Details

System Requirements

  • Joomla Version: 4.0+ and 5.0+
  • PHP Version: 7.4+ (Recommended: 8.0+)
  • Browser Support:

    • Chrome 60+
    • Firefox 55+
    • Safari 12+
    • Edge 79+

JavaScript: Required (ES5 compatible)

Plugin Specifications

  • Plugin Type: System Plugin
  • Plugin Group: system
  • Namespace: JoomlaPluginSystemBarrierFree
  • Current Version: 1.7
  • License: GNU GPL v2+
  • Developer: Mertsch-Web

File Size & Performance

  • Plugin Size: ~45 KB (compressed)
  • CSS File: ~12 KB
  • JavaScript File: ~18 KB
  • Language Files: ~8 KB (total)
  • Load Time Impact: < 50ms
  • Memory Usage: < 1 MB

Technical Features

  • CSS-Based Animations: Smooth transitions without JavaScript overhead
  • LocalStorage: Persistent saving of user settings
  • Event Delegation: Optimized event handling
  • Responsive Design: Mobile-first approach
  • Accessibility Standards: WCAG 2.1 AA compliant
  • Cross-Browser Compatibility: Vendor prefixes for maximum support

API & Integration

  • Speech Synthesis API: For text-to-speech functionality
  • Web Storage API: For saving settings
  • Intersection Observer: For performance-optimized scroll tracking
  • CSS Custom Properties: For dynamic color changes
Functionality
In Firefox 139.0.4 (macOS or Windows) and Edge 137 (Windows) the BarrierFree icon suddenly jumps down to the precise middle of the entire page when I switch from normal colours to greyscale mode. Interestingly this does not happen when I use Safari 18.5. Any ideas?
Ease of use
In Firefox 139.0.4 (macOS or Windows) and Edge 137 (Windows) the BarrierFree icon suddenly jumps down to the precise middle of the entire page when I switch from normal colours to greyscale mode. Interestingly this does not happen when I use Safari 18.5. Any ideas?
Support
In Firefox 139.0.4 (macOS or Windows) and Edge 137 (Windows) the BarrierFree icon suddenly jumps down to the precise middle of the entire page when I switch from normal colours to greyscale mode. Interestingly this does not happen when I use Safari 18.5. Any ideas?
Documentation
In Firefox 139.0.4 (macOS or Windows) and Edge 137 (Windows) the BarrierFree icon suddenly jumps down to the precise middle of the entire page when I switch from normal colours to greyscale mode. Interestingly this does not happen when I use Safari 18.5. Any ideas?
I used this to: In Firefox 139.0.4 (macOS or Windows) and Edge 137 (Windows) the BarrierFree icon suddenly jumps down to the precise middle of the entire page when I switch from normal colours to greyscale mode. Interestingly this does not happen when I use Safari 18.5. Any ideas?
Owner's reply: Hello thanks for the tip, I have revised the plugin and published a new version :

What has been fundamentally changed:

🔧 **New positioning strategy:**

- **Removes:** `transform: translateY(-50%)` completely from CSS
- **New:** `margin-top: -30px` for the toolbar (half of the button height)
- **New:** `margin-top: -150px` for the panel (about half the panel height)

🎯 **New filter implementation:**

- **Filter is no longer applied to `body`**
- **Filter is only applied to specific elements** with `:not(#accessibility-toolbar)`
- **Toolbar remains completely unfiltered**

🚫 **Removed JavaScript manipulations:**

- Removed all browser-specific JavaScript fixes
- No more `opacity` tricks
- No `display: none/block` manipulations
- Pure CSS solution
Functionality
Reading aloud cannot be stopped, it would be perfect if it works
Ease of use
Reading aloud cannot be stopped, it would be perfect if it works
Support
Reading aloud cannot be stopped, it would be perfect if it works
Documentation
Reading aloud cannot be stopped, it would be perfect if it works
I used this to: Reading aloud cannot be stopped, it would be perfect if it works
Owner's reply: Thank you for your advice. The problem has been detected and the function has been fixed. Version 1.8 should now be available via the Joomla update function.

BarrierFree

Version:
1.8.1
Developer:
Mertsch-Web
Last updated:
Jun 16 2025
1 week ago
Date added:
May 26 2025
License:
GPLv2 or later
Type:
Free download
Includes:
p
Compatibility:
J4 J5
Download

Uses Joomla! Update System

Score:


Write a review