Joomla und BFSG: Barrierefreiheit für Joomla-Webseiten umsetzen

Joomla und Barrierefreiheit: Eine lange Geschichte

Joomla gehört zu den CMS-Systemen die Barrierefreiheit schon früh ernst genommen haben. Bereits Joomla 3 hatte grundlegende Accessibility-Features, und mit Joomla 4 wurde Barrierefreiheit zum Kernfeature erklärt. Das Joomla Accessibility Team hat Standards definiert die in den Core einfließen.

Für BFSG-Konformität ist das eine gute Ausgangsbasis – aber Templates und Extensions können diese Arbeit zunichte machen.

Seit dem Inkrafttreten des Barrierefreiheitsstärkungsgesetzes (BFSG) im Juni 2025 müssen alle Webseiten und Online-Shops, die unter § 1 Abs. 2 BFSG fallen, die Anforderungen der EN 301 549 und damit der WCAG 2.1 Level AA erfüllen. Joomla-Betreiber stehen vor der Frage: Reicht das, was Joomla mitbringt, oder muss nachgebessert werden?

Die Antwort: Joomla liefert eine der besten Grundlagen aller CMS-Systeme. Aber "gut" reicht nicht für "konform". In diesem Artikel zeigen wir, was Joomla 4 und 5 können, wo die Lücken liegen und wie du sie schließt. Weitere Informationen finden Sie im BFSG-Glossar.

Hinweis: Dieser Artikel dient der allgemeinen Orientierung und ersetzt keine individuelle Rechtsberatung. Das BFSG und die zugrundeliegende EU-Richtlinie (European Accessibility Act) haben Ausnahmen und Übergangsfristen, die im Einzelfall geprüft werden sollten.

Was Joomla 4/5 für Barrierefreiheit bietet

Skip-Navigation-Links im Core. Semantisches HTML im Standard-Template Cassiopeia. ARIA-Landmarks und Rollen in der Grundstruktur.

Fokus-Management für modale Fenster. Kontrastreiche Farbpalette im Cassiopeia-Template. Und einen eingebauten Accessibility Checker im Backend.

All das funktioniert – solange du beim Standard-Template bleibst oder ein barrierefreies Drittanbieter-Template nutzt.

Cassiopeia-Template: Das a11y-Flaggschiff

Das mit Joomla 4 eingeführte Standard-Template Cassiopeia ist eines der barrierefreiesten CMS-Standard-Templates auf dem Markt. Es erfüllt zahlreiche WCAG-Kriterien out of the box:

Semantische Seitenstruktur (WCAG SC 1.3.1 – Info and Relationships): Cassiopeia nutzt <header>, <nav>, <main>, <aside> und <footer> korrekt. Screenreader wie NVDA oder JAWS erkennen die Seitenregionen automatisch.

Skip-Link (WCAG SC 2.4.1 – Bypass Blocks): Ein versteckter "Skip to main content"-Link ist im Template-Core verankert. Tastaturnutzer können die Navigation überspringen und direkt zum Inhalt navigieren.

Fokus-Indikatoren (WCAG SC 2.4.7 – Focus Visible): Cassiopeia liefert sichtbare Fokus-Outlines für interaktive Elemente. Der Standard-Fokusring ist deutlich genug für die meisten Anwendungsfälle.

Farbkontrast (WCAG SC 1.4.3 – Contrast Minimum): Die Standard-Farbpalette erreicht ein Kontrastverhältnis von mindestens 4.5:1 für normalen Text. Die voreingestellten Farbschemata (Standard, Alternative) sind auf Kontrast optimiert.

Joomla Accessibility Checker: Das eingebaute Audit-Tool

Seit Joomla 4.1 enthält das Backend einen integrierten Accessibility Checker. Wenn Redakteure einen Beitrag bearbeiten, prüft das Tool den Inhalt auf häufige Fehler:

Fehlende oder leere Alt-Texte bei Bildern. Leere Überschriften-Tags. Überschriften-Hierarchie-Sprünge (z.B. h2 direkt gefolgt von h4). Kontrast-Probleme in Inline-Styles. Und fehlende Formular-Labels.

Das Tool ist kein vollständiges BFSG-Audit – es prüft nur den Beitragsinhalt, nicht das gesamte Template oder die Extensions. Aber es hilft Redakteuren, grobe Fehler sofort zu erkennen und zu beheben.

Das Override-System: Barrierefreiheit ohne Core-Hacks

Joomlas Template-Override-System ist ein mächtiges Werkzeug für Barrierefreiheit. Statt den Core-Code zu ändern (was bei Updates überschrieben wird), kannst du das HTML einzelner Komponenten über Template-Overrides anpassen.

Der Weg: Im Backend unter System → Templates → Cassiopeia → Overrides erstellen. Dort lassen sich die HTML-Ausgaben von Modulen, Komponenten und Layouts individuell anpassen. Ein Beispiel für einen barrierefreien Override des Kontaktformulars:

<!-- templates/cassiopeia/html/com_contact/contact/default_form.php -->
<form id="contact-form" action="..." method="post">
  <fieldset>
    <legend>Kontaktformular</legend>
    <div class="control-group">
      <label for="jform_contact_name" class="required">
        Name <span aria-hidden="true">*</span>
      </label>
      <input type="text" id="jform_contact_name"
             name="jform[contact_name]"
             required aria-required="true"
             autocomplete="name">
    </div>
    <div class="control-group">
      <label for="jform_contact_email" class="required">
        E-Mail <span aria-hidden="true">*</span>
      </label>
      <input type="email" id="jform_contact_email"
             name="jform[contact_email]"
             required aria-required="true"
             autocomplete="email">
    </div>
  </fieldset>
</form>

Dieses Muster stellt sicher, dass jedes Eingabefeld ein zugeordnetes <label> hat (WCAG SC 1.3.1), Pflichtfelder mit aria-required="true" gekennzeichnet sind (WCAG SC 3.3.2 – Labels or Instructions) und autocomplete-Attribute gesetzt sind (WCAG SC 1.3.5 – Identify Input Purpose).

Das Template-Problem

Die meisten Barrierefreiheits-Probleme in Joomla entstehen durch Drittanbieter-Templates. Viele kommerzielle Joomla-Templates (von Anbietern wie JoomShaper, Gavick oder RocketTheme) sehen gut aus, ignorieren aber Barrierefreiheit komplett. Fehlende Skip-Links, nicht-semantisches HTML, Kontrast-Probleme und JavaScript-abhängige Navigation sind häufig.

Bevor du ein Template kaufst: Teste es mit Tastatur und prüfe es mit einem Scanner.

Typische Template-Probleme und WCAG-Verstöße

Wir sehen bei Joomla-Template-Audits immer wieder dieselben Muster:

Mega-Menüs ohne Tastatursteuerung: Dropdown-Untermenüs öffnen sich nur bei Hover, sind per Tastatur nicht erreichbar. Das verstößt gegen WCAG SC 2.1.1 (Keyboard) – alle Funktionen müssen per Tastatur bedienbar sein.

Slider und Karussells ohne Steuerung: Automatisch rotierende Header-Slider ohne Pause-Button verstoßen gegen WCAG SC 2.2.2 (Pause, Stop, Hide). Oft fehlen auch Pfeiltasten-Navigation und Screenreader-Beschriftungen.

Modale Fenster ohne Fokus-Falle: Lightboxes und Popups, bei denen der Tastaturfokus aus dem Modal herauswandern kann, verstoßen gegen WCAG SC 2.4.3 (Focus Order).

Dekorative Icons als einzige Beschriftung: Font-Awesome-Icons ohne sichtbaren Text oder aria-label lassen Screenreader-Nutzer im Dunkeln – ein Verstoß gegen WCAG SC 1.1.1 (Non-text Content).

Falls du nicht sicher bist, ob dein aktuelles Template BFSG-konform ist, hilft ein schneller automatisierter Scan als erster Anhaltspunkt.

Extension-Audit: Jede Erweiterung ist ein Risiko

Joomla lebt von seinem Extension-Ökosystem. Aber jede installierte Erweiterung bringt eigenes HTML, CSS und JavaScript mit – und kann die Barrierefreiheit deiner Seite zerstören. Typische Problemkandidaten:

Formular-Extensions (RSForm, ChronoForms, Balbooa Forms): Prüfe ob jedes Eingabefeld ein zugeordnetes <label>-Element hat. Fehlerhafte Validierungsmeldungen müssen per aria-live="assertive" oder role="alert" für Screenreader zugänglich sein (WCAG SC 3.3.1 – Error Identification).

E-Commerce-Extensions (VirtueMart, HikaShop): Produktkataloge, Warenkörbe und Checkout-Prozesse sind besonders kritisch. Hier greifen die BFSG-Anforderungen an barrierefreie Formulare in voller Breite.

Social-Media- und Cookie-Plugins: Eingebettete Inhalte und Cookie-Banner sind häufige Barrierefreiheits-Sünder. Achte darauf, dass Cookie-Consent-Dialoge per Tastatur bedienbar sind und den Fokus korrekt managen.

Audit-Methode: Deaktiviere alle Extensions und aktiviere sie einzeln. Nach jeder Aktivierung: Tastaturtest + Screenreader-Check auf den betroffenen Seiten. So identifizierst du die Problemverursacher gezielt.

Der Joomla-Artikel-Editor: Barrierefreie Inhalte erstellen

Auch wenn Template und Extensions perfekt sind – die Inhalte müssen ebenfalls barrierefrei sein. Im Joomla-Artikel-Editor (TinyMCE) passieren die häufigsten Fehler:

Bilder ohne Alt-Text: Der Medienmanager bietet ein Alt-Text-Feld. Nutze es konsequent. Dekorative Bilder erhalten ein leeres alt=""-Attribut, damit Screenreader sie überspringen (WCAG SC 1.1.1).

Überschriften-Hierarchie: Beginne im Beitrag mit h2 (h1 ist der Seitentitel). Überspringe keine Ebenen – kein h2 direkt gefolgt von h4. Der Accessibility Checker warnt bei Sprüngen (WCAG SC 1.3.1).

Tabellen ohne Header: Wenn du Tabellen im Editor erstellst, setze <th>-Zellen für Spaltenüberschriften und nutze das scope-Attribut. Ohne Header-Zuordnung sind Tabellen für Screenreader unbrauchbar (WCAG SC 1.3.1).

Links mit aussagekräftigem Text: "Hier klicken" oder "Mehr lesen" sagt Screenreader-Nutzern nichts. Formuliere stattdessen "BFSG-Leitfaden herunterladen" oder nutze aria-label für zusätzlichen Kontext (WCAG SC 2.4.4 – Link Purpose).

Kontaktformulare und Benutzerregistrierung

Joomlas Core-Kontaktkomponente erzeugt relativ barrierefreies HTML. Labels sind mit Feldern verknüpft, Fieldsets gruppieren zusammengehörige Eingaben. Aber es gibt Lücken:

CAPTCHA-Problem: Joomla nutzt standardmäßig reCAPTCHA. Google reCAPTCHA v2 (das Bilderkennungs-CAPTCHA) ist für blinde Nutzer oft problematisch. Empfehlung: Nutze reCAPTCHA v3 (unsichtbar) oder eine Honeypot-Lösung. Das ist barrierefreier und erfüllt WCAG SC 1.1.1.

Fehlermeldungen: Wenn ein Pflichtfeld nicht ausgefüllt wird, muss die Fehlermeldung programmatisch mit dem Feld verknüpft sein (via aria-describedby) und der Fokus auf das erste fehlerhafte Feld gesetzt werden (WCAG SC 3.3.1).

Für die Benutzerregistrierung gilt dasselbe: Prüfe, ob der gesamte Registrierungsflow per Tastatur und Screenreader nutzbar ist. Passwort-Stärke-Indikatoren müssen für Screenreader auslesbar sein.

Joomla BFSG-konform machen: Checkliste

Template prüfen oder auf Cassiopeia umsteigen. Alle Bilder mit Alt-Texten versehen (Medienmanager bietet das Feld). Überschriften-Hierarchie in Beiträgen einhalten.

Formulare mit Kontakt-Komponente oder RSForm barrierefrei konfigurieren. Extensions auf Barrierefreiheit prüfen (jede Extension ist ein Risiko). Und regelmäßig mit bf-check.de scannen lassen.

Hier die vollständige Schritt-für-Schritt-Strategie:

1. Template-Audit: Nutze Cassiopeia oder ein nachweislich barrierefreies Template. Prüfe mit Tastatur (Tab, Enter, Escape, Pfeiltasten) und einem Screenreader (NVDA ist kostenlos). Teste alle interaktiven Elemente: Navigation, Suche, Formulare, Modale.

2. Extension-Audit: Liste alle installierten Extensions auf. Prüfe jede einzelne auf Barrierefreiheit. Deinstalliere nicht genutzte Extensions – sie sind ein unnötiges Risiko. Vergleiche auch, wie andere CMS wie TYPO3 oder WordPress mit dem Thema umgehen.

3. Content-Audit: Alle Beiträge auf Alt-Texte, Überschriften-Hierarchie und Link-Texte prüfen. Bei vielen Beiträgen lohnt sich ein Datenbank-Query, um Bilder ohne Alt-Text zu finden.

4. ARIA-Attribute prüfen: Stelle sicher, dass ARIA-Attribute korrekt eingesetzt werden – falsche ARIA ist schlimmer als keine ARIA. Häufiger Fehler: role="button" auf einem <div> ohne Tastatur-Event-Handler.

5. Automatisierter Scan: Nutze den bf-check.de Scanner für einen schnellen Überblick. Automatisierte Tools finden ca. 30-40% der WCAG-Verstöße – der Rest erfordert manuelle Prüfung.

6. Monitoring einrichten: Barrierefreiheit ist kein einmaliges Projekt. Jedes Joomla-Update, jede neue Extension, jeder neue Beitrag kann neue Barrieren einführen. Plane regelmäßige Scans ein.

Code-Beispiel: Barrierefreies Joomla-Modul

Ein typisches Custom-HTML-Modul in Joomla wird oft für Teaser oder Call-to-Action-Boxen genutzt. Hier ein Beispiel, wie du es barrierefrei umsetzt:

<!-- Override: templates/cassiopeia/html/mod_custom/default.php -->
<section class="cta-box" aria-labelledby="cta-heading-">
  <h2 id="cta-heading-">
    Jetzt BFSG-konform werden
  </h2>
  <p>Frist verpasst? Wir helfen.</p>
  <a href="/kontakt" class="btn btn-primary"
     aria-label="Kontakt aufnehmen für BFSG-Beratung">
    Kontakt aufnehmen
  </a>
</section>

Dieses Muster nutzt <section> mit aria-labelledby für eine benannte Region, eine korrekte Überschrift und einen Link mit beschreibendem aria-label.

Häufig gestellte Fragen