Barrierefreiheit in Joomla

Jeder Benutzer hat individuelle Anforderungen und Joomla berücksichtigt sie alle. Neben den im Core integrierten Maßnahmen zur Barrierefreiheit gibt es zusätzliche Erweiterungen, die das Nutzererlebnis verbessern – für Autoren, Besucher und Kunden.

Diese Erweiterungen sind hilfreich, doch sie ersetzen keine grundlegende barrierefreie Gestaltung der Website!

Überschriften

Grundsätzlich sollte jede Seite eine h1-Überschrift haben: Im Menüpunkt kann eingestellt werden, ob die Seitenüberschrift angezeigt werden soll oder nicht.

• Wenn sie angezeigt wird, dann ist der Artikeltitel automatisch eine h2.
• Wenn nicht, wird der Artikeltitel als h1 angezeigt.

Basierend auf dieser Konfiguration kann der Inhalt eines Beitrags mit den richtigen Überschriften weiter strukturiert werden.

Leseempfehlung

WCAG Erfolgs-Kriterium (SC) 1.3.1: https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships 

WCAG Erfolgs-Kriterium (SC) 2.4.6: https://www.w3.org/WAI/WCAG21/Understanding/headings-and-labels 

Alternativer Text für Bilder

Joomla bietet die Möglichkeit, ein Bild als nur „dekorativ“ zu markieren und das alt-Attribut wird korrekt leer (alt=“”) hinzugefügt.

Leseempfehlung

WCAG Erfolgs-Kriterium (SC) 1.1.1: https://www.w3.org/WAI/WCAG21/Understanding/non-text-content 

Tabellen

TinyMCE ist hier wirklich gut:

• Beschriftung (caption) der Tabelle hinzufügen
• Zellentyp festlegen: normale Zelle oder Kopfzelle
• Gültigkeitsbereich der Überschrift (für Zeile oder Spalte) festlegen

Leseempfehlung

WCAG Erfolgs-Kriterium (SC) 1.3.1: https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships 

Weiterlesen-Button

Joomla fügt ein „aria-label”-Attribut zu den Schaltflächen hinzu, sodass Screenreader-Benutzer mehr Informationen als nur ein „Weiterlesen“ erhalten.

Language of Parts in TinyMCE

Damit kann man einen Teil eines Textes als „andere Sprache“ markieren: das „lang“-Attribut wird ergänzt. Es ist nützlich für Suchmaschinen oder Bildschirmleser, damit die Sprache oder Aussprache angepasst wird.

Im TinyMCE-Plugin können die Sprachen definiert werden, die in den Texten verwenden werden sollen.

Das Sprachsymbol (Weltkugel) kann zu den erlaubten Symbolen in der Toolbar geschoben werden, um die Arbeit der Redakteure einfacher zu machen. Ansonsten muss die Sprache unter Format -> Sprache ausgewählt werden.

Leseempfehlung

WCAG Erfolgs-Kriterium (SC) 3.1.2: https://www.w3.org/WAI/WCAG21/Understanding/language-of-parts.html 

Barrierefreiheits-Checker: jooa11y

Das Plugin “jooa11y” ist seit Joomla 4.1 im Core und standarmäßig im Backend aktiviert.

Im Plugin kann festlegt werden, welcher Bereich der Website überprüft wird (Standard ist der Hauptbereich - main).

Der Button “Barriere-Check” erscheint in der Symbolleiste (neben Speichern, Schließen, usw.) von bereits gespeicherten Beiträgen. Wenn man draufklickt, öffnet sich eine Vorschau der Seite mit dem Barriere-Checker, wo die Verstöße angezeigt werden. Außerdem können hier einige Regeln aktiviert oder deaktiviert werden.

Wie bei allen automatischen Prüfsystemen ist das nur ein Werkzeug. Es kann nur Verstöße gegen Regeln finden, die im Programm festgelegt sind. Es kann aber auch „Fehler“ melden, die im Rahmen eines Artikels beabsichtigt sind.

Backend: individuelle Anpassungsmöglichkeiten

Joomla ermöglicht es Nutzern, ihre Backend-Einstellungen nach ihren Bedürfnissen zu konfigurieren. Diese Optionen lassen sich über das Benutzerprofil (Benutzer → Verwalten) und das Benutzermenü im oberen rechten Bereich des Backends steuern.

Vier individuelle Einstellungen stehen zur Verfügung, die einzeln oder kombiniert genutzt werden können:

• Monochrom: Ändert die Farbdarstellung von Blau auf Schwarz-Weiß.
• Hoher Kontrast: Reduziert Hintergründe und erhöht den Kontrast.
• Links hervorheben: Markiert alle Links im Backend für bessere Sichtbarkeit.
• Schriftgröße erhöhen: Setzt die Standardgröße auf 18px (statt der üblichen 16px).

Skip-to Navigation

Dieses Plugin ist standardmäßig im Backend aktiviert, kann aber auch für das Frontend eingesetzt werden. Es hilft Tastatur-Nutzern, gezielt zu bestimmten Bereichen der Website zu springen.

Zusätzliche Barrierefreiheitsfunktionen

Mit diesem Plugin können Besucher ihrer individuellen Bedürfnisse entsprechend Anpassungen vornehmen:

• Schriftgröße und Textabstand anpassen
• Farben invertieren
• Links optisch hervorheben
• Mauszeiger vergrößern
• Zeilenlineal
• Text-zu-Sprache-Funktion nutzen

Das Plugin fügt zudem einen Button am Seitenende hinzu, der per Hotkey geöffnet werden kann:

• Windows: STRG + ALT + A
• MacOS: CTRL + OPTION + A

Wichtige Hotkeys:

Nicht alle Funktionen sind in jedem Browser vorhanden.

Die genannten Funktionen sind nützlich, aber sie garantieren keine vollständige Barrierefreiheit! Eine Webseite muss von Grund auf richtig strukturiert sein. Menschen mit Behinderungen verwenden spezielle Tools (Screenreader, Bildschirmlupen, Brailletastatur, usw.) und werden das Plugin wahrscheinlich nicht nutzen, aber es kann die Bedienbarkeit verbessern für:

• ältere Menschen (z. B. Schriftvergrößerung - Senioren wissen oft nicht, dass man im Browser die Schriftgröße ändern kann.
• Sehbehinderte (z. B. Farben umkehren).
• Menschen mit kognitiven Problemen (z. B. Zeilenlineal).
• Menschen, die Leseschwierigkeiten haben (z. B. Text vorlesen).

WCAG verlangt nicht, dass die Links unterstrichen sein müssen (sie müssen hervorgehoben werden). Aber unterstrichene Links können die Bedienbarkeit verbessern.

Fazit

Alle hier vorgestellten Einstellungen und Plugins lösen keine Barriere-Probleme auf einer Website. Um eine Website barrierefrei zu machen, braucht man eine korrekte semantische HTML-Struktur und gutes CSS. Joomla Core hilft mit barrierefreien Strukturen in den verschiedenen Ansichten, wie korrekte Beschriftungen (label) und Eingabefelder (input, select) in Formularen.

Wenn ein Template eines Drittanbieters verwendet wird, sollte man sich bewusst sein, dass die ursprüngliche Struktur der Ansichten durch Overrides verändert sein können. Ein schönes Template kann die Zugänglichkeit einer Website beeinträchtigen, wenn der Farbkontrast nicht gut ist oder wenn Elemente nicht mit der Tastatur erreichbar sind.

Barrierefreiheit hat viele Facetten, und Plugins sind nur eine Hilfe für Besucher, die (d)eine Website auf eine andere Weise nutzen als du selbst.

Dieser Artikel basiert auf einem im Joomla Magazine bereits erschienenen Beitrag (https://magazine.joomla.org/all-issues/march-2022/explore-the-core-accessibility-add-ons-in-joomla-4-1 - mit Christiane Maier-Stadtherr) und auf einem Vortrag beim JoomlaDay DACH 2023 (https://www.dr-menzel-it.de/jd23dach/).

Foto von Josh Calabrese auf Unsplash