CMS bar­rie­re­frei: Grund­la­gen und Beispiele (Contao, Plone und papaya)

Spä­tes­tens seit In­kraft­tre­ten des Bar­rie­re­frei­heits­stär­kungs­ge­set­zes ist es un­er­läss­lich, dass Sie mit einem CMS bar­rie­re­freie Webseiten erstellen können. Ist ein Content-Ma­nage­ment-System mit ent­spre­chen­den Features aus­ge­stat­tet, können Sie recht­li­che Vorgaben erfüllen, die User Ex­pe­ri­ence ver­bes­sern und Ihren Content optimal für Such­ma­schi­nen auf­be­rei­ten.

Warum sollte ein CMS bar­rie­re­freie Inhalte er­mög­li­chen?

Digitale Bar­rie­re­frei­heit betrifft nicht nur die tech­ni­sche In­fra­struk­tur einer Website, sondern ins­be­son­de­re auch die ver­öf­fent­lich­ten Inhalte. Damit digitale In­for­ma­tio­nen für alle Be­su­che­rin­nen und Besucher zu­gäng­lich sind, müssen Inhalte so erstellt werden, dass sie auch mit Screen­rea­dern, Braille­zei­len oder per Tas­ta­tur­na­vi­ga­ti­on zu­gäng­lich sind.

Das ein­ge­setz­te Content-Ma­nage­ment-System (CMS) spielt hierbei eine zentrale Rolle. Zwar wird häufig die Bar­rie­re­frei­heit der CMS-Be­nut­zer­ober­flä­che the­ma­ti­siert, doch min­des­tens ebenso wichtig ist die Frage, wie gut ein CMS die re­dak­tio­nel­le Er­stel­lung bar­rie­re­frei­er Inhalte un­ter­stützt. Ein CMS ist in diesem Sinne dann „bar­rie­re­frei“, wenn es Re­dak­teu­rin­nen und Re­dak­teu­ren Hil­fe­stel­lun­gen, Struk­tur­vor­ga­ben und Va­li­die­rungs­tools an die Hand gibt, die eine mühelose Ge­stal­tung bar­rie­re­frei­er Websites er­mög­li­chen. Typische Beispiele dafür sind:

• Ein­ga­be­fel­der für Alt-Texte bei Bildern
• Warnungen bei fehlender Über­schrif­ten­struk­tur
• Werkzeuge für die Er­stel­lung bar­rie­re­frei­er Tabellen und Formulare
• Au­to­ma­ti­sche Prüfungen auf Kontraste oder se­man­ti­sche Fehler

Ein CMS, das Bar­rie­re­frei­heit un­ter­stützt, ver­rin­gert das Risiko re­dak­tio­nel­ler Fehler und un­ter­stützt Or­ga­ni­sa­tio­nen dabei, ge­setz­li­che Vorgaben zu erfüllen und allen Nut­zer­grup­pen gleich­wer­ti­ge In­for­ma­tio­nen be­reit­zu­stel­len.

Welche Vorgaben de­fi­nie­ren Bar­rie­re­frei­heit im Web?

Die An­for­de­run­gen an bar­rie­re­freie Inhalte ergeben sich aus ver­schie­de­nen recht­li­chen und nor­ma­ti­ven Grund­la­gen. In Deutsch­land gelten für öf­fent­li­che Stellen die Bar­rie­re­freie-In­for­ma­ti­ons­tech­nik-Ver­ord­nung (BITV 2.0) sowie das Bar­rie­re­frei­heits­stär­kungs­ge­setz (BFSG).

Zugrunde liegen diesen Vor­schrif­ten die in­ter­na­tio­na­len Web Content Ac­ces­si­bi­li­ty Gui­de­lines (WCAG), die vom World Wide Web Con­sor­ti­um (W3C) ent­wi­ckelt wurden. Aus den Versionen WCAG 2.1 bzw. 2.2 ergeben sich folgende vier zentralen Prin­zi­pi­en für Bar­rie­re­frei­heit in CMS und Co.:

• Wahr­nehm­bar­keit: Alle In­for­ma­tio­nen müssen so prä­sen­tiert werden, dass sie für jeden Nutzer und jede Nutzerin erfassbar sind (z. B. durch Text­al­ter­na­ti­ven für Bilder und aus­rei­chen­de Kontraste).
• Be­dien­bar­keit: Die Be­nut­zer­ober­flä­che muss mit ver­schie­de­nen Ein­ga­be­me­tho­den (z. B. Tastatur) na­vi­gier­bar sein.
• Ver­ständ­lich­keit: Inhalte müssen klar struk­tu­riert, lesbar und in einfacher Sprache verfasst sein.
• Ro­bust­heit: Alle Inhalte müssen mit einer Vielzahl von End­ge­rä­ten und Hilfs­mit­teln kom­pa­ti­bel sein.

Für Re­dak­teu­rin­nen und Re­dak­teu­re bedeutet das unter anderem, dass sie eine sinnvolle Über­schrif­ten­hier­ar­chie verwenden (H1 bis H6) und aus­sa­ge­kräf­ti­ge Al­ter­na­tiv­tex­te und Linktexte einbauen müssen. Außerdem ist es wichtig, auf eine klar ver­ständ­li­che Sprache und logische Na­vi­ga­ti­on zu achten. Ein CMS, das bar­rie­re­frei ist und diese An­for­de­run­gen un­ter­stützt, er­leich­tert den re­dak­tio­nel­len Alltag erheblich und trägt zur Ein­hal­tung der ge­setz­li­chen Standards bei.

IONOS KI-As­sis­ten­ten

• Eine KI für alle Belange Ihres Ge­schäfts­all­tags
• Sicher, einfach, Made in Germany
• DSGVO-konform
• Sofort startklar

Kostenlos starten

Bar­rie­re­frei­heit im CMS: Pra­xis­bei­spie­le mit Contao, Plone und papaya CMS

Nicht jedes CMS bietet dieselben Vor­aus­set­zun­gen für bar­rie­re­freie Inhalte. Während einige Systeme ihre Stärken in der Frontend-Ausgabe haben, setzen andere auf re­dak­tio­nel­le Kontrolle oder se­man­ti­sche Strenge. Die drei Open-Source-CMS Contao, Plone und papaya CMS gelten als besonders gut geeignet für bar­rie­re­frei­es Arbeiten. Aus diesem Grund haben wir in den nach­fol­gen­den Ab­schnit­ten die wich­tigs­ten Features der drei Systeme in diesem Kontext für Sie zu­sam­men­ge­fasst.

Contao

Contao ist ein in Deutsch­land ent­wi­ckel­tes CMS, das von Beginn an auf bar­rie­re­frei­en und se­man­tisch sauberen Code ausgelegt wurde. Für die Er­stel­lung ge­set­zes­kon­for­mer bar­rie­re­frei­er Inhalte bietet die Software unter anderem folgende Features:

• Bar­rie­re­freie Templates: Viele Themes sind WCAG- und BITV-konform sowie re­spon­si­ve gestaltet.
• Struk­tu­rier­te In­halts­ele­men­te: Redakteur*innen arbeiten mit Modulen, die für über­sicht­li­che und se­man­tisch korrekte Ausgaben sorgen.
• Alt-Text-Un­ter­stüt­zung: Bilder, Videos und andere Medien können mit Text­al­ter­na­ti­ven versehen werden.
• For­mu­lar­mo­du­le: Ein­satz­fer­ti­ge Module un­ter­stüt­zen Pflicht­feld­kenn­zeich­nun­gen, Tas­ta­tur­na­vi­ga­ti­on und Feh­ler­be­hand­lung.

Zudem gibt es Er­wei­te­run­gen wie Site­Cock­pit, die Funk­tio­nen wie Farb­kon­trast-Um­schal­ter, Schrift­grö­ßen­kon­trol­le oder Prüf­be­rich­te zur Bar­rie­re­frei­heit direkt ins CMS in­te­grie­ren. Contao ist daher besonders für öf­fent­li­che Ein­rich­tun­gen, Bil­dungs­ein­rich­tun­gen oder NGOs geeignet.

Plone

Plone ist ein leis­tungs­star­kes CMS auf Python-Basis, das bereits seit vielen Jahren hohe Bar­rie­re­frei­heits­stan­dards verfolgt. Es wird weltweit von Uni­ver­si­tä­ten, Mi­nis­te­ri­en und Or­ga­ni­sa­tio­nen mit hohen Ac­ces­si­bi­li­ty-An­for­de­run­gen genutzt. Plone erfüllt die WCAG 2.1 auf Kon­for­mi­täts­stu­fe AA – viele Bar­rie­re­frei­heits­aspek­te sind also bereits stan­dard­mä­ßig in­te­griert. Für diese An­for­de­run­gen liegt ein VPAT-Dokument (Voluntary Product Ac­ces­si­bi­li­ty Template) vor.

Zu den re­dak­tio­nel­len Vorzügen in puncto Bar­rie­re­frei­heit des CMS zählen:

• Se­man­tisch klare Struk­tu­ren: Die In­halts­struk­tur ori­en­tiert sich strikt an HTML5-Standards.
• Workflow-Ma­nage­ment: Inhalte können vor Ver­öf­fent­li­chung auf Kon­for­mi­tät geprüft werden.
• Zu­griffs­steue­rung: Er­mög­licht bar­rie­re­frei­es Teamwork mit klaren Rollen.

Über Plugins wie das Plone All in One Ac­ces­si­bi­li­ty Widget lassen sich zudem prak­ti­sche Zu­satz­funk­tio­nen in­te­grie­ren, z. B. Schalter für Schrift­grö­ßen, Kon­tras­t­um­schal­tung oder Tas­ta­tur­na­vi­ga­ti­on. Damit eignet sich Plone auch für bar­rie­re­freie Portale mit komplexen Abläufen.

papaya CMS

papaya CMS ist ein modulares, XML-basiertes CMS aus Deutsch­land, das sich besonders durch die klare Trennung von Inhalt, Layout und Logik aus­zeich­net. Diese Ar­chi­tek­tur erlaubt es, se­man­tisch korrekte und bar­rie­re­freie HTML-Ausgaben granular zu steuern. papaya eignet sich ins­be­son­de­re für komplexe Projekte mit hohen re­dak­tio­nel­len An­for­de­run­gen und klar de­fi­nier­ten Aus­ga­be­ka­nä­len.

• Strikte Struk­tu­rie­rung: Durch die Trennung von Inhalt, Layout und Logik lassen sich se­man­tisch saubere Webseiten erzeugen.
• Bar­rie­re­freie Templates und Module: Zahl­rei­che Layouts und Bausteine sind WCAG-ori­en­tiert aufgebaut.
• Mehr­spra­chi­ge Inhalte: Die klare Da­ten­hal­tung er­leich­tert auch die bar­rie­re­freie Be­reit­stel­lung in mehreren Sprachen.

Bereits 2009 wurde mit papaya CMS ein bar­rie­re­frei­es Web­pro­jekt mit dem Namen „weisse Liste“ erstellt, das später sogar den Biene Award (Silber) erhielt. Al­ler­dings gibt es keine vor­ge­fer­tig­ten BFSG-Plugins (Bar­rie­re­frei­heits­stär­kungs­ge­setz) oder Au­to­ma­ti­sie­run­gen – Bar­rie­re­frei­heit hängt hier stark vom Fach­wis­sen des Ent­wick­ler­teams und der Ge­stal­tung der Templates ab.

Wie prüft man, ob Inhalte im CMS bar­rie­re­frei sind?

Die Er­stel­lung bar­rie­re­frei­er Inhalte endet nicht mit der Eingabe im CMS. Eine kon­ti­nu­ier­li­che Über­prü­fung ist es­sen­zi­ell, um Nut­zungs­bar­rie­ren früh­zei­tig zu erkennen und zu beheben. Um die Bar­rie­re­frei­heit einer Website zu testen, können Sie sowohl auf au­to­ma­ti­sier­te Tools als auch auf manuelle Methoden zu­rück­grei­fen.

Au­to­ma­ti­sier­te Tools

• axe DevTools: Ein bewährtes Browser-Addon von Deque Systems, das Fehler in puncto Bar­rie­re­frei­heit zu­ver­läs­sig nach WCAG-Kriterien erkennt und präzise Hinweise zur Behebung liefert
• WAVE (Web Ac­ces­si­bi­li­ty Eva­lua­ti­on Tool): Vi­sua­li­siert Barrieren direkt im Brow­ser­fens­ter; eignet sich ideal für die re­dak­tio­nel­le Prüfung von Inhalten wie Al­ter­na­tiv­tex­ten und Über­schrif­ten
• Google Light­house: Liefert Ac­ces­si­bi­li­ty-Scores und konkrete Emp­feh­lun­gen zu Struktur, Farben, Be­dien­bar­keit und mehr; als Teil von Google PageSpeed Insights, in den Chrome-DevTools, über die Be­fehls­zei­le oder als Node-Modul aus­führ­bar
• Evinced: Nutzt KI und ma­schi­nel­les Lernen zur Erkennung komplexer Barrieren; bietet de­tail­lier­te Ent­wick­ler­be­rich­te sowie In­te­gra­tio­nen für DevOps-Um­ge­bun­gen

Manuelle Tests

Au­to­ma­ti­sier­te Tools erkennen nicht alle be­stehen­den Bar­rie­re­frei­heits­pro­ble­me. Manuelle Verfahren wie die folgenden sind daher un­er­läss­lich:

• Tas­ta­tur­na­vi­ga­ti­on: Über­prü­fung, ob Na­vi­ga­ti­on und Sei­ten­nut­zung per Tab/Shift möglich sind; Fokus-In­di­ka­to­ren müssen sichtbar und kon­sis­tent sein
• Screen­rea­der-Tests: Nutzung von NVDA (Windows), VoiceOver (macOS/iOS) oder JAWS, um die Wie­der­ga­be mit Screen­rea­dern manuell zu testen; es gilt, se­man­tisch korrekte Wie­der­ga­be, Fo­kus­an­sa­gen und logische Le­se­rei­hen­fol­gen zu prüfen
• Kontrast-Checks & Farb­si­mu­la­tio­nen: Tools wie WebAIM Contrast Checker oder Color Oracle helfen bei der Prüfung von Farb­kon­tras­ten und Seh­be­hin­de­rungs­si­mu­la­tio­nen
• Formular-Checks: Kontrolle auf korrekt ver­knüpf­te Labels, klare Feh­ler­mel­dun­gen, Fo­kus­ver­hal­ten und Zu­gäng­lich­keit der Ein­ga­be­fel­der
• Visuelle In­spek­ti­on und Zoom-Tests: Funk­tio­niert das Layout bei starker Zoom-Stufe? Passen Inhalte, fehlen ho­ri­zon­ta­le Scroll-Leisten?

Zu­sätz­lich empfiehlt sich ein Re­dak­ti­ons­leit­fa­den zur Bar­rie­re­frei­heit sowie re­gel­mä­ßi­ge Schu­lun­gen, um die Kom­pe­ten­zen im Team lang­fris­tig zu stärken.