Barrierefreie Inhalte im CMS: Anleitung für Redakteure
Barrierefreie Inhalte sind ein zentrales Thema für Redakteurinnen und Redakteure – also für alle, die Inhalte auf einer Website erstellen und pflegen. Ob in Shopware, TYPO3, WordPress oder anderen CMS-Systemen: Wer Inhalte strukturiert, bebildert oder mit Links versieht, trägt entscheidend dazu bei, dass Informationen für alle Menschen zugänglich sind – unabhängig von Einschränkungen oder unterstützender Technik.
Mit dem Inkrafttreten des Barrierefreiheitsstärkungsgesetzes (BFSG) im Juni 2025 sind viele privatwirtschaftliche Websites gesetzlich verpflichtet, digitale Barrierefreiheit umzusetzen. Wer sich jetzt mit den Grundlagen vertraut macht, ist klar im Vorteil.
In diesem Beitrag zeigen wir dir, worauf du bei der Inhaltspflege achten solltest – klar gegliedert, mit Beispielen und kurzen Begründungen. Und zum Schluss geben wir dir praktische Werkzeuge an die Hand, mit denen du deine Inhalte testen kannst.
1. Struktur & Lesbarkeit
Eine gut strukturierte Seite hilft nicht nur Menschen mit Einschränkungen – sie verbessert die Nutzererfahrung (UX) für alle und wirkt sich positiv auf die Sichtbarkeit in Suchmaschinen (SEO) aus.
Überschriften sinnvoll gliedern
Nutze eine klare Hierarchie (H1, H2, H3 …) und überspringe keine Ebenen.
➡️ Warum: Screenreader-Nutzende orientieren sich an Überschriften – sie können von einer Überschrift zur nächsten springen, was eine klare Strukturierung voraussetzt.
Beispiel: H1 = Seitentitel, H2 = Abschnitte, H3 = Unterpunkte
Absätze statt Leerzeilen verwenden
Verzichte auf doppelte Umbrüche für Abstände. Nutze echte Absatz- oder Abstands-Funktionen.
➡️ Warum: Leere Zeilen führen bei Screenreadern zu unnötigem Leerlauf.
Listen korrekt formatieren
Setze Aufzählungen mit der Listenfunktion – nicht mit Bindestrichen oder Symbolen.
➡️ Warum: Nur echte Listen werden korrekt vorgelesen.
Zitate auszeichnen
Nutze <blockquote> oder die Zitat-Funktion im CMS.
➡️ Warum: So erkennt der Screenreader, dass es sich um ein Zitat handelt.
Tabellen nur für Daten verwenden – nicht fürs Layout
Nutze Tabellen ausschließlich für strukturierte Daten, nicht zur Gestaltung. Verwende <th> für Tabellenköpfe.
➡️ Warum: Screenreader erkennen so Zusammenhänge zwischen Zeilen und Spalten. Auch für sehende Nutzende ist die Orientierung in klaren Datentabellen einfacher.
Sprechende Seitentitel verwenden
Wähle aussagekräftige Titel wie „Barrierefreie Inhalte – Grundlagen“.
➡️ Warum: Titel werden in Tabs, Suchergebnissen und von Screenreadern vorgelesen.
2. Links
Verlinkungen dienen ebenfalls als Orientierung bei der Navigation mittels Tastatur. Mit der Tabulator-Taste kann die nutzende Person von einem Link zum nächsten springen. Daher sind folgende Punkte zu beachten.
Linktexte klar und eindeutig formulieren
Vermeide „Hier klicken“. Nutze beschreibende Texte wie „Mehr zur Barrierefreiheit“.
➡️ Warum: Screenreader-Nutzende hören oft nur den Linktext.
Keine doppelten Linktexte mit unterschiedlichem Ziel
Unterscheide Links, die zu verschiedenen Seiten führen.
➡️ Warum: Gleichlautende Links führen zu Verwirrung.
3. Bilder & Medien
Bei Medien geht es darum, dass den Nutzenden alternative Zugangsmöglichkeiten angeboten werden, sodass die Inhalte von allen erfasst werden können.
Bilder
Das wichtigste Werkzeug hier ist der alternative Text. Dieser kann auch dazu führen, dass dein Bild in der Bildersuche z.B. bei Google auftaucht. Mehr dazu auch in unserem Blog-Beitrag: alt=““, so sieht Google Ihre Bilder
Alt-Texte vergeben
Beschreibe knapp und treffend, was zu sehen ist.
➡️ Warum: Blinde Menschen hören nur den Alt-Text.
Beispiel: alt="Clip-Art einer Rollstuhlfahrerin mit Smartphone und Kopfhörern"
Keine unkommentierten Textbilder
Infografiken oder Bilder mit Text müssen auch im Fließtext erklärt werden.
➡️ Warum: Ohne Erklärung sind wichtige Informationen unsichtbar.
Dekorative Bilder mit alt="" auszeichnen
Wenn ein Bild nur zur Zierde da ist, setze ein leeres Alt-Attribut.
➡️ Warum: Screenreader ignorieren es dann – das spart Zeit und Verwirrung. Hier ein Beispielbild, welches keinen alternativen Text benötigt. Auf dem Bild ist eine Blume und ein Blatt gezeichnet.
Verlinkte Bilder richtig beschriften
Sag im Alt-Text, wohin der Link führt, nicht was zu sehen ist.
➡️ Warum: Screenreader-Nutzende brauchen Orientierung.
Beispiel: alt="Zur Startseite"
Vermeide Text im Bild – oder mache ihn barrierefrei
Wenn dein Bild Text enthält (z. B. in Grafiken oder Werbebannern), achte auf hohen Kontrast (siehe Werkzeuge) und gib den vollständigen Text im Alt-Text oder Fließtext wieder.
➡️ Warum: Nur so ist der Inhalt für alle verständlich – auch bei Bildschirmvergrößerung, Farbenblindheit oder mit Screenreader.
Videos
Als Einstieg zu diesem Thema mal ein Video vom Deutsche Blinden- und Sehbehindertenverband – dbsv.org.
Dieses Video wird über eine externe Plattform (YouTube) gehostet. Das Laden bedarf der Zustimmung unserer Datenschutzbestimmungen.
Barrierefreie Videoplattformen nutzen
Nutze YouTube oder HTML5-Player mit Funktionen für Untertitel & Audiodeskription.
➡️ Warum: So sind Inhalte auch für Gehörlose und Blinde nutzbar.
Anpassbare Untertitel verwenden
Nutze .vtt-Dateien – keine festen Einblendungen im Bild.
➡️ Warum: Nutzende können Schriftgröße, Farbe und Hintergrund anpassen.
Audiodeskription bereitstellen
Beschreibe wichtige visuelle Inhalte in einer zweiten Tonspur oder Version.
➡️ Warum: Blinde Nutzende erfahren, was auf dem Bildschirm passiert.
Audio-Dateien
Transkript bereitstellen
Schreibe den gesprochenen Text aus und strukturiere ihn klar.
➡️ Warum: Gehörlose Menschen können den Inhalt vollständig erfassen.
Beispiel mit Sprecherangaben und Zeitmarken:
[00:00] Sprecher 1: Willkommen beim Podcast über barrierefreie Inhalte. [00:05] Sprecherin 2: Heute erklären wir dir die wichtigsten Punkte...
4. Dokumente & Downloads
Was für Webseiten gilt, gilt auch für Dokumente die zum Download angeboten werden. Viele der folgenden Punkte haben wir bereits oben schon genannt.
PDFs barrierefrei gestalten
Wenn du PDFs veröffentlichst, achte auf die folgenden Punkte:
Überschriften-Tags verwenden
➡️ Warum: Nur so ist die Dokumentstruktur auch für Screenreader nachvollziehbar.Lesereihenfolge festlegen
➡️ Warum: Inhalte werden sonst in willkürlicher Reihenfolge vorgelesen.Alt-Texte für Bilder ergänzen
➡️ Warum: Bilder ohne Beschreibung sind für blinde Nutzende unverständlich.Tabellen korrekt auszeichnen
➡️ Warum: Nur als Datenstruktur erkannte Tabellen werden sinnvoll vorgelesen.Dokumenteigenschaften pflegen (Titel, Sprache)
➡️ Warum: Screenreader nutzen diese Infos zur besseren Darstellung und Aussprache.Lesezeichen hinzufügen
➡️ Warum: Bei längeren PDFs ermöglichen sie eine einfache Navigation.
Tipp: In Microsoft Word kannst du beim Export „Dokumentstruktur-Tags für Barrierefreiheit“ aktivieren. Adobe Acrobat Pro bietet zusätzlich einen Barrierefreiheits-Check.
Weitere barrierefreie Dokumentformate
Auch Word-, Excel- oder PowerPoint-Dateien sollten barrierefrei sein – vor allem, wenn du sie als Download anbietest.
Nutze Formatvorlagen (für Überschriften, Listen, Tabellen)
Ergänze Alt-Texte für Bilder
Vermeide Textboxen und eingebettete Grafiken
Verwende Tabellen nur für Daten
Prüfe Kontraste und Schriftgrößen
Tipp: Microsoft 365 bietet einen eingebauten Barrierefreiheits-Check („Überprüfen“ > „Barrierefreiheit prüfen“).
Das folgende Video der Stabsstelle Chancengleichheit der Uni Leipzig erklärt das Thema sehr verständlich.
Dieses Video wird über eine externe Plattform (YouTube) gehostet. Das Laden bedarf der Zustimmung unserer Datenschutzbestimmungen.
Dateibenennung & Verlinkung
Verwende sprechende Dateinamen, z. B.
barrierefrei-gestalten-checkliste.pdf
➡️ Warum: Nutzende wissen sofort, worum es geht. Auch für die Indexierung der Dateien bei Suchmaschinen ist das hilfreich.Gib beim Link immer Format und Größe an, z. B.: Checkliste Barrierefreie Inhalte (PDF, 450 KB)]
➡️ Warum: So können Nutzende besser entscheiden, ob sie den Download starten möchten – besonders bei langsamen Verbindungen oder mobilen Geräten.
5. Prüfung & Tests
Es gibt eine ganze Reihe von Möglichkeiten, Webseiten auf Barrierefreiheit zu testen.
Allgemeine Prüfung
Wichtig vorab: Eine vollständig automatisierte Prüfung ist nicht möglich. Die Semantik und der Kontext ist den Tools nicht zugänglich. Hierzu brauch es noch den Menschen. Allerdings können die folgenden Tools als Hilfestellung dienen. Sie stehen entweder als Webseite zur Verfügung oder als Browser-Erweiterung.
- WAVE Web Accessibility Evaluation Tools
- kostenlose Barrierefreiheitsprüfung mit Silktide
- Google Page Speed
- Accessibility Checker
Noch mehr Tools unter w3.org.
Spezifische Hilfsmittel
Für gewisse Teilbereiche der Barrierefreiheit gibt es spezifische Hilfswerkzeuge.
Überschriftenhierarchie
- Chrome Plugin: HeadingsMap – Chrome Web Store
- Firefox Extension: HeadingsMap – Firefox Addon
- TYPO3 Erweiterung: cs_seo – TYPO3 TER
Alt-Texte
- Chrome Plugin: Image Alt Text Viewer – Chrome Web Store
- Firefox Extension: Alt Text Display – Firefox Addon
- TYPO3 Erweiterung: cs_seo – TYPO3 TER
Kontraste
Bei Kontrasten ist das Kontrastverhältnis ausschlaggebend. Dieses errechnet sich aus dem Verhältnis zweier Farben zueinander. Dabei gilt für das BSFG der WCAG Standard 2.1 Level AA als Minimum. Folgende Tools ermitteln das Kontrastverhältnis:
- Webseite: Contrast Checker von WebAIM
- Chrome Plugin: WCAG Color contrast checker – Chrome Web Store
- Firefox Extension: WCAG Contrast checker – Firefox Addon
Tastaturnavigation und Screenreader selbst testen
Versetze dich einfach mal selbst in die Lage eine Webseite mit der Tastatur oder mit dem Screenreader zu bedienen. Es gibt keinen besseren Test deiner Webseite. Mehr dazu findest du im Blog-Beitrag Screenreader: So nutzen blinde Personen deine Webseite
Fazit: Ab jetzt barrierefrei
Als Person welche Inhalte im Netz generiert, kannst du Barrieren abbauen – ganz ohne Programmierkenntnisse. Fang am besten heute an. Mache somit deine Webseite allen zugänglich und verbessere damit auch die Nutzererfahrung und steigere sogar die Suchmaschinenoptimierung. Kleine Änderungen in der Redaktion haben große Wirkung für alle!
Eine Webseite sollte laut BSFG eine Barrierefreiheitserklärung haben. Was es hier zu beachten gilt erklären wir dir in unserem Blog-Beitrag: Barrierefreiheitserklärung: Was muss rein und warum?
Fehlt deiner Meinung nach etwas? Oder kennst du weitere nützliche Werkzeuge? Dann schreibe uns gerne einen Kommentar.
