Stellen Sie sich vor, Sie sind auf eine wichtige Information einer Behörde angewiesen – doch die Website ist unübersichtlich, die Texte sind klein, und Ihr Screenreader liest die Inhalte nicht richtig vor. Für Menschen mit Seh- oder Hörbehinderungen ist dies kein seltener Ausnahmefall, sondern oft der frustrierende Alltag. Barrierefreiheit im digitalen Raum ist daher weit mehr als eine technische Anforderung – sie ist ein essenzieller Beitrag zur gesellschaftlichen Teilhabe. In diesem Artikel beleuchten wir, wie TYPO3 als Content-Management-System (CMS) dabei hilft, barrierefreie Websites zu gestalten, die für alle Nutzer zugänglich sind. Anhand eines konkreten Beispiels, zahlreicher technischer Details und praxisnaher Ansätze zeigen wir, wie Barrierefreiheit mit TYPO3 umgesetzt werden kann und warum sie einen echten Unterschied im Leben von Menschen macht.
Während eines Relaunch-Projekts für eine kommunale Website berichtete eine Bürgerin von ihren Erfahrungen mit der alten Version der Seite. Sie ist sehbehindert und nutzt einen Screenreader, um digitale Inhalte zu erfassen. Doch die alte Website war für sie kaum nutzbar: Die Navigation war unübersichtlich, wichtige Informationen waren schwer zu finden, und der Screenreader konnte viele Inhalte nicht korrekt interpretieren. Die Folge war, dass sie auf fremde Hilfe angewiesen war, um grundlegende Informationen wie Öffnungszeiten oder Formulare abzurufen. Dieses Beispiel verdeutlicht, wie wichtig barrierefreie Websites sind – nicht nur für die Erfüllung gesetzlicher Vorgaben, sondern für die tatsächliche Lebensqualität der Nutzer.
Die Behörde entschied sich daraufhin für einen barrierefreien Relaunch der Website mit TYPO3. Ziel war es, die Seite so zu gestalten, dass sie für alle Nutzer – unabhängig von körperlichen oder kognitiven Einschränkungen – zugänglich ist. Die Umsetzung umfasste zahlreiche Maßnahmen:
Das Ergebnis des Relaunchs war beeindruckend: Die Bürgerin berichtete später, wie erleichternd es für sie war, die Informationen nun eigenständig abrufen zu können, ohne auf Hilfe angewiesen zu sein. Für die Behörde brachte der Relaunch nicht nur eine höhere Servicequalität, sondern auch weniger Rückfragen und eine gesteigerte Zufriedenheit der Bürger. Vor allem aber sendete die Behörde ein starkes Signal in Sachen Inklusion: Barrierefreiheit ist ein Zeichen von Respekt gegenüber allen Nutzern.
Barrierefreiheit geht weit über die Erfüllung technischer Standards oder gesetzlicher Vorgaben hinaus. In vielen Ländern, wie etwa Deutschland, ist Barrierefreiheit für öffentliche Websites durch Gesetze wie die Barrierefreie-Informationstechnik-Verordnung (BITV) oder die EU-Richtlinie 2016/2102 vorgeschrieben. Doch der wahre Wert liegt in der Wirkung auf die Nutzer. Jeder Klick weniger, jede klar strukturierte Seite, jede verständliche Information macht das Leben von Menschen mit Behinderungen einfacher. Barrierefreiheit bedeutet, niemandem den Zugang zu Informationen zu verwehren – sei es durch physische, kognitive oder technische Barrieren.
TYPO3 bietet hierfür eine ideale Grundlage. Das CMS ist flexibel, skalierbar und unterstützt die Umsetzung barrierefreier Websites durch zahlreiche Funktionen und Erweiterungen. Im Folgenden gehen wir detailliert auf die technischen Möglichkeiten von TYPO3 ein und zeigen, wie sie genutzt werden können, um die Anforderungen der Web Content Accessibility Guidelines (WCAG) zu erfüllen.
Eine barrierefreie Website beginnt mit einer sauberen, semantischen Struktur des Codes. TYPO3 unterstützt die Verwendung von HTML5-Elementen wie <header>, <nav>, <main> oder <footer>, die Screenreadern helfen, die Struktur der Seite zu verstehen. Durch die Verwendung von ARIA-Landmarks (z. B. role="navigation" oder role="main") wird die Navigation für assistive Technologien weiter verbessert. In TYPO3 kann dies über die Template-Engine (z. B. Fluid) oder TypoScript umgesetzt werden. Ein Beispiel für ein barrierefreies Navigationstemplate in Fluid könnte wie folgt aussehen:
<nav role="navigation" aria-label="Hauptnavigation">
<ul>
<f:for each="{menu}" as="item">
<li>
<a href="{item.link}" aria-current="{f:if(condition: '{item.active}', then: 'page')}">{item.title}</a>
</li>
</f:for>
</ul>
</nav>
Dieses Template stellt sicher, dass die Navigation klar strukturiert ist und Screenreader die aktive Seite erkennen können.
Bilder und andere nicht-textuelle Inhalte benötigen Alternativtexte, um für sehbehinderte Nutzer zugänglich zu sein. In TYPO3 können Redakteure Alternativtexte direkt im Backend für jedes Bild hinterlegen. Dies geschieht über das Feld „Alternative Text“ in der Medienverwaltung. Für komplexe Grafiken, wie Infografiken, kann ein längerer Beschreibungstext über das Feld „Beschreibung“ hinzugefügt werden, der über einen Link zugänglich gemacht wird.
Videos sollten mit Untertiteln und, falls möglich, einer Audiodeskription versehen werden. TYPO3 unterstützt die Integration von Untertiteln durch Erweiterungen wie „EXT:video“ oder durch die Einbindung von Plattformen wie YouTube, die Untertitelformate wie WebVTT unterstützen.
Eine barrierefreie Website muss vollständig per Tastatur bedienbar sein. TYPO3 ermöglicht dies durch die Verwendung von standardkonformen HTML-Elementen und JavaScript, das den Fokus korrekt verwaltet. Entwickler können sicherstellen, dass alle interaktiven Elemente (z. B. Links, Buttons, Formulare) über die Tab-Taste erreichbar sind und dass der Fokus sichtbar bleibt (z. B. durch einen deutlichen Fokusrahmen). Ein Beispiel für eine barrierefreie Schaltfläche in TYPO3 könnte so aussehen:
<button type="button" class="btn" aria-label="Suche starten">Suchen</button>
Die WCAG fordert einen Mindestkontrast von 4,5:1 für normalen Text und 3:1 für großen Text. TYPO3-Entwickler können dies durch die Definition von kontrastreichen Farben in den CSS-Dateien sicherstellen. Tools wie der „WebAIM Contrast Checker“ helfen dabei, die Konformität zu überprüfen. In TYPO3 kann dies über ein benutzerdefiniertes SCSS/LESS-Stylesheet umgesetzt werden, das im Backend eingebunden wird:
:root {
--primary-color: #005566;
--background-color: #ffffff;
}
body {
color: var(--primary-color);
background-color: var(--background-color);
}
Formulare sind oft eine Hürde für Menschen mit Behinderungen. TYPO3 bietet mit Erweiterungen wie „EXT:form“ die Möglichkeit, barrierefreie Formulare zu erstellen. Wichtige Maßnahmen sind:
<label>-Elementen.aria-describedby).Ein Beispiel für ein barrierefreies Formularfeld in TYPO3:
<div class="form-group">
<label for="name">Ihr Name</label>
<input type="text" id="name" name="name" required aria-required="true">
<span id="name-error" class="error" aria-live="polite"></span>
</div>
TYPO3 bietet zahlreiche Erweiterungen, die die Umsetzung von Barrierefreiheit erleichtern. Beispiele sind:
TYPO3 ist besonders geeignet für barrierefreie Websites, da es Entwicklern und Redakteuren maximale Flexibilität bietet. Zu den Vorteilen gehören:
Barrierefreiheit ist keine optionale Zusatzfunktion, sondern ein grundlegendes Prinzip, das sicherstellt, dass digitale Inhalte für alle Menschen zugänglich sind. TYPO3 bietet die Werkzeuge, um Websites so zu gestalten, dass niemand ausgeschlossen wird – sei es durch klare Strukturen, sauberen Code oder benutzerfreundliche Redaktionsoberflächen. Der Relaunch der kommunalen Website zeigt, wie Barrierefreiheit den Alltag von Menschen verändern kann: Eine Bürgerin, die zuvor auf Hilfe angewiesen war, konnte plötzlich selbstständig Informationen abrufen. Dies ist nicht nur ein technischer Erfolg, sondern ein starkes Signal für Inklusion und Respekt.
