Jeder hat seine eigenen Vorlieben und Bedürfnisse – und Joomla kümmert sich um sie alle.

Zusätzlich zu allen im Kern getroffenen Maßnahmen zur Bereitstellung eines barrierefreien Autorentools gibt es in Joomla Add-ons, die Ihnen das Leben erleichtern und dafür sorgen können, dass sich Ihre Benutzer und Kunden wohler fühlen. 

Diese Ergänzungen können nützlich sein – aber seien Sie sich bewusst, dass sie eine Website nicht allein barrierefrei machen!

Backend: Individuelle Barrierefreiheitseinstellungen

In Joomla 4 ist es möglich, die Einstellungen für das Backend benutzerspezifisch zu ändern: Jeder Benutzer kann das Backend an seine Bedürfnisse anpassen. Die Einstellungen zur Barrierefreiheit finden Sie unter dem Benutzerprofil (Benutzer -> Verwalten) und im Benutzermenü oben rechts in Ihrem Backend.

 

Es gibt vier verschiedene Einstellungen, die einzeln oder in Kombination verwendet werden können. Monochrom ändert die Farben des Backends von Blau zu Schwarz/Weiß:

„Hoher Kontrast“ entfernt einen Teil des Hintergrunds und macht den Kontrast heller:

 

„Links hervorheben“ fügt allen Links im Backend Unterstreichungen und Rahmen hinzu:

Mit „Schriftgröße erhöhen“ wird die Grundschriftgröße auf 18 Pixel geändert (die Standardschriftgröße in Browsern beträgt meist 16 Pixel).

Für Benutzer: Skip-to-navigation Plugin

Dieses Plugin ist standardmäßig für das Backend aktiviert, kann aber auch für das Frontend aktiviert werden.

 

Es hilft Tastaturbenutzern, direkt zu einem Bereich der Website zu springen. 

Für Benutzer: Barrierefreiheits-Plugin

Die Barrierefreiheitseinstellungen sind nützlich, um das Backend für jeden einzelnen Backend-Benutzer anzupassen. Es ist aber auch möglich, Barrierefreiheitsfunktionen für die Besucher Ihrer Seite anzubieten. Das Plugin „Zusätzliche Barrierefreiheitsfunktionen“ kann für Backend, Frontend oder beide aktiviert werden: 

 

Das Plugin fügt unten auf der Seite eine Schaltfläche hinzu. Zum Öffnen/Schließen der Funktionen können Sie einen Hotkey verwenden, STRG+ALT+A unter Windows oder STRG+OPTION+A unter MacOS.

 

Mit dem Plugin kann der Benutzer die Schriftgröße vergrößern oder verkleinern und den Textabstand vergrößern oder verkleinern, um die Lesbarkeit des Inhalts zu verbessern.

Der Benutzer kann außerdem die Farben der Seite umkehren, allen Links Unterstreichungen hinzufügen, den Cursor vergrößern, eine Lesehilfe aktivieren und auch Text in Sprache umwandeln.

Screenshot Firefox

 

Es gibt eine Funktion zum Ändern der Grautöne der Seite, die in Edge oder Chrome verwendet werden kann, in Firefox jedoch deaktiviert ist.

Screenshot Edge

 

Für einige Funktionen gibt es spezielle Hotkeys:

Modul oder Funktion	Hotkey
Menü umschalten	STRG + ALT + A
Grautöne	STRG + ALT + G
Unterstreichen Sie Links	STRG + ALT + U
Großer Cursor	STRG + ALT + C
Leseführer	STRG + ALT + R
Text zu Sprache	STRG + ALT + T
Sprache zum Text	STRG + ALT + S

Screenshot der Cassiopeia-Demoseite mit aktiviertem Leseführer

 

Das Plugin „Zusätzliche Barrierefreiheitsfunktionen“ löst keine eventuellen Barrierefreiheitsprobleme Ihrer Website. Die Website muss von Anfang an korrekt für die Barrierefreiheit aufgebaut sein.

Menschen mit Behinderungen verwenden spezielle Tools (Screenreader, Bildschirmlupen, Braille-Präger usw.) und werden das Plugin wahrscheinlich nicht verwenden, aber es kann die Benutzerfreundlichkeit für ältere Menschen, Menschen mit Sehbehinderungen und Menschen mit kognitiven Problemen verbessern. Beispielsweise wird eine blinde Person einen Screenreader verwenden und nicht die Option, Text in Sprache umzuwandeln. Dies ist jedoch eine sehr gute Lösung für ältere Menschen, für Menschen mit Konzentrationsschwierigkeiten und auch für diejenigen, die vorübergehende Leseprobleme haben.

Für viele Senioren und Sehbehinderte ist die Textvergrößerung sehr sinnvoll, denn sie kennen die Möglichkeiten des Browsers oft nicht und nutzen solche Tools gerne.

Die Kontrastversion ersetzt nicht die korrekten Kontraste auf der Website. Sie kann jedoch für Personen mit schwächerem Sehvermögen oder für Personen, die die Website beispielsweise an einem sonnigen Ort durchsuchen, hilfreich sein.

WCAG verlangt nicht, dass die Links unterstrichen werden (sie müssen hervorgehoben werden). Unterstrichene Links können jedoch die Zugänglichkeit für sehbehinderte Menschen oder Menschen mit Konzentrationsschwierigkeiten verbessern.

Für Benutzer: Sprache der Teile in TinyMCE

Was ist es?

Ein Tag, der einen Teil eines Textes als „andere Sprache“ markiert. Es ist nützlich für Suchmaschinen oder Screenreader, damit sie wissen, dass sie ihre Sprache oder Aussprache ändern müssen. Stellen Sie sich vor, ein Screenreader verwendet die englische Aussprache für einen Satz wie „honni soit qui mal y pense“ – klingt seltsam!

Wie konfiguriere ich?

Im TinyMCE-Plugin können Sie die Sprachen definieren, die Sie in Ihren Texten verwenden. 

 

Wenn Sie es den Redakteuren einfacher machen möchten, ziehen Sie das Sprachsymbol auf die für Ihre Redakteure zulässigen Symbole. Andernfalls müssen sie mit der Formatschaltfläche eine Sprache auswählen und dort nach unten scrollen.

Wie verwende ich es im Editor?

Schreiben Sie Ihren Artikel und speichern Sie ihn. Markieren Sie dann Teile, die in einer anderen Sprache verfasst sind, klicken Sie auf das Weltsymbol oder das Format-Dropdown und wählen Sie die Sprache dieses Teils aus.

 

Jetzt ist dieser Teil des Textes als Deutsch markiert. Der Screenreader ändert die Aussprache entsprechend und auch Suchmaschinen werden Ihren Text verstehen.

Für Autoren und Herausgeber: Barrierefreiheitsprüfung – jooa11y 

Erinnern Sie sich an diesen Artikel von Brian Teeman, der eine neue und aufregende Erweiterung von Joomla ankündigt: https://magazine.joomla.org/all-issues/july-2021/a-web-without-barriers. 

Jetzt haben wir es an Bord! 

Dieses Plugin hilft dabei, barrierefreie Inhalte auf Ihrer Website bereitzustellen.

Wo kannst du es finden?

Es ist ein System-Plugin, sein Name ist jooa11y. Sie haben dieses Plugin mit Joomla Version 4.1.0, es ist standardmäßig aktiviert. 

 

Im Plugin können Sie festlegen, welcher Bereich Ihrer Website überprüft wird (Standard ist der Hauptbereich) und Sie können einige Regeln ein- oder ausschließen. Für den Anfang behalten Sie einfach die vordefinierten Einstellungen bei.

Wer profitiert davon?

Besucher Ihrer Seite, weil sie barrierefreie Inhalte erhalten.

Autoren von Inhalten auf Ihrer Website, weil sie barrierefreie Inhalte erstellen können.

Agenturen und Webentwickler – sie verfügen über Produkte, die die Bereitstellung barrierefreier Inhalte ermöglichen

Wie benutzt man es?

Schreiben Sie einen beliebigen Artikel und speichern oder öffnen Sie einen vorhandenen Artikel. 

Aktivieren Sie den Button „Barrierefreiheitsprüfung“ in der Symbolleiste und sofort zeigt Ihnen die Barrierefreiheitsprüfung in einem Vorschaufenster an, ob Verstöße gegen die bekannten Regeln vorliegen. 

Bitte beachten Sie: Genau wie bei einer Rechtschreib- oder Grammatikprüfung handelt es sich hierbei um ein Tool, das automatische Prüfungen durchführt. Es kann keine Verstöße gegen Regeln finden, die nicht im Programm festgelegt sind, und es kann Verstöße markieren, die im Kontext eines Artikels beabsichtigt und korrekt sind. Es liegt immer in Ihrer Verantwortung.

Wie funktioniert es?

Sie erinnern sich sicherlich an die berühmte Regel „Kontrast von Textfarbe und Hintergrundfarbe muss ein Kontrastverhältnis von > 4,5 haben“?

Das Plugin prüft diese und viele andere Regeln nacheinander und jeder Verstoß gegen eine Regel löst einen Fehler aus und wird in der Vorschau mit einem Symbol markiert.

Sie können festlegen, welcher Bereich Ihrer Website überprüft wird (in den Plugin-Parametern ist der Hauptbereich standardmäßig aktiviert) und Sie können einige Regeln einschließen oder ausschließen. 

Während einige Regeln klar definiert sind und eindeutig Fehler darstellen, stellen andere Regeln Verstöße gegen bewährte Verfahren dar. Es handelt sich um Warnungen, und Sie können selbst entscheiden, ob dies in Ihrem Kontext in Ordnung und beabsichtigt ist oder ob Sie dies beheben müssen. 

Hinter jedem Symbol finden Sie eine Beschreibung – und manchmal auch Ratschläge zur Lösung des Problems oder zur besten Vorgehensweise.

 

Rechts unten liefert das Checker-Symbol die ersten Informationen. Es zeigt die Anzahl der Probleme an, wenn Probleme gefunden wurden. Durch Klicken auf die Schaltfläche werden detaillierte Informationen im Text angezeigt.

Lassen Sie uns Schritt für Schritt durchgehen: 

Der Prüfer wurde gefunden

• Kontrastfehler an zwei Stellen – das sind Fehler.
• Ein Link mit target=_blank. Das kann richtig und beabsichtigt sein – aber im Allgemeinen ist es keine gute Vorgehensweise und daher wird eine Warnung angezeigt. 
• Ein Bild ohne Alt-Text – das ist ein Fehler. 

Bemerkungen

Alle hier vorgestellten Einstellungen und Plugins lösen kein Barrierefreiheitsproblem auf Ihrer Website. Um eine Website barrierefrei zu machen, benötigen Sie eine korrekte semantische HTML-Struktur und gutes CSS. Joomla Core hilft Ihnen bei barrierefreien Strukturen in den verschiedenen Ansichten, wie korrekten Beschriftungen und Eingabefeldern in Formularen. 

Wenn Sie eine Vorlage eines Drittanbieters verwenden, sollten Sie sich darüber im Klaren sein, dass durch Überschreibungen die ursprüngliche Struktur der Ansichten verändert wird. Eine schöne Vorlage kann die Zugänglichkeit einer Website beeinträchtigen, wenn der Farbkontrast nicht gut ist oder Elemente nicht über die Tastatur erreichbar sind. Die Zugänglichkeit hat viele Facetten und Plugins sind nur eine Hilfe für Besucher, die Ihre Website auf andere Weise nutzen als Sie.

Raum für Verbesserung

Joomla ist immer „work in progress“ und die hier besprochenen Plugins entwickeln sich noch weiter. Im nächsten Google Summer of Code haben wir ein Barrierefreiheitsprojekt aufgenommen, das das Barrierefreiheits-Plugin verbessern soll. Bleiben Sie dran und denken Sie barrierefrei!

Danke

Dieser Artikel ist eine Koproduktion mit Christiane Maier-Stadtherr . Unter diesem Link finden Sie weitere Artikel von Christiane .

Wir danken Stefan Wajda für seine hilfreichen Kommentare.