Barrierefreie Websites mit TYPO3

Durch unsere vielfältigen Kundenprojekte im öffentlichen Sektor haben wir eine umfangreiche Expertise hinsichtlich der Realisierung von barrierefreien und barrierearmen Websites mit TYPO3 gesammelt - u.a. bei der Leipziger Gruppe und der Stadtreinigung Hamburg. Im folgenden Blogbeitrag erläutern wir, worauf es dabei ankommt und was wir gelernt haben.

Was ist eine barrierefreie Website?

Im Kern geht es bei der Barrierefreiheit oder Web-Accessibility darum, Menschen mit eingeschränkter Wahrnehmbarkeit die Teilnahme am eigenen Webangebot zu ermöglichen. Wenn man die zugehörigen Leitlinien befolgt, werden die Inhalte für ein breiteres Spektrum von Menschen mit Einschränkungen zugänglich, darunter Blinde und Sehbehinderte, Gehörlose und Hörgeschädigte, Menschen mit Lernbehinderungen, kognitiven Einschränkungen, Bewegungseinschränkungen, Sprachbehinderungen, Lichtempfindlichkeit und Kombinationen davon. Außerdem werden Webinhalte auch für Website-Besucher im Allgemeinen besser nutzbar.

Zur Barrierefreiheit gehören viele Aspekte und Faktoren. Die wichtigsten davon sind:

leichte Verständlichkeit des Web-Angebots
saubere technische Umsetzung (valider HTML-Code u. v. m.)
gutes Screendesign mit Blick auf Struktur und Fokus
gute Lesbarkeit und Wahrnehmbarkeit
Schriftgröße und Kontrast für Menschen mit einer Sehschwäche oder Farbfehlsichtigkeit
Alternative Bildtexte, Sprachausgabe und Braille-Tastatur für blinde Menschen
Audio-Transkription für gehörlose Menschen
einfache Handhabung und leicht erkennbare Navigationsstruktur
Bedienbarkeit: z.B. Tastaturbedienung, Screenreader, ...
Robustheit für weitere assistierende Technologien und Unterstützungsfunktionen wie spezielle Vergrößerungsprogramme oder NonVisual Desktop Access, der auf dem Bildschirm angezeigte Informationen in Sprachausgabe und Brailleschrift umwandelt

In einem früheren Blogartikel haben wir 10 wichtige Punkte zur Barrierefreiheit zusammengestellt, auf die Sie unbedingt achten sollten.

Was sind die Vorteile einer barrierefreien Website?

Staatliche und öffentlich zugängliche Webangebote sind seit Erlass der Verordnung zur Schaffung barrierefreier Informationstechnik nach dem Behindertengleichstellungsgesetz (BITV) verpflichtet, einen barrierefreien Zugang zu Ihrem Webangebot zu ermöglichen. Was für Behörden und in der öffentlichen Verwaltung bereits lange Praxis ist, erlangt aber auch für immer mehr Unternehmen an Bedeutung. Dieser Trend wird einerseits getrieben durch neue Regelungen - in einigen Ländern ist Barrierefreiheit bereits eine gesetzliche Vorgabe - andererseits durch Compliance-Vorgaben.

Vieles, was bei der barrierefreien Umsetzung von Websites und Webanwendungen zu beachten ist, spielt übrigens auch der allgemeinen Benutzbarkeit des eigenen Webangebots sowie der Suchmaschinenoptimierung (SEO) in die Hände. Der Zugang wir für alle Internetnutzer einfacher, übersichtlicher und weniger anstrengend. So lässt sich über eine barrierefreie oder barrierearme Website ein echter Wettbewerbsvorteil realisieren, der auch in einer größeren Reichweite und Sichtbarkeit resultieren kann.

Was ist TYPO3?

TYPO3 ist ein weit verbreitetes und beliebtes Open Source Enterprise Content Management System. Eine aktive TYPO3-Community sorgt permanent für interessante Erweiterungen. TYPO3 ist durch die intuitive Oberfläche für Editoren einfach zu bedienen. Außerdem gilt es als eines der sichersten CMS und gewährleistet regelmäßige Security-Updates. Gerade in den letzten Jahren hat sich die TYPO3-Community vermehrt auch das Thema Barrierefreiheit auf die Fahnen geschrieben und entwickelt unter anderem mit der Accessibility Initiative das CMS dementsprechend weiter.

Wir bei MOGIC haben uns auf dieses extrem leistungsstarkes CMS mit seinem mächtigen Funktionsumfang spezialisiert. Daher nehmen wir im folgenden besonders die Fähigkeiten von TYPO3 mit Blick auf barrierefreie Websites unter die Lupe.

Der Web Almanac hat übrigens auf seiner Website einen Test zur Barrierefreiheit verschiedener CMSaus dem Jahr 2021 veröffentlicht. Der Accessibility Score von Seiten, die mit TYPO3 erstellt wurden, liegt hier bei 84 von 100 und damit auf Augenhöhe mit Websites, die z. B. mit Wordpress oder Drupal erstellt wurden. Da die meisten Seiten in TYPO3 - abseits der vorgefertigten "Distributions" - mit individuellen Templates erstellt werden, bewertet dieser Score allerdings vordergründig die Qualität dieser Templates, nicht in erster Linie die Fähigkeiten des CMS.

Wie erstellt man mit TYPO3 barrierefreie Websites?

TYPO3 ist grundsätzlich in der Lage "out of the box" einfache Websites zu generieren, die den Anforderungen an Barrierefreiheit genügen. Jede Anforderung, jede Funktion, jede Anpassung oder technische Erweiterung und jedes Design-Detail können aber ausschlaggebend dafür sein, ob das Endresultat eines Projekts auch tatsächlich barrierefrei oder barrierearm ist. Daher empfehlen wir, bei Planung und Durchführung solcher Projekte mit spezialisierten Experten für Barrierefreiheit sowie professionellen TYPO3-Integratoren und -Entwicklern zusammenzuarbeiten, die die Auswirkungen solcher Anpassungen einschätzen und beherrschen können.

Barrierefreie Templates in TYPO3

Die Zugänglichkeit des Frontends von Websites ist elementar wichtig. Viele technische Bemühungen zur Beseitigung von Barrieren auf Websites konzentrieren sich in erster Linie auf die barrierefreie Gestaltung des Frontends.

Für die Interpretation einer Website durch assistierende Systeme wie Screen Reader spielt sauberes HTML-Markup eine wichtige Rolle. TYPO3 liefert schon sehr lange - nämlich bereits seit Version 4.0 - validen HTML-Quellcode "out of the box" aus. TYPO3-Integratoren und Entwickler müssen dennoch selbst intensiv auf die technischen Aspekte der Barrierefreiheit bei der Umsetzung achten. Das betrifft insbesondere die Erstellung eigener Templates und Partials, mit deren Hilfe Struktur und Inhalt der Website im Browser dargestellt werden. Wichtige Aspekte hierbei sind:

Validität des HTML-Markups und CSS
semantisches Markup, das die logische Funktion der Elemente beschreibt
korrekte Elementreihenfolge und Verschachtelung (z.B. Überschriftenebenen)
Verwendung spezieller Tags für wichtige Navigationsbereiche (z.B. header, nav, main, side und footer)

Barrierefreiheit und TYPO3-Extensions

Viele TYPO3-Extension verwenden eigene Templates. Hier kann nicht automatisch davon ausgegangen werden, dass diese vom Extension-Entwickler barrierefrei angelegt wurden. An diesen Stellen ist also besonders darauf zu achten, ob man solche Extensions einsetzen kann. Oft sind Anpassungen an den Templates nötig, aber bei Beachtung der Entwicklungsparadigmen auch möglich, ohne die Upgrade-Fähigkeit der Erweiterung zu gefährden.

Im Extension-Verzeichnis von TYPO3 finden sich einige nützliche Erweiterungen, welche die Zugänglichkeit Ihrer Website verbessern können. Viele davon sind allerdings noch recht neu und nicht von einer breiten Nutzerbasis getestet.

Das "CKEditor Plugin for abbr tag" erleichtert Editoren das Einfügen und korrekte Erläutern von Abkürzungen
Die Erweiterung "a11y check" möchte Zugänglichkeitsprüfungen für redaktionell erstellte Inhalte ermöglichen, befindet sich aber noch im Beta-Status
"Easy accesskeys" ist ebenfalls eine noch recht junge Erweiterung, die die Tastatursteuerung erleichtern möchte
Gleiches gilt für die Erweiterung "Accessible video player based on MediaElement.js", die sich um die Zugänglichkeit von Videoinhalten kümmern möchte

TYPO3-Packages und Accessibility

TYPO3 liefert sogenannte "Kickstart Distributions" an, die den Fokus nicht so sehr auf Barrierefreiheit, sondern auf schnelle Entwicklung und einen einfachen Start legen.

Es gibt aber z. B. auch das Higher Education Package, das sich an Universitäten richtet und großen Wert auf Barrierefreiheit legt.

Dieses Paket kümmert sich "out of the box" unter anderem um folgende Aspekte:

starke Kontraste bei den Vorder- und Hintergrundfarben im Standard-Template
Alternative Texte für Bilder
Vergrößern und Verkleinern der Schriftgröße
Verwendung von sog. ARIA-Roles, um Seitenbereiche und ihre Funktionen zu erklären
Formularelemente mit Labels
Bedienung von Navigationselementen mit der Tastatur (Tab-Navigation)
Prüfung neuer Funktion auf Einhaltung der WCAG 2-Richtlinien

Barrierefreie Menüs mit TYPO3

Eine konsistente Menüführung ist besonders wichtig, damit sich Menschen mit Beeinträchtigungen mithilfe ihrer technischen Systeme einfach durch die Website navigieren können. Hierzu sind spezielle Markup-Elemente zu verwenden, um wichtige Navigationsbereiche zu kennzeichnen, wie z. B. header, nav, main, side und footer. Das Inhaltselement "Menü" verfügt in TYPO3 ebenso wie das "Tabellen"-Element über zusätzliche Felder zur Verbesserung der Barrierefreiheit, die Editoren bei der Inhaltspflege mit befüllen sollten.

Barrierefreiheit in TYPO3 aus Sicht der Online-Redaktion

Was ist bei der Inhaltserstellung zu beachten?

Die Texte auf Ihrer Website sollen als kurze, verständliche, gut lesbare Sätze formuliert werden und in einer sinnvollen Reihenfolge angeordnet werden. Text auf Bildern und Texte, die als Bild umgesetzt wurden, sind zu vermeiden, weil diese von Screen Readern nicht erkannt werden können. Auch darf es beim Lesen der Inhalte keine Zeitbegrenzung geben - wichtig z. B. bei interaktiven Quizzes.

Achten Sie außerdem auf sinnvolle Linktexte, die erklären, was nach dem Klick zu erwarten ist - also z. B. keine generischen "Weiterlesen"- oder "Mehr"-Links. Das hilft übrigens auch Suchmaschinen, besser zu verstehen, worum es auf ihrer Seite geht. Wird ein Link in einem neuen Browserfenster geöffnet, so muss das vorher erkenntlich sein.

Abkürzungen (Akronyme) sollten vermieden oder zumindest mit <abbr> oder <acronym> ausgezeichnet werden. Dann kann im title-Attribut die Bedeutung der Abkürzung für Screen Reader zur Verfügung gestellt werden.

Struktur & Überschriften

Eine wichtige Aufgabe ist die Strukturierung des Inhalts durch sorgfältige Verwendung von Überschriften. Dadurch wird Ihr Inhalt leichter verständlich und der Textfluss wird verbessert. Außerdem helfen gut strukturierte Überschriften Screen Readern dabei, die Inhalte zu interpretieren. Damit wird die seiteninterne Navigation erheblich vereinfacht. Verwenden Sie also stets die richtigen Überschriftenebenen. Jede Seite hat genau eine H1-Überschrift - normalerweise als Seitentitel. Daran können sich Zwischenüberschriften anschließen, die mit H2 beginnen und dann mit H3, H4, u. s. w. weiter verschachtelt werden können. Diese sollten immer in der richtigen Reihenfolge verwendet werden. Es ist also z. B. zu vermeiden, eine H4 direkt nach einer H2 zu verwenden. Dies kann durch entsprechend sachgemäße Gestaltung der Inhaltselemente in TYPO3 erheblich unterstützt und für die Redaktion vereinfacht werden.

Zugängliche Bilder und Fotos in TYPO3

Der alternative Bildtext ist in TYPO3 optional verwendbar, sollte aus Gründen der Barrierefreiheit aber immer gesetzt werden und beschreiben, was auf der jeweiligen Abbildung zu sehen ist. Dieser Text kann von Screen Readern vorgelesen werden. Ein typischer Richtwert für die Länge ist 150 Zeichen. Längere Bildbeschreibungen können als Bildunterschrift in den Text der Seite eingebunden werden. Ebenso sollte für alle Nicht-Text-Inhalte das Title-Attribut gefüllt werden. Dekorative Bilder, die von Screen Readern übersprungen werden sollen, kennzeichnet man mit einem leerem alt-Attribut.

Text-Formatierung

Wenn Texte aus Textverarbeitungsprogrammen wie Word direkt in den TYPO3-Editor eingefügt werden, können dabei ungewünschte Stilinformationen mit übernommen, die nicht nur unschön aussehen, sondern auch die Barrierefreiheit stören können. Im TYPO3-Editor ist es möglich, diese Anweisungen automatisch entfernen zu lassen. Außerdem hilft der Rich Text Editor im TYPO3-Backend bei der Erstellung von semantischen Überschriften.

Grundsätzlich lässt sich der Editor bei TYPO3 frei anpassen, so dass man für alle Editoren solche Optionen entfernen kann, die nicht barrierefreie Tags benutzen oder zusätzliche CSS-Klassen für die barrierefreie Auszeichnung hinzufügen kann. Auch lassen sich z. B. automatisch Icons mit entsprechendem Hinweis im Alt-Text und Title vor externe Links setzen, die in einem neuen Fenster geöffnet werden.

Audio & Video

Videos sollen nicht per Autoplay starten. Das ist etwas, das unserer Erfahrung nach wirklich jeder Websitebesucher goutiert. Ebenso muss es eine Möglichkeit geben, Videos und Audio-Beiträge anzuhalten. Auch für die Mediensteuerung gibt es spezielles Markup, dass angewendet werden sollte. Ebenso hilfreich ist die Möglichkeit zur Anzeige von Untertiteln bei Videos. Bieten Sie Alternativen für reine Audio-Inhalte - z. B. ein Audio-Transkript.

Leichte Sprache

Die "Leichte Sprache" wendet sich an Menschen mit kognitiven Einschränkungen. Sie soll so einfach wie möglich lesbar sein und ohne viele Fachbegriffe auskommen. Daher verfügt sie über kürzere Sätze, einfache Satzstrukturen und wenig Kommata. Hierfür wurde vom Netzwerk leichte Sprache ein Regelwerk veröffentlicht, das Richtlinien für die Texterstellung vorgibt. Auf Websites - mit und ohne TYPO3 - wird die leichte Sprache meist über einen Umschalter zugänglich gemacht. Über einen solchen Schalter kann dann eine spezielle Textfassung des aktuellen Inhalts in leichter Sprache ausgespielt werden. Es ist möglich, hierfür die Mehrsprachenfähigkeit von TYPO3 zu nutzen und die leichte Sprache als zusätzliche Sprache zu behandeln. Damit können die Übersetzungsfunktionen im TYPO3 genutzt werden. Alternativ können im Seitenbaum separate Bereiche für Inhalte in leichter Sprache erzeugt werden. Entsprechende Texte kann man von zertifizierten Übersetzern erstellen lassen.

Editorial Guidelines für Barrierefreiheit

Richtlinien für Editoren können dabei unterstützen, die wesentlichen Aspekte der Barrierefreiheit in der Editorial Community bekannt zu machen und so dafür zu sorgen, das eigene Web-Angebot zugänglich zu halten.

Barrierefreiheit im TYPO3-Backend

Bei TYPO3 wird Wert darauf gelegt, dass Content Manager mit angeborenen, alters-, umwelt- oder unfallbedingten Einschränkungen das Backend vollumfänglich bedienen und damit ihre Arbeit erledigen können. Damit das gelingen kann, muss das TYPO3-Backend für sie zugänglich und nutzbar sein.

Die Zugänglichkeit des TYPO3 Backends hat sich im Laufe der Jahre und mit den neuesten Versionen stetig verbessert. Mit zwei individuellen Fallstudien wurde Ende 2021 belegt, dass TYPO3 v11 grundsätzlich geeignet ist, von Redakteuren mit Sehbehinderung im Backend bedient zu werden. Selbstverständlich sind viele weitere Anforderungen zur Barrierefreiheit des Backends Bestandteils des fortlaufenden Optimierungsprozesses von TYPO3.

Das Accessibility Team hilft dabei, die Barrierefreiheit in TYPO3 zu verbessern und zu erhalten. Dazu führt die Initiative Sprints mit dem Schwerpunkt TYPO3-Accessibility durch. So wurden bereits wichtige Accessibility-Themen in TYPO3 realisiert, wie z. B. die Keyboard-Navigation durch den Seitenbaum im Backend.

10 Tipps für die Erstellung einer barrierefreien Website

Verwenden Sie eine gut lesbare Schrift mit ausreichend Zeilenabstand und achten Sie darauf, dass die Inhalte der Website gezoomt werden können, ohne dass Teile des Texts verdeckt oder unleserlich werden.
Gestalten Sie das Webdesign mit ausreichend Kontrast zwischen Vorder- und Hintergrundfarben und überprüfen Sie dies mit einem Kontrast-Checker.
Achten Sie auf eine saubere, konsistente Struktur und einfache Navigation, die auch über die Tastatur bedient werden kann.
Achten Sie auf saubere Inhaltsstrukturen mit korrekter semantischer Verschachtelung sowie eine sinnvolle Anzeige- und Vorlesereihenfolge.
Bei einer barrierefreien Website sind alle Elemente der Website per Tabulator-Taste erreichbar und benutzbar. Das betrifft auch die Steuerung von Bildergalerien.
Pflegen Sie für Bilder aussagekräftige Alternativtexte.
Formularfelder sollen zugehörige Labels mit passenden Beschriftungen erhalten.
Verwenden Sie ARIA-Labels und Land Mark Roles, um Benutzern von Screen Readern zusätzliche Informationen zur Orientierung zu geben.
Versehen Sie Videos mit Untertiteln und Audio-Dateien mit einem Transkript in Textform.
Decken Sie Aspekte der Barrierefreiheit beim Test im Rahmen der Qualitätssicherung ab.

Tools & Checklisten zur Barrierefreiheit

Zum Erstellen und Testen von barrierefreien Websites gibt es viele hilfreiche Tools.

Google Chrome LightHouse ist in die Chrome Developer Tools integriert und eignet sich für einen ersten Accessibility-Audit.
Systeme wie Siteimprove untersuchen Ihre Website auf Aspekte der Barrierefreiheit und machen Verbesserungsvorschläge.
Der BITV-Test beinhaltet 60 Prüfschritte. Zu jedem gibt es ausführliche Erläuterungen, die genau besagen, was geprüft wird, warum das wichtig ist und wie in der Prüfung vorzugehen ist.
Die WAVE-Toolbar wurde von WebAIM.org entwickelt. Mittels dieser Überprüfung lassen sich wichtige Schlüsse über Ihre Website bezüglich der Zugänglichkeit ziehen.
Das A11Y-Projekt hat es sich zur Aufgabe gemacht, eine Checkliste zur Barrierefreiheit von Websites herauszugeben. Diese behandelt Themen wie Content, Code, Kontrast, Keyboard-Steuerung, Bilder, Formulare, Tabellen u.v.m.
Mit Apple VoiceOver kann man auf Macs, iPhones und iPads testen, wie Screenreader die Website vorlesen.
Das W3C listet darüber hinaus auf seiner Website weit über 100 Tools zur Bewertung von Accessibility-Aspekten auf Websites.

Regelungen zur Barrierefreiheit von Websites

Auf internationalem Level gibt es die Web Accessibility Initiative des W3C (WAI). Deren Web Content Accessibility Guidelines (WCAG 2.1) gelten als internationaler Standard.

WAI-ARIA, die Accessible Rich Internet Applications Suite unterstützt dabei, Webinhalte und Webanwendungen für Menschen mit Behinderungen zugänglicher zu machen.

Auf europäischem Level existiert der European standard EN 301 549, der Anforderungen an die Barrierefreiheit für öffentliche Stellen definiert.

Der European Accessibility Act (EAA) ist in der EU-Richtlinie 2019/882 festgelegt und soll bis zum 28. Juni 2022 in nationales Recht umgesetzt werden. Ziel ist es, die Anforderungen der Barrierefreiheit an digitale Produkte und Dienstleistungen europaweit zu vereinheitlichen.

In Deutschland schreibt § 2a des Bundes-Behindertengleichstellungsgesetzes (BGG) vor, dass öffentliche Stellen ihre informationstechnischen Angebote barrierefrei gestalten müssen. Die technischen Details werden in Deutschland durch die Barrierefreie-Informationstechnik-Verordnung des Bundes (BITV 2.0) geregelt.

Das W3C veröffentlich auch die Authoring Tool Accessibility Guidelines (ATAG) als technische Referenz, um eine intuitive und barrierefreie redaktionelle Bearbeitung für alle Menschen zu ermöglichen. Sie beschreiben, wie die Autorenwerkzeuge programmiert und konfiguriert werden können, um sie barrierefrei zu gestalten.