Ihr Weg zur inklusiven Webpräsenz

Joomla und WordPress im Fokus:
Tipps, wie Sie rechtzeitig barrierefrei werden

Rechtlicher Hintergrund ab Juni 2025

  • European Accessibility Act (EU-Richtlinie 2019/882):
    • Tritt für viele digitale Produkte und Dienstleistungen (z. B. Online-Shops, Plattformen, mobile Anwendungen) ab dem 28. Juni 2025 in Kraft.
    • Ziel ist, ein barrierefreies Umfeld zu schaffen und Diskriminierung von Menschen mit Behinderung zu verhindern.
    • Websites privater Unternehmen (insbesondere Online-Shops) müssen dann Mindeststandards hinsichtlich Barrierefreiheit einhalten.
  • Deutsche Umsetzung/Ergänzungsgesetze:
    • BITV 2.0 (Barrierefreie-Informationstechnik-Verordnung): Vorschriften für den öffentlichen Sektor gelten schon länger (bzw. wurden 2020 nochmals aktualisiert). Die Anforderungen orientieren sich an WCAG 2.1 (Level AA) und EN 301 549.
    • BGG (Behindertengleichstellungsgesetz): Enthält Rahmenbedingungen für Barrierefreiheit.
    • Ab 2025 werden viele Grundsätze der BITV und WCAG 2.1 auch für private Websites, die Produkte und Dienstleistungen anbieten, relevant bzw. verpflichtend.

Relevante Standards und Anforderungen

Die maßgeblichen technischen Richtlinien werden in der Regel durch folgende Normen bestimmt:

  • WCAG 2.1 (Web Content Accessibility Guidelines) – Level AA
  • EN 301 549 – Europäische Norm zur Barrierefreiheit in der Informations- und Kommunikationstechnik

Inhaltlich bedeuten diese Richtlinien unter anderem:

1. Wahrnehmbarkeit („Perceivable“)

  • Text-Alternativen für Bilder (Alt-Texte)
  • Untertitel/Transkripte für Videos und Audios
  • Ausreichende Farbkontraste (mindestens 4,5:1 für Fließtext, 3:1 für große Schrift)

2. Bedienbarkeit („Operable“)

  • Vollständige Tastaturbedienbarkeit ohne Maus (kein „Keyboard Trap“)
  • Genügend Zeit, um Inhalte zu lesen oder Formulare auszufüllen
  • Vermeidung von schnell flackernden Inhalten (Flash & Co.)

3. Verständlichkeit („Understandable“)

  • Verständliche und einheitliche Navigation
  • Saubere Ãœberschriftenstruktur (H1, H2, H3 …)
  • Korrekte Sprachangaben im HTML (<html lang=“de“>)

4. Robustheit („Robust“)

  • Sauberer HTML-Code und korrekte Auszeichnung, damit Screenreader Inhalte richtig erfassen können
  • ARIA-Rollen nur verwenden, wenn nötig und korrekt implementiert

Allgemeine Maßnahmen für WordPress-Seiten

  • Regelmäßige Updates

    • Halten Sie WordPress selbst, Themes und Plugins stets aktuell. Viele Barrierefreiheits-Verbesserungen werden im Rahmen von Updates ausgeliefert und erhöhen zudem die Sicherheit.
  • Korrekte Ãœberschriftenstruktur

    • Nutzen Sie H1 für den Seitentitel und fortlaufend H2, H3 etc. für logische Untergliederungen. Achten Sie darauf, dass Ãœberschriften semantisch korrekt sind und nicht nur der optischen Gestaltung dienen.
  • Alt-Texte für alle Bilder

    • Hinterlegen Sie in der Mediathek oder beim Hochladen der Bilder beschreibende Alternativtexte („Alt-Texte“), damit Screenreader-Nutzer*innen den Bildinhalt nachvollziehen können.
  • Aussagekräftige Linktexte

    • Verwenden Sie für Links einen klar erkennbaren Linktext (z. B. „Weiterlesen zur Veranstaltung“ statt „Hier klicken“). Der Text sollte den Linkzweck eindeutig vermitteln.
  • Farbkontraste sicherstellen

    • Achten Sie auf ausreichend hohe Kontraste (mindestens 4,5:1 für Standardtext, 3:1 für größere Schriften). Das gilt besonders für Buttons, Schaltflächen und Hintergrundfarben.
  • Formulare korrekt auszeichnen

    • Nutzen Sie barrierefreie Form-Plugins (z. B. Contact Form 7, Gravity Forms). Achten Sie auf Labels, die mit Eingabefeldern verknüpft sind, und auf aussagekräftige Fehlermeldungen.
  • Tastaturbedienbarkeit prüfen

    • Stellen Sie sicher, dass alle interaktiven Elemente (Menüs, Links, Formulare) ausschließlich per Tastatur bedienbar sind und keine „Keyboard Traps“ (Fallen) existieren.
  • Saubere Auszeichnung und ARIA-Rollen

    • Setzen Sie HTML5-Strukturelemente wie <header>, <nav>, <main>, <footer> ein und verwenden Sie ARIA-Attribute nur dort, wo sie für Screenreader einen Mehrwert bieten.
  • Sprachauszeichnung im HTML-Tag

    • Definieren Sie im <html>-Tag die Hauptsprache, z. B. <html lang="de">, damit Screenreader die richtige Aussprache nutzen.
  • Video- und Audioinhalte zugänglich machen

    • Binden Sie Untertitel oder Transkripte ein, um Multimedia-Inhalte auch für hörgeschädigte Nutzer*innen zugänglich zu halten.

Spezifische Maßnahmen für WordPress-Seiten mit Divi Builder

  • Divi-Module sinnvoll einsetzen

    • Der Divi Builder bietet diverse Module (z. B. Text, Bild, Slider). Achten Sie bei jedem Modul darauf, dass Ãœberschriften, Listen und Links semantisch korrekt gesetzt werden.
  • Ãœberschriften-Konfiguration in Divi

    • Divi ermöglicht es, Schriftgrößen und -arten getrennt von den Heading-Tags festzulegen. Prüfen Sie, dass eine visuell gewählte Ãœberschrift wirklich als H1, H2 oder H3 ausgezeichnet wird und nicht nur optisch groß dargestellt ist.
  • Bild-Module und Alt-Texte

    • Divi übernimmt Alt-Texte aus der WordPress-Mediathek, sofern diese dort hinterlegt sind. Prüfen Sie in jedem Bildmodul die eingetragenen Alternativtexte.
  • Farbkontraste in Divi-Einstellungen

    • Da sich in Divi individuelle Farbschemata definieren lassen, prüfen Sie Text- und Hintergrundfarben mithilfe eines Kontrast-Checkers. Vergessen Sie nicht Hover-Farben oder andere Zustände.
  • Barrierefreie Navigation und Menüs

    • Navigationsmenüs, Burger-Menüs und Mega-Menüs müssen per Tastatur bedienbar sein. Führen Sie Tests durch, bei denen Sie nur die Tab-Taste nutzen.
  • Formulare im Divi Builder

    • Nutzen Sie das Divi-Formularmodul oder integrieren Sie Plugins wie Contact Form 7. Achten Sie stets auf sinnvolle Labels und Fehlermeldungen.
  • Animationen und Effekte

    • Divi bietet viele Animationseffekte. Halten Sie diese moderat und stellen Sie sicher, dass sie die Navigation oder Lesbarkeit nicht beeinträchtigen. Schnelles Blinken oder Flackern sollte generell vermieden werden.
  • Manuelle Screenreader-Tests

    • Da Divi umfangreiche Layout-Optionen hat, empfiehlt sich ein Test mit einem Screenreader (z. B. NVDA), um sicherzugehen, dass die Reihenfolge und Auszeichnung der Inhalte stimmig sind.

Allgemeine Maßnahmen für Joomla-Seiten

  • Aktuelle Joomla-Version verwenden

    • Ab Joomla 4 wurden Barrierefreiheitsaspekte verstärkt berücksichtigt. Nutzen Sie die neueste Version, um auf dem aktuellen Stand zu sein.
  • Semantische Template-Struktur

    • Achten Sie darauf, dass Ihr Joomla-Template Ãœberschriften und Sektionen korrekt ausgibt. Ãœberlegen Sie bei Template-Anpassungen, wie <header>, <main>, <aside> etc. eingesetzt werden können.
  • Alt-Texte und Medien

    • Nutzen Sie die Joomla-Medienverwaltung, um jedem Bild einen Alternativtext zu geben („Bildbeschreibung“ oder „Alternativer Text“).
  • Klare Navigationsstrukturen

    • Joomla trennt Inhalte in Kategorien und Beiträge. Sorgen Sie dafür, dass diese logisch organisiert sind und die Menüs verständlich beschriftet werden (z. B. „Über uns“ statt „Info“).
  • Formulare und Kontaktkomponenten

    • Verbinden Sie Labels und Eingabefelder korrekt. Prüfen Sie, ob Fehlermeldungen für Screenreader zugänglich sind. Achten Sie auf eine sinnvolle Tab-Reihenfolge.
  • Sprachauszeichnung und Mehrsprachigkeit

    • Geben Sie im Backend die Standardsprache (z. B. Deutsch) an und pflegen Sie ggf. weitere Sprachen korrekt ein. Das erleichtert Nutzenden und Suchmaschinen die Zuordnung.
  • Barrierefreie Erweiterungen

    • Informieren Sie sich, ob Ihre Template-Erweiterungen (z. B. für Galerien, Slideshow, Formulare) barrierefreie Funktionen unterstützen. Nicht alle Anbieter berücksichtigen die WCAG-Standards gleich gut.
  • Videointegration

    • Stellen Sie für Videos Untertitel zur Verfügung oder betten Sie einen zugänglichen Player ein (z. B. über YouTube mit aktivierten Untertiteln).

Spezifische Maßnahmen für Joomla-Seiten mit dem SP Page Builder von JoomShaper

  • Addons des SP Page Builder semantisch einsetzen

    • SP Page Builder (z. B. von JoomShaper) bietet zahlreiche „Addons“ (Elemente) wie Textblöcke, Bilder, Tabs oder Slider. Achten Sie darauf, Ãœberschriften als echte H-Tags (H1, H2, H3 …) zu markieren und keine reinen Formatierungs-Elemente zu nutzen.
  • Bild-Addons und Alt-Texte

    • Wenn Sie Bild-Addons einfügen, füllen Sie im SP Page Builder die Felder für Alternativtexte sorgfältig aus. So bleiben die Inhalte Screenreader-freundlich.
  • Navigations-Addons kontrollieren

    • Verwenden Sie Menü- oder Navigations-Addons, prüfen Sie deren Tastaturbedienbarkeit. Sie sollten sich per Tab-Taste durch alle Menüpunkte bewegen können.
  • Formular-Addons

    • Sollte der SP Page Builder Formularfunktionen bieten oder Plugins einbinden, achten Sie darauf, dass Labels mit den Eingabefeldern verbunden sind. Fehlermeldungen müssen erkennbar und verständlich sein.
  • Animations- und Effekt-Einstellungen

    • Viele Page Builder bieten Animationseffekte (Hover-Effekte, Fade-ins etc.). Reduzieren Sie diese auf das Nötigste, um Ablenkungen und mögliche Barrieren zu vermeiden. Schnelles Flackern kann für Nutzer*innen mit Epilepsie problematisch sein.
  • Farbkontraste innerhalb des SP Page Builders

    • Prüfen Sie, ob die gewählten Farben (Schrift, Buttons, Hintergründe) ausreichend Kontrast bieten (≥ 4,5:1). Das gilt für alle im Page Builder erstellten Sektionen oder Addons.
  • Barriereprüfung und Screenreader-Test

    • Führen Sie nach Fertigstellung eines Layouts einen Test mittels Screenreader (z. B. NVDA) durch und checken Sie die Tastaturnavigation. Insbesondere Addons wie Slider oder Galerien erfordern besondere Aufmerksamkeit, um Barrieren zu vermeiden.
  •  

Fazit

  • Barrierefreiheit in WordPress und Joomla:

    • Beide CMS liefern solide Grundvoraussetzungen, um barrierearme bzw. barrierefreie Websites aufzubauen. Entscheidend sind die korrekten Einstellungen und die strukturiert-sematische Pflege von Inhalten.

  • Automatisierte und manuelle Tests:

    • Nutzen Sie Tools wie WAVE oder axe, um automatisierte Analysen zu fahren, und ergänzen Sie diese durch manuelle Tests mit der Tastatur und einem Screenreader.

  • Regelmäßige Updates und Pflege:

    • Aktualisieren Sie WordPress, Joomla und alle eingesetzten Erweiterungen (Themes, Templates, Plugins), um sicherzustellen, dass Sie stets von Verbesserungen im Bereich Barrierefreiheit profitieren.

Eine frühzeitige und konsequente Umsetzung dieser Maßnahmen hilft Ihnen, den kommenden gesetzlichen Vorgaben (u. a. durch den European Accessibility Act) zu entsprechen und allen Menschen – unabhängig von deren individuellen Fähigkeiten oder Hilfsmitteln – einen echten Zugang zu Ihrem Online-Angebot zu ermöglichen.

Test 123
Jetzt für unseren RheinMarketing Newsletter anmelden

Bereit für SEOFRIEND`ly Tricks?

Erfahre wie unsere Partner und Kunden ihr Marketing optimiert haben.

SEO Report

Webseiten Analyse kostenfrei  

Zustimmung zur Datenverarbeitung

7 + 14 =