TYPO3 Barrierefreiheit: Anforderungen, Umsetzung und Prüfung

Kurz gesagt: TYPO3 liefert eine gute technische Grundlage, macht eine Website aber nicht automatisch barrierefrei. Entscheidend sind Templates, Erweiterungen und Redaktion. Rechtlich gilt für private Anbieter bestimmter Verbraucherprodukte und -dienstleistungen seit dem 28. Juni 2025 das BFSG, für öffentliche Stellen des Bundes die BITV 2.0. Als technischer Maßstab dient in der Praxis WCAG 2.1 Level AA; WCAG 2.2 ist bereits W3C-Empfehlung.

Wie Sie die Anforderungen strukturiert angehen, zeigt unser Leitfaden mit Checkliste.

Der WebAIM Million 2026 prüfte im Februar 2026 automatisiert die Startseiten von einer Million Websites. Bei Seiten, die mit TYPO3 CMS laufen, wurden im Schnitt 38,5 Barrierefreiheitsfehler pro Startseite erkannt. Zum Vergleich: Drupal 41,2, Joomla 45,7, WordPress 52,8 und über alle untersuchten Seiten 56,1.

Diese Zahlen sind mit Vorsicht zu lesen. Ein automatisierter Test erfasst nur einen Teil der möglichen Probleme und sagt nichts über Ihre konkrete Website aus. Bei 95,9 % der untersuchten Startseiten wurden WCAG-Verstöße erkannt. Barrierefreiheit bleibt also bei fast allen Websites eine offene Aufgabe, unabhängig vom CMS.

TYPO3 bietet Funktionen und Werkzeuge, die Entwicklerinnen, Entwickler und jede TYPO3 Agentur bei barrierefreien Websites unterstützen. Ob Ihre Website am Ende barrierefrei ist, entscheiden Templates, Erweiterungen und Inhalte.

In Deutschland und der EU greifen mehrere Regelwerke auf die WCAG beziehungsweise die Norm EN 301 549 zurück. Die wichtigsten im Überblick:

1. BFSG (Barrierefreiheitsstärkungsgesetz)

Das BFSG vom 16. Juli 2021 (BGBl. I S. 2970) setzt die europäische Richtlinie (EU) 2019/882 (European Accessibility Act, EAA) in deutsches Recht um und gilt seit dem 28. Juni 2025. Es betrifft bestimmte Produkte und Dienstleistungen für Verbraucher, etwa Online-Shops (E-Commerce), Bankdienstleistungen für Verbraucher, Telekommunikationsdienste, Elemente von Personenbeförderungsdiensten und E-Books. Kleinstunternehmen, die Dienstleistungen anbieten (weniger als 10 Beschäftigte und höchstens 2 Mio. € Jahresumsatz oder Jahresbilanzsumme), sind ausgenommen.

2. EN 301 549

Die europäische Norm für die Barrierefreiheit von IKT-Produkten und -Dienstleistungen, einschließlich Websites und mobiler Anwendungen. Für Webinhalte übernimmt sie die Kriterien der WCAG 2.1 (Level AA). Die bislang im Amtsblatt der EU genannte Fassung V3.2.1 (2021) ist die technische Grundlage der BITV 2.0. Für das BFSG nennt weder das Gesetz noch die BFSG-Verordnung (BFSGV) eine bestimmte Norm. Eine Konformitätsvermutung nach § 4 BFSG setzt voraus, dass eine harmonisierte Norm im Amtsblatt zitiert ist. Nach Angaben von Barrierewerk und Deque (Oktober 2026) ist das für die EN 301 549 und die Richtlinie (EU) 2019/882 noch nicht geschehen; als Orientierung wird sie dennoch häufig herangezogen.

3. BITV 2.0 (Barrierefreie-Informationstechnik-Verordnung)

Die BITV 2.0 (Verordnung vom 12. September 2011, zuletzt geändert am 24. Oktober 2023) ist eine Verordnung zum Behindertengleichstellungsgesetz (BGG). Sie gilt für Websites und mobile Anwendungen öffentlicher Stellen des Bundes. Für Länder und Kommunen gelten eigene Landesregelungen. Inhaltlich verweist sie auf die im Amtsblatt der EU genannten harmonisierten Normen, derzeit die EN 301 549 und damit auf WCAG 2.1 AA.

4. European Accessibility Act (EAA)

Der EAA ist die EU-Richtlinie 2019/882 vom 17. April 2019. Sie harmonisiert Barrierefreiheitsanforderungen für bestimmte Produkte und Dienstleistungen im Binnenmarkt. Die Mitgliedstaaten setzen sie national um, in Deutschland durch das BFSG.

Stand: Oktober 2026. Allgemeine Informationen, keine Rechtsberatung.

Das BFSG (Barrierefreiheitsstärkungsgesetz) setzt den EAA in deutsches Recht um und gilt seit dem 28. Juni 2025 für bestimmte Produkte und Dienstleistungen für Verbraucher.

Was das BFSG für Ihr Unternehmen bedeuten kann:

• Anwendungsbereich: Das Gesetz betrifft Wirtschaftsakteure, die bestimmte Produkte und Dienstleistungen für Verbraucher anbieten, zum Beispiel Online-Shops (§ 1 BFSG). Reine B2B-Angebote sind in der Regel nicht erfasst.
• Ausnahme: Kleinstunternehmen, die Dienstleistungen erbringen (weniger als 10 Beschäftigte und höchstens 2 Mio. € Jahresumsatz oder Jahresbilanzsumme), sind ausgenommen (§ 3 Abs. 3 BFSG).
• Übergangsfrist: Vor dem 28. Juni 2025 geschlossene Dienstleistungsverträge dürfen unverändert bis zum Vertragsende, längstens bis zum 27. Juni 2030, fortbestehen (§ 38 BFSG).
• Mehr Nutzbarkeit: Barrierefreie Angebote erreichen mehr Menschen und verbessern die Nutzererfahrung insgesamt.
• Durchsetzung: Die Marktüberwachung liegt bei den Ländern; für Dienstleistungen ist die Marktüberwachungsstelle der Länder für die Barrierefreiheit von Produkten und Dienstleistungen (MLBF) in Magdeburg zuständig. Verstöße können mit Bußgeldern von bis zu 100.000 € geahndet werden (§ 37 Abs. 2 BFSG).

Ob Ihr Angebot unter das BFSG fällt, sollten Sie im Einzelfall rechtlich prüfen lassen. Die MLBF informiert auf der Seite der Gewerbeaufsicht Bayern über ihre Zuständigkeit.

Hier sind einige Punkte, die Sie bei der Implementierung beachten sollten:

1. Wählen Sie eine barrierefreie Vorlage

Beginnen Sie mit einer Vorlage, die auf Barrierefreiheit ausgelegt ist. Das Bootstrap Paket für TYPO3 ist eine gute Wahl. Prüfen Sie Ihre eigenen Anpassungen trotzdem, denn jede Änderung am Template kann das Ergebnis verändern. Das Paket bietet:

• Logische Anordnung der Überschriften.
• Hilfreiche Rollen und Orientierungspunkte für Screenreader.
• Einfache Tastaturnavigation.
• Klare, sichtbare Beschriftungen in Formularen und Fehlermeldungen.

2. Fügen Sie hilfreiche Erweiterungen hinzu

Erweiterungen sind wie Add-ons, die Ihrer TYPO3 Website neue Funktionen hinzufügen. Einige Erweiterungen können die Arbeit an barrierefreien Inhalten unterstützen:

• Barrierefreie CAPTCHA-Alternativen: Machen Formulare für alle einfacher bedienbar.
• T3AI und T3AA (Produkte von T3Planet, einer Marke der NITSAN GmbH): Unterstützen bei Metadaten und Alternativtexten. Vorschläge einer KI sollten Redakteurinnen und Redakteure prüfen und freigeben.
• mask oder container: Bausteine für strukturierte, wiederverwendbare Layouts. Die Barrierefreiheit der Ausgabe hängt von Ihren Templates ab.

3. Organisieren Sie Ihre Inhalte übersichtlich

Barrierefreie Websites sehen nicht nur gut aus, sie sind auch gut organisiert:

• Verwenden Sie die Content-Tools von TYPO3, um Überschriften, Listen und Tabellen hinzuzufügen.
• Fügen Sie immer beschreibenden Alt-Text für Bilder, Untertitel für Videos und klare Beschriftungen für Links hinzu.
• Halten Sie Ihre Webseiten konsistent, damit Besucher wissen, was sie erwartet.
• Verwenden Sie „Text & Medien” von TYPO3, um Wörter und Bilder zusammen darzustellen, die für Screenreader sinnvoll sind.

4. Beheben Sie häufige Barrierefreiheitsfehler

TYPO3 gibt Ihnen die Möglichkeit, Ihre Inhalte zu kontrollieren, aber das bedeutet auch, dass Sie auf Fehler achten müssen:

• Vergessen Sie nicht, Bildern Alt-Text hinzuzufügen.
• Achten Sie auf eine klare Gliederung Ihrer Überschriften (springen Sie nicht ohne Zwischenstufe von einer Überschrift zu einer Unterüberschrift).
• Vermeiden Sie Links, die nur „Hier klicken” sagen; beschreiben Sie stattdessen, was der Link bewirkt.
• Überladen Sie Ihre Seiten nicht mit zu vielen beweglichen Elementen oder automatisch abspielenden Videos.

Das Frontend ist das Gesicht Ihrer Website, das, was Nutzer sehen, mit dem sie interagieren und auf das sie sich verlassen, um auf Ihre Inhalte zuzugreifen. Für Menschen, die assistive Technologien nutzen, kann das Frontend entweder hilfreich sein oder nicht. Zu den assistiven Technologien gehören Screenreader, Sprachsteuerung und Tastaturnavigation.

1. Barrierefreie Vorlagen

• Das TYPO3 Bootstrap Paket hat 2023 den BITV-Test der Prüfstelle BIK für Alle bestanden (Pressemitteilung vom 29. August 2023). Prüfen Sie Ihre eigene Umsetzung trotzdem, denn Anpassungen am Template verändern das Ergebnis.
• Es basiert auf dem Bootstrap-CSS-Framework und bietet Landmarks, Tastaturunterstützung, ARIA-Rollen, eine kontrastfreundliche Benutzeroberfläche und eine semantische Struktur.

2. Frontend Kernfunktionen für Barrierefreiheit

• TYPO3 erzeugt strukturierte Inhalte und sauberes HTML (unter Verwendung von Fluid-Vorlagen). Dadurch können Administratoren oder Redakteure auf einfache Weise Barrierefreiheitsfunktionen wie Alt-Texte, Bildunterschriften, ARIA-Rollen und -Eigenschaften sowie Sprunglinks hinzufügen.
• Responsives Verhalten, skalierbare Schriftarten, Mobile-First-Rendering und schnelles Laden können dazu beitragen, Kriterien hinsichtlich Bedienbarkeit und Wahrnehmbarkeit zu erfüllen.

3. Erweiterungen für Barrierefreiheit (Auswahl)

Erweiterungen können die Redaktion unterstützen. Sie ersetzen weder eine Prüfung noch die Korrektur von Templates. Prüfen Sie Eignung und Kompatibilität mit Ihrer TYPO3-Version im Einzelfall.

• a11y-by-default (web-vision): Backend-Modul zur Barrierefreiheitsprüfung mit axe-core und HTML CodeSniffer. Laut Packagist für TYPO3 13.4 und 14.3.
• Alt-Text Checker (Leuchtfeuer): Markiert in der Dateiliste Dateien ohne Alternativtext. Laut Packagist für TYPO3 13.4.
• T3AA: Unterstützt zum Beispiel bei Alternativtexten. Vorschläge einer KI sollten Redakteurinnen und Redakteure prüfen und freigeben.

Transparenzhinweis: T3AA ist ein Produkt von T3Planet, einer Marke der NITSAN GmbH. Ein Toolbar- oder Widget-Angebot ersetzt nicht die Korrektur von Templates und Inhalten.

4. Interaktionsorientierte Funktionen

• ARIA-Rollen und Landmarken: Hilft Screenreadern, Navigation, Hauptinhalte, Banner und interaktive Komponenten zu identifizieren. Vorlagen können aria-label, aria-expanded und korrekte Rollen einbetten.
• Tastaturnavigation und Fokusverwaltung: TYPO3-Vorlagen und Erweiterungen helfen bei der Tabulatorreihenfolge. Sie bieten auch sichtbare Fokusindikatoren. Zusätzlich gibt es Skip-Links für eine schnellere Navigation.

5. Unterstützung auf Inhaltsebene

• Redakteure können mit TYPO3-Formularen Alt-Text, korrekte Link-Labels und Überschriften in logischer Reihenfolge hinzufügen. Das System kann diese als Pflichtfelder implementieren.
• Semantische HTML-Elemente wie <main>, <nav> und <aside> lassen sich in Fluid-Templates direkt einsetzen. Ob sie korrekt verwendet werden, hängt vom Template ab.

6. Medienzugänglichkeit

• Die Erweiterung a11y_me_video (iundd) bietet einen Videoplayer auf Basis von MediaElement.js. Laut Packagist unterstützt sie Untertitel, Audiodeskription, Gebärdensprachvideo und Textalternative. Die aktuelle Version 3.0 ist laut Packagist für TYPO3 12.4 und 13.2 ausgewiesen; prüfen Sie die Kompatibilität mit TYPO3 14 vorab.

Auch das Werkzeug der Redaktion spielt eine Rolle. TYPO3 hat die Barrierefreiheit des Backends in den letzten Versionen weiterentwickelt, und für Redaktionssysteme ist die Richtlinie ATAG 2.0 maßgeblich. Prüfen Sie in Ihrem eigenen Setup, ob Redakteurinnen und Redakteure ihre Arbeit mit Tastatur und Screenreader erledigen können.

Praxistests: Barrierefreiheit im TYPO3-Backend

Ein im Februar 2022 auf typo3.org veröffentlichter Praxistest untersuchte die Bedienung des Backends mit zwei blinden Nutzern. Die Tests fanden im Oktober und November 2021 in Berlin statt und bezogen sich auf Version 11.5.1. Die Ergebnisse lassen sich nicht ohne Weiteres auf aktuelle Versionen oder auf Ihr Projekt übertragen, zeigen aber typische Fragen, die sich auch heute stellen.

Erkenntnisse aus dem Test mit einem Redakteur

• Mit Screenreader und Braillezeile gelangen vertraute Abläufe wie das Hochladen und Zuordnen von Dateien. In neuen Situationen traten Hindernisse auf; alle Redaktionsschritte ließen sich nur mit Unterstützung der Testmoderatoren vollständig ausführen.
• Das TYPO3 Backend war für geschulte und erfahrene Nutzer eines Screenreaders bedienbar. Onboarding und Dokumentation sind entscheidende Faktoren.

Erkenntnisse aus dem Test mit einem Softwaretester für Barrierefreiheit

• Unbeschriftete Felder, stille Fehlermeldungen und unklare Navigation beeinträchtigten die Bedienung.
• Die Unterstützung von Tastatur und Screenreader muss sorgfältig durchdacht werden, damit Arbeitsabläufe reibungslos funktionieren.

Redaktioneller Workflow, der Barrierefreiheit unterstützt

Über die Benutzeroberfläche hinaus unterstützt TYPO3 ein Redaktionssystem, das strukturierte Verfahren zur Erstellung von Inhalten ermöglicht, die sich an Best Practices für Barrierefreiheit orientieren:

• Redakteure können Alt-Texte, Überschriften und semantische Layoutblöcke einfach zuweisen.
• Erweiterungen können Inhalte validieren oder Barrierefreiheitsregeln während der Bearbeitung implementieren.
• Benutzerdefinierte Rollen und Berechtigungen können Barrierefreiheitsprüfungen vor der Veröffentlichung beinhalten.

Barrierefreiheit und SEO haben Berührungspunkte. Eine Verbesserung des Rankings lässt sich daraus nicht ableiten, denn Suchmaschinen veröffentlichen ihre Gewichtung nicht.

Wo sich Barrierefreiheit und SEO überschneiden

• Crawlbarkeit: Klare Struktur und sauberes HTML können Suchmaschinen-Bots das Erfassen und Indexieren einer Seite erleichtern.
• Nutzererfahrung: Beschreibende Alt-Texte, klare Navigation und gut formatierte Inhalte helfen Menschen mit und ohne Behinderungen bei der Orientierung.
• Gemeinsame Best Practices: Viele Barrierefreiheitsmaßnahmen überschneiden sich mit SEO-Empfehlungen, etwa semantisches HTML, aussagekräftige Linktexte und die korrekte Verwendung von ARIA Rollen. Das verbessert die Verständlichkeit Ihrer Website für Nutzer und Suchmaschinen.

Sobald Ihre TYPO3 Website barrierefrei ist, beginnt die eigentliche Arbeit: die Erstellung von Inhalten, die jeden Tag barrierefrei bleiben.

Hier sind einige Punkte, die Sie bei der Erstellung barrierefreier Inhalte in TYPO3 beachten sollten:

1. Verwenden Sie Überschriften korrekt

Es empfiehlt sich, mit einer H1 Überschrift für den Seitentitel zu beginnen. Verwenden Sie H2 für Hauptabschnitte und H3 für Unterabschnitte. Überspringen Sie keine Überschriftenebenen. TYPO3 hilft Ihnen dabei, Ihre Überschriften in einer guten Struktur und Reihenfolge zu halten.

2. Fügen Sie Alt-Text zu Bildern hinzu

Bilder sollten auch einen kurzen, aussagekräftigen Alt-Text haben, damit jeder weiß, welche Funktion sie haben. Überspringen Sie den Alt-Text nur bei dekorativen Bildern. Fügen Sie bei komplexen Grafiken längere Beschreibungen hinzu. TYPO3 macht dies ganz einfach.

3. Machen Sie Audio und Videodateien barrierefrei

Fügen Sie Videos Untertitel und Audioaufnahmen Transkripte hinzu. Beschreiben Sie wichtige visuelle Details verbal. Vermeiden Sie plötzliche Geräusche oder visuelle Veränderungen, die ablenkend wirken können. TYPO3 verfügt über Medien-Tools, die die Verwendung von barrierefreien Funktionen ermöglichen.

4. Verwenden Sie eine klare und einfache Sprache

Verwenden Sie kurze Sätze mit alltäglichen Wörtern. Definieren und erklären Sie alle Fachbegriffe. Erstellen Sie für dringende oder wichtige Inhalte eine leicht lesbare Version, um das Verständnis zu verbessern.

5. Sorgen Sie für einen guten Farbkontrast

Der Text muss vor dem Hintergrund gut lesbar sein. Halten Sie sich stets an die Kontrastregeln (mindestens 4,5:1 für normalen Text) und vermeiden Sie es, Text über Bilder zu legen, es sei denn, er ist eindeutig erkennbar. Testen Sie dies mit WAVE oder einer ähnlichen Software.

6. Verwenden Sie beschreibende Linktexte

Links müssen erklären, wohin sie führen. Vermeiden Sie mehrdeutige Wörter wie „Hier klicken”. Verwenden Sie beschreibende Begriffe wie „PDF Anleitung herunterladen” oder „Erfahren Sie mehr über die Funktionen von TYPO3”.

Führen Sie jetzt eine kostenlose Überprüfung mit dem TYPO3 Accessibility Checker durch und erhalten Sie klare, umsetzbare Hinweise zu Ihrer Website.

Keine Einrichtung nötig.

Eine barrierefreie Website ist eine fortlaufende Aufgabe, die mit der Planung beginnt. TYPO3 bietet eine solide Grundlage, die Verantwortung für Umsetzung und Inhalte bleibt jedoch bei Ihnen.

Barrierefreiheit ist nie „fertig“, aber jeder Schritt macht für die Menschen, die Ihre Website nutzen, einen echten Unterschied.

Sie möchten Unterstützung bei der technischen Umsetzung? Mehr dazu finden Sie auf der Seite Barrierefreiheit für TYPO3 umsetzen lassen und bei uns als TYPO3 Agentur.

Stand: Oktober 2026. Allgemeine Informationen, keine Rechtsberatung.