CMS barrierefrei: Grundlagen und Beispiele (Contao, Plone und papaya)

Spätestens seit Inkrafttreten des Barrierefreiheitsstärkungsgesetzes ist es unerlässlich, dass Sie mit einem CMS barrierefreie Webseiten erstellen können. Ist ein Content-Management-System mit entsprechenden Features ausgestattet, können Sie rechtliche Vorgaben erfüllen, die User Experience verbessern und Ihren Content optimal für Suchmaschinen aufbereiten.

Warum sollte ein CMS barrierefreie Inhalte ermöglichen?

Digitale Barrierefreiheit betrifft nicht nur die technische Infrastruktur einer Website, sondern insbesondere auch die veröffentlichten Inhalte. Damit digitale Informationen für alle Besucherinnen und Besucher zugänglich sind, müssen Inhalte so erstellt werden, dass sie auch mit Screenreadern, Braillezeilen oder per Tastaturnavigation zugänglich sind.

Das eingesetzte Content-Management-System (CMS) spielt hierbei eine zentrale Rolle. Zwar wird häufig die Barrierefreiheit der CMS-Benutzeroberfläche thematisiert, doch mindestens ebenso wichtig ist die Frage, wie gut ein CMS die redaktionelle Erstellung barrierefreier Inhalte unterstützt. Ein CMS ist in diesem Sinne dann „barrierefrei“, wenn es Redakteurinnen und Redakteuren Hilfestellungen, Strukturvorgaben und Validierungstools an die Hand gibt, die eine mühelose Gestaltung barrierefreier Websites ermöglichen. Typische Beispiele dafür sind:

• Eingabefelder für Alt-Texte bei Bildern
• Warnungen bei fehlender Überschriftenstruktur
• Werkzeuge für die Erstellung barrierefreier Tabellen und Formulare
• Automatische Prüfungen auf Kontraste oder semantische Fehler

Ein CMS, das Barrierefreiheit unterstützt, verringert das Risiko redaktioneller Fehler und unterstützt Organisationen dabei, gesetzliche Vorgaben zu erfüllen und allen Nutzergruppen gleichwertige Informationen bereitzustellen.

Welche Vorgaben definieren Barrierefreiheit im Web?

Die Anforderungen an barrierefreie Inhalte ergeben sich aus verschiedenen rechtlichen und normativen Grundlagen. In Deutschland gelten für öffentliche Stellen die Barrierefreie-Informationstechnik-Verordnung (BITV 2.0) sowie das Barrierefreiheitsstärkungsgesetz (BFSG).

Zugrunde liegen diesen Vorschriften die internationalen Web Content Accessibility Guidelines (WCAG), die vom World Wide Web Consortium (W3C) entwickelt wurden. Aus den Versionen WCAG 2.1 bzw. 2.2 ergeben sich folgende vier zentralen Prinzipien für Barrierefreiheit in CMS und Co.:

• Wahrnehmbarkeit: Alle Informationen müssen so präsentiert werden, dass sie für jeden Nutzer und jede Nutzerin erfassbar sind (z. B. durch Textalternativen für Bilder und ausreichende Kontraste).
• Bedienbarkeit: Die Benutzeroberfläche muss mit verschiedenen Eingabemethoden (z. B. Tastatur) navigierbar sein.
• Verständlichkeit: Inhalte müssen klar strukturiert, lesbar und in einfacher Sprache verfasst sein.
• Robustheit: Alle Inhalte müssen mit einer Vielzahl von Endgeräten und Hilfsmitteln kompatibel sein.

Für Redakteurinnen und Redakteure bedeutet das unter anderem, dass sie eine sinnvolle Überschriftenhierarchie verwenden (H1 bis H6) und aussagekräftige Alternativtexte und Linktexte einbauen müssen. Außerdem ist es wichtig, auf eine klar verständliche Sprache und logische Navigation zu achten. Ein CMS, das barrierefrei ist und diese Anforderungen unterstützt, erleichtert den redaktionellen Alltag erheblich und trägt zur Einhaltung der gesetzlichen Standards bei.

Barrierefreiheit im CMS: Praxisbeispiele mit Contao, Plone und papaya CMS

Nicht jedes CMS bietet dieselben Voraussetzungen für barrierefreie Inhalte. Während einige Systeme ihre Stärken in der Frontend-Ausgabe haben, setzen andere auf redaktionelle Kontrolle oder semantische Strenge. Die drei Open-Source-CMS Contao, Plone und papaya CMS gelten als besonders gut geeignet für barrierefreies Arbeiten. Aus diesem Grund haben wir in den nachfolgenden Abschnitten die wichtigsten Features der drei Systeme in diesem Kontext für Sie zusammengefasst.

Contao

Contao ist ein in Deutschland entwickeltes CMS, das von Beginn an auf barrierefreien und semantisch sauberen Code ausgelegt wurde. Für die Erstellung gesetzeskonformer barrierefreier Inhalte bietet die Software unter anderem folgende Features:

• Barrierefreie Templates: Viele Themes sind WCAG- und BITV-konform sowie responsive gestaltet.
• Strukturierte Inhaltselemente: Redakteur*innen arbeiten mit Modulen, die für übersichtliche und semantisch korrekte Ausgaben sorgen.
• Alt-Text-Unterstützung: Bilder, Videos und andere Medien können mit Textalternativen versehen werden.
• Formularmodule: Einsatzfertige Module unterstützen Pflichtfeldkennzeichnungen, Tastaturnavigation und Fehlerbehandlung.

Zudem gibt es Erweiterungen wie SiteCockpit, die Funktionen wie Farbkontrast-Umschalter, Schriftgrößenkontrolle oder Prüfberichte zur Barrierefreiheit direkt ins CMS integrieren. Contao ist daher besonders für öffentliche Einrichtungen, Bildungseinrichtungen oder NGOs geeignet.

Plone

Plone ist ein leistungsstarkes CMS auf Python-Basis, das bereits seit vielen Jahren hohe Barrierefreiheitsstandards verfolgt. Es wird weltweit von Universitäten, Ministerien und Organisationen mit hohen Accessibility-Anforderungen genutzt. Plone erfüllt die WCAG 2.1 auf Konformitätsstufe AA – viele Barrierefreiheitsaspekte sind also bereits standardmäßig integriert. Für diese Anforderungen liegt ein VPAT-Dokument (Voluntary Product Accessibility Template) vor.

Zu den redaktionellen Vorzügen in puncto Barrierefreiheit des CMS zählen:

• Semantisch klare Strukturen: Die Inhaltsstruktur orientiert sich strikt an HTML5-Standards.
• Workflow-Management: Inhalte können vor Veröffentlichung auf Konformität geprüft werden.
• Zugriffssteuerung: Ermöglicht barrierefreies Teamwork mit klaren Rollen.

Über Plugins wie das Plone All in One Accessibility Widget lassen sich zudem praktische Zusatzfunktionen integrieren, z. B. Schalter für Schriftgrößen, Kontrastumschaltung oder Tastaturnavigation. Damit eignet sich Plone auch für barrierefreie Portale mit komplexen Abläufen.

papaya CMS

papaya CMS ist ein modulares, XML-basiertes CMS aus Deutschland, das sich besonders durch die klare Trennung von Inhalt, Layout und Logik auszeichnet. Diese Architektur erlaubt es, semantisch korrekte und barrierefreie HTML-Ausgaben granular zu steuern. papaya eignet sich insbesondere für komplexe Projekte mit hohen redaktionellen Anforderungen und klar definierten Ausgabekanälen.

• Strikte Strukturierung: Durch die Trennung von Inhalt, Layout und Logik lassen sich semantisch saubere Webseiten erzeugen.
• Barrierefreie Templates und Module: Zahlreiche Layouts und Bausteine sind WCAG-orientiert aufgebaut.
• Mehrsprachige Inhalte: Die klare Datenhaltung erleichtert auch die barrierefreie Bereitstellung in mehreren Sprachen.

Bereits 2009 wurde mit papaya CMS ein barrierefreies Webprojekt mit dem Namen „weisse Liste“ erstellt, das später sogar den Biene Award (Silber) erhielt. Allerdings gibt es keine vorgefertigten BFSG-Plugins (Barrierefreiheitsstärkungsgesetz) oder Automatisierungen – Barrierefreiheit hängt hier stark vom Fachwissen des Entwicklerteams und der Gestaltung der Templates ab.

Wie prüft man, ob Inhalte im CMS barrierefrei sind?

Die Erstellung barrierefreier Inhalte endet nicht mit der Eingabe im CMS. Eine kontinuierliche Überprüfung ist essenziell, um Nutzungsbarrieren frühzeitig zu erkennen und zu beheben. Um die Barrierefreiheit einer Website zu testen, können Sie sowohl auf automatisierte Tools als auch auf manuelle Methoden zurückgreifen.

Automatisierte Tools

• axe DevTools: Ein bewährtes Browser-Addon von Deque Systems, das Fehler in puncto Barrierefreiheit zuverlässig nach WCAG-Kriterien erkennt und präzise Hinweise zur Behebung liefert
• WAVE (Web Accessibility Evaluation Tool): Visualisiert Barrieren direkt im Browserfenster; eignet sich ideal für die redaktionelle Prüfung von Inhalten wie Alternativtexten und Überschriften
• Google Lighthouse: Liefert Accessibility-Scores und konkrete Empfehlungen zu Struktur, Farben, Bedienbarkeit und mehr; als Teil von Google PageSpeed Insights, in den Chrome-DevTools, über die Befehlszeile oder als Node-Modul ausführbar
• Evinced: Nutzt KI und maschinelles Lernen zur Erkennung komplexer Barrieren; bietet detaillierte Entwicklerberichte sowie Integrationen für DevOps-Umgebungen

Manuelle Tests

Automatisierte Tools erkennen nicht alle bestehenden Barrierefreiheitsprobleme. Manuelle Verfahren wie die folgenden sind daher unerlässlich:

• Tastaturnavigation: Überprüfung, ob Navigation und Seitennutzung per Tab/Shift möglich sind; Fokus-Indikatoren müssen sichtbar und konsistent sein
• Screenreader-Tests: Nutzung von NVDA (Windows), VoiceOver (macOS/iOS) oder JAWS, um die Wiedergabe mit Screenreadern manuell zu testen; es gilt, semantisch korrekte Wiedergabe, Fokusansagen und logische Lesereihenfolgen zu prüfen
• Kontrast-Checks & Farbsimulationen: Tools wie WebAIM Contrast Checker oder Color Oracle helfen bei der Prüfung von Farbkontrasten und Sehbehinderungssimulationen
• Formular-Checks: Kontrolle auf korrekt verknüpfte Labels, klare Fehlermeldungen, Fokusverhalten und Zugänglichkeit der Eingabefelder
• Visuelle Inspektion und Zoom-Tests: Funktioniert das Layout bei starker Zoom-Stufe? Passen Inhalte, fehlen horizontale Scroll-Leisten?

Zusätzlich empfiehlt sich ein Redaktionsleitfaden zur Barrierefreiheit sowie regelmäßige Schulungen, um die Kompetenzen im Team langfristig zu stärken.