Barrierefreiheit Websites mit TYPO3 | WCAG, BFSG & BITV 2.0

Wussten Sie, dass weltweit nur etwa 3 % aller Websites vollständig barrierefrei sind? Überraschend, nicht wahr? Das bedeutet, dass Millionen von Menschen von Online Erlebnissen ausgeschlossen sind.

Angesichts dieser Lücke hat TYPO3 beschlossen, die Barrierefreiheit im Web zu einer Priorität zu machen. TYPO3 Barrierefreiheit bietet Funktionen und Tools die Entwicklern dabei helfen, Websites zu erstellen, die jeder leicht navigieren und genießen kann.

Ist das nicht genau die Art von Web und Fortschritt, die wir alle brauchen?
Lassen Sie uns loslegen und das Web für alle barrierefrei machen!

In der EU und in Deutschland basieren mehrere Rechtsrahmen auf den WCAG.

1. BFSG (Barrierefreiheitsstärkungsgesetz)

Das Barrierefreiheitsstärkungsgesetz (BFSG) ist die nationale Umsetzung der EAA in Deutschland. Das BFSG wurde im Juli 2021 verabschiedet. Es zielt darauf ab, digitale Produkte und Dienstleistungen für Menschen mit Behinderungen zugänglicher zu machen.

Dies ist vor allem im privaten Sektor wichtig, wo Barrierefreiheit bisher oft ignoriert wurde. Bislang galten die Barrierefreiheitsvorschriften in Deutschland hauptsächlich für Websites und Dienste des öffentlichen Sektors (gemäß BITV 2.0). Mit dem BFSG sind nun auch private Unternehmen in die Pflicht genommen.

2. EN 301 549

Dies ist die Europäische Norm für die Barrierefreiheit von IKT-Produkten und -Dienstleistungen, einschließlich Websites und mobiler Anwendungen. Sie basiert auf den WCAG-Standards und gilt (in Kürze) für öffentliche und private digitale Dienste in der gesamten EU.

3. BITV 2.0 (Barrierefreie-Informationstechnik-Verordnung)

BITV 2.0 ist die nationale Barrierefreiheitsverordnung für Websites des öffentlichen Sektors in Deutschland. Sie bezieht sich auf die Standards WCAG und EN 301 549.

4. Europäische Barrierefreiheitsrichtlinie (EAA)

Die EAA ist ein EU Gesetz, das sicherstellt, dass digitale Produkte und Dienstleistungen für alle zugänglich sind. Dazu gehören Websites, Software und andere Geräte.

Das BFSG (Barrierefreiheitsstärkungsgesetz) ist das offizielle Gesetz Deutschlands, mit dem die EAA in deutsches Recht umgesetzt wird.

Das BFSG tritt am 28. Juni 2025 in Kraft. Es schreibt vor, dass viele digitale Produkte und Dienstleistungen für Menschen mit Behinderungen zugänglich sein müssen.

Warum die BFSG für Ihr Unternehmen wichtig ist:

• Gesetzliche Anforderung: Unternehmen, die digitale Produkte oder Dienstleistungen in Deutschland und ganz Europa anbieten, müssen die BFSG-Norm einhalten.
• Größere Reichweite: Das Gesetz gilt nun auch für Websites des öffentlichen Sektors und der Regierung. Es umfasst private Unternehmen, Hersteller, Dienstleister und Online-Händler.
• Benutzerfreundlichkeit: Durch die Einhaltung der BFSG kann Ihr Unternehmen Millionen von Menschen mit Behinderungen erreichen, die allgemeine Benutzererfahrung verbessern und die digitale Gleichstellung fördern.
• Wer ist ausgenommen: Kleine Unternehmen mit weniger als 10 Mitarbeitern und einem Jahresumsatz von weniger als 2 Millionen Euro. Sie sind ausgenommen, aber größere Unternehmen müssen die Vorschriften befolgen.

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

1. Wählen Sie eine barrierefreie Vorlage

Beginnen Sie mit einer barrierefreien Vorlage. Das Bootstrap Paket für TYPO3 ist eine gute Wahl. Es entspricht den wichtigsten Barrierefreiheitsstandards, sodass Ihre Website für alle besser navigierbar ist. Es 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 bieten Möglichkeiten, die Funktionalität Ihrer Website zu verbessern, um sie barrierefreier zu gestalten:

• Barrierefreies CAPTCHA: Macht Formulare für alle einfacher zu bedienen.
• T3AI: Verbessert Ihre Inhalte, wodurch sie für Suchmaschinen und Screenreader besser lesbar werden.
• mask oder container: Erstellt ansprechendere Layouts, die einem Design und einer Logik folgen.

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. Zertifizierte, barrierefreie Vorlagen

• Seit 2023 ist das TYPO3 Bootstrap Paket offiziell barrierefrei und wurde von BIK für Alle getestet.
• Es basiert auf dem Bootstrap-CSS-Framework und bietet geeignete 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 ermöglichen die Erfüllung von Kriterien hinsichtlich Bedienbarkeit und Wahrnehmbarkeit.

3. Erforderliche Erweiterungen für Barrierefreiheit

Inhalt & Editor-Tools

• CKEditor abbr Plugin: Fügt <abbr> Tags mit Tooltips für Akronyme hinzu.
• a11y Check: Überprüft Ihre Inhalte während der Bearbeitung auf Probleme hinsichtlich Barrierefreiheit, sodass Sie diese sofort erkennen können.

Navigation und Interaktion

• Easy Accesskeys: Ermöglicht es Benutzern, mithilfe von Tastaturkürzeln zu wichtigen Bereichen (wie Menüs oder Formularen) zu springen.
• All in One Accessibility: Fügt eine Frontend-Symbolleiste hinzu, die Screenreader-Unterstützung, Kontrastwerkzeuge und Textgrößenanpassung bietet.
• accessibility4typo3: Siteweite Frontend-Verbesserungen für eine benutzerfreundlichere Erfahrung.

Medienunterstützung

• Barrierefreier Videoplayer: Ermöglicht Untertitel, Tastatursteuerung und mehrere Videoformate.
• Voice Reader TTS: Wandelt schriftliche Inhalte in Sprache um, um das Browsen mit den Ohren zu ermöglichen (erfordert eine Lizenz).

KI-gestützte Barrierefreiheit

• T3AA: Generiert Alt-Text mit KI, überprüft den Farbkontrast und bietet Sprachsteuerungsfunktionen.

[Quelle: https://extensions.typo3.org/]

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 (<main>, <nav>, <aside>) werden durch Fluid-Vorlagenstrukturen ausdrücklich empfohlen.

6. Medienzugänglichkeit

• Barrierefreie Videoplayer mit MediaElement.js ermöglichen Untertitel, Audiobeschreibungen, Tastatursteuerung und Unterstützung mehrerer Formate.
• Einige Erweiterungen, wie Voice-Over-Tools, konvertieren Inhalte für blinde oder sehbehinderte Benutzer in Audio- oder Podcast-Formate.

TYPO3 nimmt die Barrierefreiheit des Backends ernst. Ab Version 11 verfügt das System über viele neue Funktionen. Diese Änderungen erleichtern die Bearbeitung und sind besonders für Nutzer mit Sehbehinderungen hilfreich.

Praxistests: Barrierefreiheit in TYPO3 v11

Im Jahr 2021 testete TYPO3 die Benutzerfreundlichkeit seines Backends. Dabei arbeitete das Unternehmen mit zwei blinden Nutzern zusammen. Die Tests konzentrierten sich auf die Version 11.5.1, um deren Barrierefreiheit zu überprüfen.

1. Matthias Henke, Redakteur bei DRK Kliniken Berlin

Matthias Henke, der seit seinem 15. Lebensjahr blind ist, nutzt den Screenreader JAWS und eine Braillezeile, um alle digitalen Inhalte bei DRK Kliniken zu verwalten. Während seiner Tests mit TYPO3 v. 11.5.1 konnte er relativ problemlos Seiten erstellen und Dateien hochladen.

Natürlich stellen auch die ungewohnten Funktionen eine Herausforderung dar, wie z. B. fehlende Beschriftungen im Seitenbaum oder unübersetzte Elemente, deren Bedeutung nie vermittelt wurde.

Manchmal benötigte er Unterstützung oder musste sich durch Ausprobieren zurechtfinden, um Aufgaben zu erledigen, die eigentlich einfach sein sollten.

Wichtige Erkenntnisse:

• Das TYPO3 Backend ist für geschulte Nutzer eines Screenreaders barrierefrei.
• Es gibt integrierte Barrierefreiheitsfunktionen, aber Onboarding und Dokumentation sind entscheidende Faktoren.

2. Dennis Westphal, Barrierefreiheitstester

Dennis Westphal, Gründer von Usability und blinder Screenreader-Nutzer, testete das Backend von TYPO3 auf seine Benutzerfreundlichkeit. Er identifizierte Probleme wie unbeschriftete Felder, stille Fehlermeldungen und unklare Navigation, die die Benutzererfahrung beeinträchtigten.

Beachten Sie, dass es in einer digitalen Umgebung keine „alltäglichen” Aufgaben gibt. Aktivitäten wie das Einloggen oder das Erstellen von Inhalten erfordern gewisse Vorkenntnisse. Sie sollten sich zunächst über den Arbeitsablauf informieren. Ohne dieses Wissen können Sie nur raten.

Wichtige Erkenntnisse:

• Fehlende Beschriftungen und inkonsistentes Feedback verursachen Reibungsverluste für neue oder geschulte Benutzer.
• Die Unterstützung von Tastatur und Screenreader muss sorgfältig durchdacht werden, um Möglichkeiten für reibungslosere Arbeitsabläufe zu schaffen.

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.

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 und vermeiden Sie es, Text über Bilder zu legen, es sei denn, er ist eindeutig erkennbar. TYPO3 Vorlagen verfügen oft über integrierte Standards. 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 in Sekundenschnelle klare, umsetzbare Ergebnisse.

Keine Einrichtung. Keine technischen Probleme. Nur klare Ergebnisse.

Die Erstellung einer barrierefreien Website ist eine fortlaufende Tätigkeit, die mit der Planung beginnt. TYPO3 ist ein hervorragendes CMS mit einer soliden Grundlage für die Erstellung barrierefreier Websites, aber damit endet nicht Ihre Verantwortung als Entwickler.

Wenn Sie an Ihrer nächsten Website arbeiten, denken Sie daran, dass es sich um mehr als nur eine Website handelt. Sie schaffen einen Ort für ALLE, einen Ort, an dem jeder willkommen ist, sich zu engagieren.

Barrierefreiheit ist nie vollständig, aber denken Sie daran, dass jede Kleinigkeit zählt, und jedes Mal, wenn Sie dazu beitragen, den Zugang für eine Person zu verbessern, haben Sie einen Beitrag zur Barrierefreiheit geleistet.

Barrierefreiheit ist nie „fertig“, aber jeder Schritt nach vorn macht einen echten Unterschied!

Jetzt ist es an der Zeit, zu handeln. Zuwarten könnte Sie Nutzer, Vertrauen und die Einhaltung von Vorschriften kosten. Beginnen Sie damit, Ihre Website barrierefrei zu gestalten, und zwar nicht erst eines Tages, sondern schon heute.

Lassen Sie sich von NITSAN dabei helfen, Ihre TYPO3-Website dauerhaft barrierefrei zu gestalten!