Zugänglichkeit und Inklusion gewinnen zunehmend an Bedeutung – auch im Web. Schon bald wird Barrierefreiheit auf Websites für viele Unternehmen zur gesetzlichen Pflicht.
Als beliebtes Open-Source Content-Management-System (CMS) spielt für viele Unternehmen TYPO3 eine entscheidende Rolle bei der Gestaltung von barrierefreien Websites.
Doch was genau bedeutet Barrierefreiheit im Webkontext eigentlich? Wie kann TYPO3 ein barrierefreies Webdesign unterstützen und was sollten Sie bei der barrierefreien Inhaltserstellung mit TYPO3 beachten?
Was versteht man unter Barrierefreiheit im Webkontext?
Barrierefreiheit im Webkontext bedeutet, dass Websites und Webanwendungen so gestaltet werden, dass sie von allen Menschen unabhängig von ihren körperlichen oder technischen Fähigkeiten problemlos genutzt werden können.
So soll sichergestellt sein, dass Menschen mit Behinderungen, ältere Menschen, aber auch Menschen mit langsameren Internetverbindungen oder anderen Einschränkungen die gleiche Möglichkeit haben, auf Informationen und Dienste im Internet zuzugreifen wie alle anderen.
Vorteile einer barrierefreien Website
Barrierefreiheit und Inklusion gewinnen immer mehr an Bedeutung, und auch der gesetzliche Druck wächst. Zurecht, denn alle Menschen, unabhängig von eventuellen Einschränkungen, sollten Internetangebote nutzen können.
Eine barrierefreie Website bietet aber auch Unternehmen und ihrer Webpräsenz eine Vielzahl von Vorteilen, einschließlich:
- Erweiterter Nutzerkreis: Barrierefreie Websites ermöglichen es Menschen mit unterschiedlichen Fähigkeiten und Einschränkungen, auf die Inhalte zuzugreifen; das erweitert den potenziellen Nutzerkreis zum Teil erheblich.
- Gesetzliche Konformität: Für Behörden und öffentliche Einrichtungen sind barrierefreie Websites bereits seit längerem eine gesetzliche Verpflichtung. Für alle anderen Unternehmen wird die Barrierefreiheit ab Juni 2025 verpflichtend sein — zumindest für diejenigen, die online Produkte und Dienstleistungen anbieten.
- Verbesserte Benutzererfahrung: Barrierefreie Websites führen oft zu einer verbesserten Benutzererfahrung für alle Nutzer:innen, nicht nur für Menschen mit Behinderungen. Eine klare Navigation, gut strukturierte Inhalte und leicht verständliche Informationen sind für alle von Vorteil.
- Reputationsgewinn: Unternehmen, die sich für Barrierefreiheit engagieren, werden oft positiv wahrgenommen und als sozial verantwortlich angesehen, was zu einem positiven Image und einer stärkeren Kundenbindung führen kann.
- Technologische Vielfalt: Barrierefreie Websites sind in der Regel flexibler und können von einer Vielzahl von Geräten und Technologien leichter genutzt werden, einschließlich Bildschirmleseprogrammen, Braille-Displays und Sprachsteuerungstechnologien.
- Wirtschaftliche Vorteile: Barrierefreiheit kann dazu beitragen, die Konversionsrate zu erhöhen, da sie potenzielle Kunden nicht ausschließt, sondern allen die Möglichkeit bietet, Produkte und Dienstleistungen zu nutzen.
In unserem Artikel zum Barrierefreiheitsstärkungsgesetz (BFSG) erklären wir Ihnen die Bedeutung von Barrierefreiheit für Websites zusammen mit dem rechtlichen Rahmen.
Was ist TYPO3?
TYPO3 ist ein Open-Source Content-Management-System (CMS) für die Erstellung und Verwaltung von Websites und webbasierten Anwendungen. Es basiert auf PHP und nutzt eine MySQL-Datenbank für die Speicherung von Inhalten und Einstellungen.
Wie TYPO3 Barrierefreiheit schafft
Um die Barrierefreiheit von Websites zu gewährleisten, bietet TYPO3 verschiedene Templates und Extensions, die sowohl das Frontend als auch das Backend zugänglich machen:
- Templates: Templates sind die Grundlage für das Design und die Struktur einer Website. Sie enthalten das Layout, das Styling und die Platzierung von Inhalten. Mit TYPO3 können Templates erstellt und verwaltet werden, um eine konsistente Gestaltung über die gesamte Website sicherzustellen.
- Extensions: Extensions sind Zusatzmodule, die die Funktionalität von TYPO3 erweitern, z. B. durch die Integration von Barrierefreiheitsfunktionen oder anderen Features. Mit Hilfe von Extensions können Sie Ihre TYPO3-Website an Ihre individuellen Bedürfnisse anpassen und die Funktionalität der Website verbessern.
Wir erledigen das für Sie Experten für TYPO3 und Barrierefreiheit
Wie das TYPO3-Frontend barrierefrei wird
Das Frontend einer Website ist der Teil, den Besucher:innen sehen und mit dem sie interagieren. Es umfasst das Layout, das Design und die Inhalte, die im Webbrowser angezeigt werden. In TYPO3 wird das Frontend durch Templates gestaltet und enthält die vom Backend generierten Inhalte.
Barrierefreie Templates in TYPO3
Mit dem TYPO3-Bootstrap-Package (Frontend-Theme) gibt es seit 2023 ein offiziell barrierefreies und BITV-konformes TYPO3-Template. Das Frontend-Theme erreicht den internationalen Standard WCAG 2.1 und die Europäische Norm EN 301 549. Die Barrierefreiheit wurde durch die Prüfstelle der BIK für Alle getestet und bestätigt.
Das TYPO3-Bootstrap-Package basiert auf dem Bootstrap CSS Framework. Es eignet sich dafür, das gesamte Frontend (also die Website, wie sie den Nutzer:innen erscheint) zu definieren, zu konfigurieren und zu gestalten.
Damit wird die Nutzung der Website durch hilfreiche Technologien wie Reader, Braille-Geräte, Bildschirmvergrößerungen, Lese- und Sprachsteuerungsfunktionen problemlos möglich. Als zertifiziertes Paket fungiert die Package als Leitfaden dafür, wie die effektive Umsetzung der Barrierefreiheit aussehen kann. So wird der Zugang zu digitalen Services verbessert und insbesondere für Menschen mit Behinderungen erleichtert.
Extensions für Barrierefreiheit
Die TYPO3-Community hat eine Reihe von Erweiterungen (Extensions) entwickelt, mit denen die Barrierefreiheit von Websites verbessert wird. Sie tragen zur Einhaltung von Zugänglichkeitsstandards bei und unterstützen die Erstellung von Inhalten, die für alle zugänglich sind.
Einige Beispiele für solche Erweiterungen sind:
CKEditor Plugin for abbr tag
Das CKEditor Plugin für den abbr-Tag in TYPO3 ermöglicht es Benutzer:innen, Abkürzungen in ihrem Textinhalt zu definieren. Durch das Hinzufügen des abbr-Tags können Autor:innen ohne großen Aufwand Abkürzungen oder Akronyme standardkonform in ihrem Inhalt kennzeichnen und eine Erklärung für diese hinzufügen.
Wenn ein:e Benutzer:in mit der Maus über eine mit dem abbr-Tag gekennzeichnete Abkürzung fährt, wird die vollständige Form oder die Erklärung der Abkürzung angezeigt. Das verbessert die Zugänglichkeit und das Verständnis des Inhalts, insbesondere für Benutzer:innen, die mit der spezifischen Abkürzung oder dem Akronym nicht vertraut sind.
Easy accesskeys
Die Easy Accesskeys-Erweiterung in TYPO3 ermöglicht es Webseitenentwickler:innen, Tastaturkürzel zu definieren, die als “Accesskeys” in HTML bekannt sind. Accesskeys sind nützlich für die Verbesserung der Zugänglichkeit auf Websites, da sie Benutzer:innen erlauben, direkt zu bestimmten Teilen einer Website zu springen oder spezifische Aktionen auszuführen, indem sie eine bestimmte Tastenkombination auf ihrer Tastatur verwenden.
Mit der Easy Accesskeys-Erweiterung können Entwickler:innen Accesskeys für verschiedene Elemente auf der Website festlegen (z. B. Links, Buttons oder Formularfelder) und das Navigieren auf der Seite für Benutzer:innen mit Behinderungen erleichtern. Besonders Nutzer:innen, die Schwierigkeiten haben, die Website mit der Maus anzusteuern, können von Accesskeys profitieren.
a11y check
Die a11y check-Erweiterung hilft Entwickler:innen und Redakteur:innen, ihre Website-Inhalte auf Barrierefreiheit zu prüfen.
Die Erweiterung testet redaktionell erstellte Inhaltselemente wie Texte, Bilder und Newsbeiträge auf ihre Barrierefreiheit. Überprüft werden dabei folgende drei Punkte:
- Alt-Texte bei Bildern
- Gliederungsstruktur der Überschriften, d.h. ob diese hierarchisch logisch angeordnet sind (Auf H1 folgt H2 usw.)
- Links bzw. die Linktexte (Sind die Linktexte eindeutig und erklären das Ziel des Links?)
Eine Farbskala zeigt an, wie gravierend der Fehler ist; über einen Bearbeitungsbutton können Sie direkt zu dem jeweiligen Inhaltselement navigieren.
Beachten Sie, dass die Erweiterung davon ausgeht, dass die Website durch das Haupttemplate Ihrer TYPO3-Website bereits weitestgehend barrierefrei ist. Das heißt, das Tool testet Teile einer Seite wie Header, Footer und Menüs nicht auf Ihre Zugänglichkeit. Nur redaktionell erstellte Inhalte können überprüft werden und das auch nicht automatisch auf der gesamten Website. Sie können einzelne Seiten auf ihre Barrierefreiheit prüfen lassen. Für genauere Zugänglichkeitsprüfungen müssen Sie auf andere Tools zurückgreifen.
Accessible video player based on MediaElement.js
Der Accessible video player von TYPO3 ermöglicht den Einsatz eines barrierefreien Videoplayers auf der Website.
Die Erweiterung nutzt das JavaScript-Framework MediaElement.js, um einen HTML5-basierten Videoplayer zu erstellen, der für Benutzer:innen sowohl mit der Maus als auch mit der Tastatur leicht bedienbar ist.
Zudem unterstützt der Player mp4, webm, Untertitel, Gebärdensprachenvideos, Audiodeskription und Alternativtexte. Auf diese Weise kann die Zugänglichkeit für Personen mit verschiedenen Behinderungen verbessert werden.
Voice Reader Text-to-Speech
Der Voice Reader Text-to-Speech transformiert Textinhalte auf einer Website in gesprochene Sprache. Das ermöglicht Nutzer:innen, den Inhalt der Website zu hören, anstatt ihn lesen zu müssen. Er kann auf jeder Website mit HTML-Inhalt verwendet werden und erfordert eine gültige Voice Reader Web-Lizenz, da die Extension mit einem Drittanbieter (Linguatec Voice Reader Web) arbeitet.
Diese Extension ist besonders nützlich für Menschen mit Sehbehinderungen, aber auch für Nutzer:innen, die es vorziehen, Inhalte auditiv zu konsumieren, beispielsweise während sie unterwegs sind.
Barrierefreiheit im TYPO3-Backend
Das Backend ist die Administrationsoberfläche von TYPO3, über die Website-Administrator:innen Inhalte verwalten, bearbeiten und veröffentlichen können. Hier werden Templates konfiguriert, Extensions installiert und Einstellungen vorgenommen.
Barrierefreiheit spielt nicht nur für die Nutzer:innen der Website im Frontend eine Rolle. Auch für Ihre Mitarbeiter:innen sollten Sie Wert auf Barrierefreiheit am Arbeitsplatz legen. Ein barrierefreier Arbeitsplatz trägt dazu bei, eine inklusive Arbeitskultur zu fördern.
TYPO3 legt großen Wert auf die Zugänglichkeit des Backends. Content Manager:innen sollen, unabhängig von ihren Fähigkeiten und Einschränkungen, ihre Aufgaben effektiv erledigen können.
Fallstudie aus dem Jahr 2021: Das TYPO3-Backend im Test
Seit TYPO3 v11 haben sich die Zugänglichkeitsmöglichkeiten für Nutzer:innen mit Sehbehinderungen erheblich verbessert, wie Fallstudien aus dem Jahr 2021 zeigen.
Zwei blinde Menschen haben die Nutzbarkeit des Backends von TYPO3 v11.5.1 getestet. Dabei konzentrierten sich die Tests in beiden Fällen auf einige oft verwendete redaktionelle Schritte.
In der ersten Fallstudie testete Matthias Henke, Online-Redakteur bei den DRK-Kliniken in Berlin, verschiedene Funktionen des TYPO3-Backends, darunter den Login-Prozess, das Anlegen von Seiten und Inhalten sowie Speichern, Bearbeiten und Löschen. Er stellte fest, dass TYPO3 v11 besser beschriftet war und die Erstellung neuer Veranstaltungen schneller und einfacher war. Zudem gab es weniger Tabellen und Listen im Vergleich zur älteren Version v6.
In der zweiten Fallstudie führte Dennis Westphal, Business-Developer bei der Gesellschaft zur Entwicklung von Dingen (GzEvD), einen Usability-Test durch, bei dem der Login-Prozess und das Bearbeiten von Seiteninhalten getestet wurden. Westphal stellte fest, dass ohne eine vorherige Einführung die Bedienung des Backends verwirrend sein könnte, insbesondere wenn sich grundlegende Aspekte, wie die Reihenfolge der Formularfelder, ändern würden. Er betonte den Bedarf an sinnvollen Labels für Formularfelder und Schaltflächen.
Die kontinuierliche Optimierung der Barrierefreiheit ist ein integraler Bestandteil der TYPO3-Entwicklung. Das Accessibility-Team von TYPO3 leistet einen entscheidenden Beitrag zur Verbesserung und Aufrechterhaltung der Zugänglichkeit, indem es unter anderem Sprints durchführt und wesentliche Funktionen wie die Tastaturnavigation im Seitenbaum des Backends implementiert.
Auch in der aktuellen Version, TYPO v13, soll die Barrierefreiheit noch weiter optimiert werden, um den hohen Standards des öffentlichen Sektors gerecht zu werden.
Alle wichtigen Infos TYPO3 CMS v13 – Was die neue Version bringt
Was ist bei der barrierefreien Inhaltserstellung zu beachten?
Wenn Ihre Website einmal grundsätzlich barrierefrei eingerichtet ist, beginnt das Alltagsgeschäft der Barrierefreiheit. Denn natürlich muss auch bei der Erstellung von Inhalten – von der Landingpage bis zum Blogartikel, vom Podcast bis zur Videobotschaft – darauf geachtet werden, dass diese barrierefrei erscheinen.
Bei der Inhaltserstellung mit TYPO3 gibt es einige wichtige Aspekte zu beachten, damit Ihre Inhalte von möglichst vielen Nutzer:innen erfasst werden können.
Die wichtigsten Punkte haben wir hier für Sie zusammengetragen:
Überschriftenhierarchie
Eine klare Strukturierung mit Überschriften verbessert die Verständlichkeit Ihres Inhalts und fördert einen reibungslosen Textfluss. Gut gewählte Überschriften erleichtern die Navigation auf der Seite, besonders für Screen Reader.
Achten Sie darauf, die richtigen Überschriftenebenen zu verwenden: Beginnen Sie mit einer H1-Überschrift als Seitentitel und verwenden Sie dann H2, H3, H4 usw. in der richtigen Reihenfolge. Vermeiden Sie es, z. B. eine H4 direkt nach einer H2 zu setzen. Durch eine angemessene Gestaltung der Inhalte in TYPO3 kann dies effektiv unterstützt und für die Redaktion vereinfacht werden.
Bonus: Eine korrekte Überschriftenhierarchie wird auch von Suchmaschinen für die Bewertung Ihrer Inhalte geprüft und positiv bewertet – die Hierarchie gehört fest zum Instrumentarium der OnPage-SEO.
Barrierefreie Bilder
Auch wenn Alternativtext in TYPO3 optional ist, sollten Sie ihn zugunsten der Barrierefreiheit in der Regel einfügen: So werden auch Nutzer:innen, die den Bildinhalt selbst nicht wahrnehmen können, über seinen Inhalt informiert. Screenreader erkennen und lesen die Alternativtexte vor. Der Alt-Text sollte den Inhalt des Bildes kurz beschreiben und nur so lang wie unbedingt nötig sein – idealerweise maximal 150 Zeichen.
Für Bilder mit sehr vielen Informationen, wie Infografiken oder Diagramme, dürfen die Alt-Texte ausnahmsweise länger ausfallen. Bei rein dekorativen Bildern ist kein Alternativtext notwendig.
Audio & Video
Audio-Inhalte sollten in höchster Qualität bereitgestellt werden, um die Zugänglichkeit für Schwerhörige zu verbessern. Störende Hintergrundgeräusche und ungleiche Lautstärken sollten unbedingt vermieden werden. Außerdem sind Text-Transkripte für eine umfassende Verständlichkeit und Barrierefreiheit von Audio- und Video-Inhalten unerlässlich.
Bei Videos ist es wichtig, auf eine klare Darstellung und Verständlichkeit des Gesprochenen zu achten, da Hör- und Sehbehinderte Schwierigkeiten haben könnten, amateurhafte Aufnahmen zu verfolgen. Zudem sollten abrupte Änderungen in Ton und Beleuchtung vermieden werden, und Sprecher:innen sollten sich der Kamera zuwenden, um zusätzliche Informationen über Lippenbewegungen und Körpersprache zu vermitteln.
Auch Transkripte oder klare Beschreibungen des Videoinhalts gehören zu jedem Video dazu, ebenso wie (mindestens optionale) Untertitel. Für hörgeschädigte Personen wäre die Verwendung von Gebärdensprache optimal, um den Inhalt zu verstehen.
Nicht vergessen: Auch die Einbindung der Audio- und Video-Inhalte in die Website muss selbstverständlich barrierefrei geschehen.
Leichte Sprache
Leichte und Einfache Sprache ermöglichen eine inklusive Kommunikation für alle. In Leichter Sprache werden kurze Sätze und einfache Wörter verwendet, um klare Botschaften zu vermitteln, während Bilder das Verständnis unterstützen. Dies ist besonders hilfreich für Menschen mit Lese-Schwierigkeiten. Leichte Sprache hat klare Regeln und Anforderungen, die sie erfüllen muss.
Einfache Sprache nutzt ebenfalls kurze Sätze und einfache Wörter, um verschiedenen Menschen mit Leseproblemen zu helfen – allerdings ohne klare Richtlinien und Strukturen. Sie kommt der Alltagssprache deutlich näher.
Beide Formen der Sprache bieten nicht nur wichtige Unterstützung für Menschen mit Lese- und Rechtschreibschwäche, sondern auch für Menschen mit kognitiven Einschränkungen oder Deutsch als Zweitsprache.
Kontrast
Achten Sie auf ein ausreichendes Kontrastverhältnis zwischen Text und Hintergrund, um die Lesbarkeit für Nutzer:innen mit Sehbeeinträchtigungen zu verbessern. Normalerweise wird schwarzer Text auf weißem Hintergrund verwendet, was das höchstmögliche Kontrastverhältnis von 21:1 bietet. Für eine barrierefreie Website müssen Texte ein Kontrastverhältnis von mindestens 4,5:1 haben.
Es gibt jedoch Ausnahmen: Dekorative Texte und Textlogos sind nicht von dieser Anforderung betroffen.
Allerdings gilt dies nicht nur speziell für die Inhaltserstellung, sondern eher für das Design der gesamten Website. Entsprechende Kontraste sollten daher bereits im Template angelegt werden.
Weitere Tools zur Umsetzung von Barrierefreiheit
Verschiedene Anbieter entwickeln inzwischen Tools, mit denen – so das Versprechen – sich nahezu jede Website unabhängig von ihrem Content Management-System mit wenigen Klicks barrierefrei machen ließe.
Wir haben uns einige dieser Tools ebenso wie verschiedene KI-Techniken genauer angesehen und stellen Ihnen diese (Spoiler Alert: vermeintlich) leichten Lösungen in unserem Beitrag “Barrierefreiheit leicht gemacht? Was KI und andere Tools leisten können” genauer vor.
Überprüfung und Testen der Barrierefreiheit in TYPO3
Es gibt mehrere Wege, die Barrierefreiheit auf Ihrer TYPO3 Website zu testen. Es gibt beispielsweise Tools wie WAVE oder AChecker, mit denen Sie Ihre Website prüfen können.
Auch wenn es Tools zur Barrierefreiheitsprüfung gibt, kommen Sie um eine manuelle Prüfung Ihrer Website nach aktuellem Stand leider nicht herum. Die Problemanalyse-Tools wirken nur unterstützend, da sie aktuell noch nicht in der Lage sind, alle Barrieren auf einer Website zu identifizieren. Vor allem wenn Kontext und menschliche Interpretation gefordert sind, wie zum Beispiel bei Alt-Texten, ist eine manuelle Prüfung durch die Redaktion notwendig.
Fazit
Mit dem wachsenden Bewusstsein für Inklusion und den gesetzlichen Anforderungen, die bald für viele Unternehmen gelten werden, ist die Integration von barrierefreiem Webdesign unverzichtbar.
TYPO3, als beliebtes Open-Source Content-Management-System, spielt eine entscheidende Rolle bei der Gestaltung von barrierefreien Websites. Mit barrierefreien Templates wie dem TYPO3-Bootstrap-Package und speziellen Erweiterungen für Barrierefreiheit bietet es bereits umfassende Möglichkeiten, Webinhalte für alle Nutzer:innen zugänglicher zu machen und Unternehmen die Umstellung auf eine barrierefreie Website zu erleichtern.
Nutzen Sie die zahlreichen Funktionen, die TYPO3 zu bieten hat, und kümmern Sie sich vor allem rechtzeitig um die Barrierefreiheit auf Ihrer Website. Wir als TYPO3-Agentur mit Herzblut unterstützen Sie gerne und entwickeln mit Ihnen gemeinsam eine zukunftsfähige TYPO3-Website.
