Introduction

Accessibility

Joomla 4 / 5 / 6 – BarrierFree Plugin v2.0.4


“Together we make BarrierFree better! Support us with a donation and help move the project forward for everyone.”

Version 2.0.4 – Important Improvements & Joomla 6 Compatibility

With version 2.0.4, the extension gets a significant update that improves mobile user-friendliness in particular, offers full support for Joomla 6, and includes several optimizations in the user experience. In addition, a critical error was fixed that prevented the opening of the panel on mobile devices.

🔹 Important innovations

  1. Improved mobile support

Introduction of touch event handling for instant response on mobile devices

No more 300 ms delay when opening the panel

Support for touchstart, touchend and touchmove

Improved gesture control for a smoother user experience

  1. New installation script (script.php)

Automatic cache cleaning for updates

User notifications during installation, update and uninstallation

Integrated version check and upgrade management

Language files are now reliably loaded

  1. Full Joomla 6 compatibility

Adaptation to the new Joomla 6.x architecture

Use of modern structures such as Factory::getContainer()

Full compatibility with Joomla 4.x, 5.x and 6.x

Complete function description

🔍 Overview

BarrierFree Plugin v2.0.4

Accessibility for Joomla 5 & 6 – developed by der-it-blog.de (Mertsch-Web)

The BarrierFree Plugin version 2.0.3 is a powerful accessibility tool for Joomla 5.

It supports people with different limitations in using websites barrier-free.

Numerous customization functions are available via an intuitive toolbar that make it easier to read, navigate and interact.

Main functions

  1. Text-to-speech

Automatically reads all the contents of the current page.

Alternatively, highlighted text can be read aloud with the key combination Ctrl + R (Windows) or Cmd + R (Mac).

Supports German (de-DE) and English (en-GB).

The reading speed can be individually adjusted.

Intelligent detection automatically hides menus and navigation areas.

The currently read item is visually highlighted.

When the window changes, playback is automatically paused and resumed when you return.

  1. Adjustment of font size

Scale from 70% to 200% in 10% steps.

Controls: A+ (larger), A- (smaller), A (standard).

The selected setting remains stored in the browser.

Optimized for all screen sizes and devices.

  1. Character and word spacing

Three levels: Normal, 1 pixel, 2 pixels, 3 pixels.

The word spacing is automatically adjusted with.

Operating elements: aA+ (larger), aA- (smaller), aA (standard).

  1. Visual adjustments

Grayscale mode: Converts all colors to grayscale, the toolbar remains colored.

Color inversion: Black background with white font for better readability in case of light sensitivity.

  1. Link functions

Link highlighting: yellow background, black font, red border, and additional underlining.

Link underline: All links are underlined – regardless of highlighting.

  1. Line ruler (Reading Ruler)

A yellow, 3 pixel high line follows the mouse movement.

Gentle movement with CSS transition.

Light edge (glow effect) for better visibility.

  1. Large mouse pointer

White circle (32x32 pixels) with black border.

Special cursor (X symbol) for links and buttons.

SVG-based for sharp display on all displays.

  1. Multilingualism

Languages: German and English.

Automatic speech recognition based on browser settings.

The selected language will be saved for future visits.

Design and ease of use

Toolbar

Floating button with gentle pulse animation.

Position left or right freely selectable.

Seven color themes: blue, green, red, purple, orange, turquoise and dark.

Adjustable size between 45 and 80 pixels.

Choice between SVG icons, emojis or your own icons.

Panel

Soft slide animation when opening and closing.

Scrollable with extensive options.

Responsive design for desktop, tablet and smartphone.

Functions are divided into logical groups.

Accessibility of the plugin itself

Full keyboard control.

ARIA labels for screen reader support.

Optimized for common screen readers.

Visible focus frames for better orientation.

Keyboard shortcuts

Main functions

Read Selected Text

Windows: Ctrl + R

Mac: Cmd + R

Function: Reads the highlighted text on the page.

Application: Select text and press keyboard shortcut.

Stop reading (Stop Reading)

Windows and Mac: Escape

Function: Stops any active text playback immediately.

User interface (UI components)

Toggle Sidebar

Windows: Ctrl + B

Mac: Cmd + B

Function: Opens or closes the sidebar.

Carousel Navigation

Left and right arrow keys: Navigation between slides.

Enhanced Text Selection

Shift + arrow keys: selection of text areas by keyboard.

Supports all common navigation keys such as Home, End, Page Up/Down.

Accessibility features

Text-to-speech control

Start or stop reading pages.

Read selected text with a keyboard shortcut.

Adjustable reading speed (0.75x, 1x, 1.25x).

Visual adjustments

Change font size and character spacing.

Invert colors or display them in grayscale.

Highlight or underline links.

Navigation aids

Line ruler that follows the mouse.

Large, clearly visible mouse pointer.

Improved focus indicators for keyboard operation.

Technical implementation

Keyboard commands are recognized by JavaScript event listener.

Use of keydown events with control of the modifier keys (Ctrl or Cmd).

Browser's default actions are suppressed when shortcuts are enabled.

Compatible with all modern browsers.

Language support

All functions and keyboard shortcuts are available in both German and English.

Example:

English: Ctrl + R for text read aloud.

English: Ctrl + R for text reading.

Compliance with accessibility standards

The BarrierFree plugin meets current web accessibility guidelines.

All functions are fully keyboard-navigable and specially optimized for users who depend on keyboard inputs or screen readers.

Quick reference

Function Windows Mac Description

Read text aloud Ctrl + R Cmd + R Read marked text

Stop playback Escape Escape Stops voice output

Open/Close Sidebar Ctrl + B Cmd + B Show or hide toolbar

Carousel navigation ← → ← → Navigate through slides

Text selection Shift + Arrows Shift + Arrows Advanced text selection

Version: 2.0.4

Plugin: BarrierFree – Accessibility for Joomla

Developer: der-it-blog.de

Joomla 4 / 5 / 6  – BarrierFree Plugin v2.0.4
„Gemeinsam machen wir BarrierFree besser! Unterstützen Sie uns mit einer Spende und helfen Sie, das Projekt für alle voranzubringen.“

Version 2.0.4 – Wichtige Verbesserungen & Joomla 6-Kompatibilität
Mit Version 2.0.4 erhält die Erweiterung ein bedeutendes Update, das insbesondere die mobile Benutzerfreundlichkeitverbessert, vollständige Unterstützung für Joomla 6 bietet und mehrere Optimierungen im Nutzererlebnis enthält. Außerdem wurde ein kritischer Fehler behoben, der das Öffnen des Panels auf mobilen Geräten verhinderte.

? Wichtige Neuerungen
1. Verbesserte Mobile-Unterstützung
Einführung von Touch-Event-Handling für sofortige Reaktion auf mobilen Geräten
Keine 300 ms Verzögerung mehr beim Öffnen des Panels
Unterstützung von touchstart, touchend und touchmove
Verbesserte Gestensteuerung für ein flüssigeres Nutzererlebnis
2. Neues Installations-Script (script.php)
Automatische Cache-Bereinigung bei Updates
Benutzerbenachrichtigungen während Installation, Update und Deinstallation
Integrierte Versionsprüfung und Upgrade-Verwaltung
Sprachdateien werden jetzt zuverlässig geladen
3. Vollständige Joomla 6-Kompatibilität
Anpassung an die neue Joomla 6.x-Architektur
Verwendung moderner Strukturen wie Factory::getContainer()
Durchgehende Kompatibilität mit Joomla 4.x, 5.x und 6.x
Komplette Funktionsbeschreibung

? Überblick
BarrierFree Plugin v2.0.4
Barrierefreiheit für Joomla 5 & 6  – entwickelt von der-it-blog.de (Mertsch-Web)

Das BarrierFree Plugin Version 2.0.3 ist ein leistungsstarkes Accessibility-Tool für Joomla 5.
Es unterstützt Menschen mit unterschiedlichen Einschränkungen dabei, Webseiten barrierefrei zu nutzen.
Über eine intuitive Toolbar stehen zahlreiche Anpassungsfunktionen zur Verfügung, die das Lesen, Navigieren und Interagieren erleichtern.

Hauptfunktionen
1. Text-to-Speech (Sprachausgabe)

Liest automatisch alle Inhalte der aktuellen Seite vor.
Alternativ kann markierter Text mit der Tastenkombination Strg + R (Windows) oder Cmd + R (Mac) vorgelesen werden.
Unterstützt Deutsch (de-DE) und Englisch (en-GB).
Die Lesegeschwindigkeit kann individuell angepasst werden.
Intelligente Erkennung blendet Menüs und Navigationsbereiche automatisch aus.
Das aktuell gelesene Element wird visuell hervorgehoben.
Bei Fensterwechsel wird die Wiedergabe automatisch pausiert und beim Zurückkehren fortgesetzt.
2. Anpassung der Schriftgröße

Skalierung von 70 % bis 200 % in 10 %-Schritten.
Bedienelemente: A+ (größer), A- (kleiner), A (Standard).
Die gewählte Einstellung bleibt im Browser gespeichert.
Optimiert für alle Bildschirmgrößen und Geräte.
3. Zeichen- und Wortabstand

Drei Stufen: Normal, 1 Pixel, 2 Pixel, 3 Pixel.
Der Wortabstand wird automatisch mit angepasst.
Bedienelemente: aA+ (größer), aA- (kleiner), aA (Standard).
4. Visuelle Anpassungen

Graustufenmodus: Wandelt alle Farben in Graustufen um, die Toolbar bleibt farbig.
Farbinversion: Schwarzer Hintergrund mit weißer Schrift für bessere Lesbarkeit bei Lichtempfindlichkeit.
5. Link-Funktionen

Link-Hervorhebung: Gelber Hintergrund, schwarze Schrift, rote Umrandung und zusätzliche Unterstreichung.
Link-Unterstreichung: Alle Links werden unterstrichen – unabhängig von der Hervorhebung.
6. Zeilenlineal (Reading Ruler)

Eine gelbe, 3 Pixel hohe Linie folgt der Mausbewegung.
Sanfte Bewegung mit CSS-Übergang.
Leuchtrand (Glow-Effekt) für bessere Sichtbarkeit.
7. Großer Mauszeiger

Weißer Kreis (32x32 Pixel) mit schwarzer Umrandung.
Spezieller Cursor (X-Symbol) für Links und Buttons.
SVG-basiert für scharfe Darstellung auf allen Displays.
8. Mehrsprachigkeit

Sprachen: Deutsch und Englisch.
Automatische Spracherkennung anhand der Browsereinstellungen.
Die gewählte Sprache wird für zukünftige Besuche gespeichert.
Design und Bedienkomfort
Toolbar

Floating-Button mit sanfter Pulsanimation.
Position links oder rechts frei wählbar.
Sieben Farbthemen: Blau, Grün, Rot, Lila, Orange, Türkis und Dunkel.
Einstellbare Größe zwischen 45 und 80 Pixel.
Auswahl zwischen SVG-Icons, Emojis oder eigenen Symbolen.
Panel

Weiche Slide-Animation beim Öffnen und Schließen.
Scrollbar bei umfangreichen Optionen.
Responsives Design für Desktop, Tablet und Smartphone.
Funktionen sind in logische Gruppen gegliedert.
Barrierefreiheit des Plugins selbst
Vollständige Tastatursteuerung.
ARIA-Labels für Screenreader-Unterstützung.
Optimiert für gängige Screenreader.
Sichtbare Fokusrahmen für bessere Orientierung.
Tastaturbefehle
Hauptfunktionen
Text vorlesen (Read Selected Text)

Windows: Strg + R
Mac: Cmd + R
Funktion: Liest den markierten Text auf der Seite vor.
Anwendung: Text markieren und Tastenkombination drücken.
Vorlesen stoppen (Stop Reading)

Windows und Mac: Escape
Funktion: Stoppt jede aktive Textwiedergabe sofort.
Benutzeroberfläche (UI-Komponenten)
Sidebar umschalten (Toggle Sidebar)

Windows: Strg + B
Mac: Cmd + B
Funktion: Öffnet oder schließt die Seitenleiste.
Karussell-Navigation (Carousel Navigation)

Pfeiltasten links und rechts: Navigation zwischen Folien.
Erweiterte Textauswahl (Enhanced Text Selection)

Shift + Pfeiltasten: Auswahl von Textbereichen per Tastatur.
Unterstützt alle gängigen Navigationstasten wie Home, End, Page Up/Down.
Barrierefreiheitsfunktionen
Text-zu-Sprache-Steuerung

Seitenvorlesen starten oder stoppen.
Markierten Text mit Tastenkombination vorlesen.
Anpassbare Lesegeschwindigkeit (0,75x, 1x, 1,25x).
Visuelle Anpassungen

Schriftgröße und Zeichenabstände ändern.
Farben invertieren oder in Graustufen anzeigen.
Links hervorheben oder unterstreichen.
Navigationshilfen

Zeilenlineal, das der Maus folgt.
Großer, gut sichtbarer Mauszeiger.
Verbesserte Fokus-Indikatoren für Tastaturbedienung.
Technische Umsetzung
Tastaturbefehle werden per JavaScript-Eventlistener erkannt.
Verwendung von keydown-Events mit Kontrolle der Modifikatortasten (Strg oder Cmd).
Standardaktionen des Browsers werden bei aktivierten Kürzeln unterdrückt.
Kompatibel mit allen modernen Browsern.
Sprachunterstützung
Alle Funktionen und Tastenkürzel sind sowohl auf Deutsch als auch auf Englisch verfügbar.
Beispiel:

Deutsch: Strg + R für Text vorlesen.
Englisch: Ctrl + R for text reading.
Einhaltung von Barrierefreiheitsstandards
Das BarrierFree Plugin erfüllt aktuelle Web-Accessibility-Richtlinien.
Alle Funktionen sind vollständig tastaturnavigierbar und speziell für Nutzer optimiert, die auf Tastatureingaben oder Screenreader angewiesen sind.

Schnellreferenz
Funktion Windows Mac Beschreibung
Text vorlesen Strg + R Cmd + R Markierten Text vorlesen
Wiedergabe stoppen Escape Escape Stoppt Sprachausgabe
Sidebar öffnen/schließen Strg + B Cmd + B Toolbar ein- oder ausblenden
Karussell-Navigation ← → ← → Durch Folien navigieren
Textauswahl Shift + Pfeile Shift + Arrows Erweiterte Textauswahl
Version: 2.0.4
Plugin: BarrierFree – Barrierefreiheit für Joomla
Entwickler: der-it-blog.de

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:
2.0.4
Developer:
Mertsch-Web
Last updated:
Oct 14 2025
1 week ago
Date added:
May 26 2025
License:
GPLv2 or later
Type:
Free download
Includes:
p
Compatibility:
J4 J5 J6
Download

Uses Joomla! Update System

Score:


Write a review