{"id":6355,"date":"2025-07-18T11:39:51","date_gmt":"2025-07-18T09:39:51","guid":{"rendered":"https:\/\/www.clickstorm.de\/blog\/?p=6355"},"modified":"2025-07-18T11:39:51","modified_gmt":"2025-07-18T09:39:51","slug":"barrierefreie-inhalte-cms-redakteure","status":"publish","type":"post","link":"https:\/\/www.clickstorm.de\/blog\/barrierefreie-inhalte-cms-redakteure\/","title":{"rendered":"Barrierefreie Inhalte im CMS: Anleitung f\u00fcr Redakteure"},"content":{"rendered":"

Barrierefreie Inhalte sind ein zentrales Thema f\u00fcr Redakteurinnen und Redakteure \u2013 also f\u00fcr alle, die Inhalte auf einer Website erstellen und pflegen.<\/strong> Ob in Shopware, TYPO3, WordPress oder anderen CMS-Systemen: Wer Inhalte strukturiert, bebildert oder mit Links versieht, tr\u00e4gt entscheidend dazu bei, dass Informationen f\u00fcr alle Menschen zug\u00e4nglich sind \u2013 unabh\u00e4ngig von Einschr\u00e4nkungen oder unterst\u00fctzender Technik.<\/p>\n

Mit dem Inkrafttreten des Barrierefreiheitsst\u00e4rkungsgesetzes (BFSG)<\/a> im Juni 2025 sind viele privatwirtschaftliche Websites gesetzlich verpflichtet, digitale Barrierefreiheit umzusetzen. Wer sich jetzt mit den Grundlagen vertraut macht, ist klar im Vorteil.<\/p>\n

In diesem Beitrag zeigen wir dir, worauf du bei der Inhaltspflege achten solltest \u2013 klar gegliedert, mit Beispielen und kurzen Begr\u00fcndungen. Und zum Schluss geben wir dir praktische Werkzeuge an die Hand, mit denen du deine Inhalte testen kannst.<\/p>\n

1. Struktur & Lesbarkeit<\/span><\/h2>\n

Eine gut strukturierte Seite hilft nicht nur Menschen mit Einschr\u00e4nkungen \u2013 sie verbessert die Nutzererfahrung (UX)<\/strong> f\u00fcr alle und wirkt sich positiv auf die Sichtbarkeit in Suchmaschinen (SEO)<\/strong> aus.<\/p>\n

\u00dcberschriften sinnvoll gliedern<\/h3>\n

Nutze eine klare Hierarchie (H1, H2, H3 \u2026) und \u00fcberspringe keine Ebenen.
\u27a1\ufe0f Warum:<\/em> Screenreader-Nutzende orientieren sich an \u00dcberschriften \u2013 sie k\u00f6nnen von einer \u00dcberschrift zur n\u00e4chsten springen, was eine klare Strukturierung voraussetzt.\u00a0
Beispiel: H1 = Seitentitel, H2 = Abschnitte, H3 = Unterpunkte<\/p>\n

Abs\u00e4tze statt Leerzeilen verwenden<\/h3>\n

Verzichte auf doppelte Umbr\u00fcche f\u00fcr Abst\u00e4nde. Nutze echte Absatz- oder Abstands-Funktionen.
\u27a1\ufe0f Warum:<\/em> Leere Zeilen f\u00fchren bei Screenreadern zu unn\u00f6tigem Leerlauf.<\/p>\n

Listen korrekt formatieren<\/h3>\n

Setze Aufz\u00e4hlungen mit der Listenfunktion \u2013 nicht mit Bindestrichen oder Symbolen.
\u27a1\ufe0f Warum:<\/em> Nur echte Listen werden korrekt vorgelesen.<\/p>\n

Zitate auszeichnen<\/h3>\n

Nutze <blockquote><\/code> oder die Zitat-Funktion im CMS.
\u27a1\ufe0f Warum:<\/em> So erkennt der Screenreader, dass es sich um ein Zitat handelt.<\/p>\n

Tabellen nur f\u00fcr Daten verwenden \u2013 nicht f\u00fcrs Layout<\/h3>\n

Nutze Tabellen ausschlie\u00dflich f\u00fcr strukturierte Daten, nicht zur Gestaltung. Verwende <th><\/code> f\u00fcr Tabellenk\u00f6pfe.
\u27a1\ufe0f Warum:<\/em> Screenreader erkennen so Zusammenh\u00e4nge zwischen Zeilen und Spalten. Auch f\u00fcr sehende Nutzende ist die Orientierung in klaren Datentabellen einfacher.<\/p>\n

Sprechende Seitentitel verwenden<\/strong><\/h3>\n

W\u00e4hle aussagekr\u00e4ftige Titel wie \u201eBarrierefreie Inhalte \u2013 Grundlagen\u201c.
\u27a1\ufe0f Warum:<\/em> Titel werden in Tabs, Suchergebnissen und von Screenreadern vorgelesen.<\/p>\n

2. Links<\/h2>\n

Verlinkungen dienen ebenfalls als Orientierung bei der Navigation mittels Tastatur. Mit der Tabulator-Taste kann die nutzende Person von einem Link zum n\u00e4chsten springen. Daher sind folgende Punkte zu beachten.<\/p>\n

Linktexte klar und eindeutig formulieren<\/h3>\n

Vermeide \u201eHier klicken\u201c. Nutze beschreibende Texte wie \u201eMehr zur Barrierefreiheit\u201c.
\u27a1\ufe0f Warum:<\/em> Screenreader-Nutzende h\u00f6ren oft nur den Linktext.<\/p>\n

Keine doppelten Linktexte mit unterschiedlichem Ziel<\/h3>\n

Unterscheide Links, die zu verschiedenen Seiten f\u00fchren.
\u27a1\ufe0f Warum:<\/em> Gleichlautende Links f\u00fchren zu Verwirrung.<\/p>\n

3. Bilder & Medien<\/h2>\n

Bei Medien geht es darum, dass den Nutzenden alternative Zugangsm\u00f6glichkeiten angeboten werden, sodass die Inhalte von allen erfasst werden k\u00f6nnen.<\/p>\n

Bilder<\/h3>\n

Das wichtigste Werkzeug hier ist der alternative Text. Dieser kann auch dazu f\u00fchren, dass dein Bild in der Bildersuche z.B. bei Google auftaucht. Mehr dazu auch in unserem Blog-Beitrag: alt=““, so sieht Google Ihre Bilder<\/a><\/p>\n

Alt-Texte vergeben<\/h4>\n

Beschreibe knapp und treffend, was zu sehen ist.
\u27a1\ufe0f Warum:<\/em> Blinde Menschen h\u00f6ren nur den Alt-Text.<\/p>\n

\"Gezeichnete
Beispiel: alt=\"Clip-Art einer Rollstuhlfahrerin mit Smartphone und Kopfh\u00f6rern\"<\/code><\/p>\n

Keine unkommentierten Textbilder<\/h4>\n

Infografiken oder Bilder mit Text m\u00fcssen auch im Flie\u00dftext erkl\u00e4rt werden.
\u27a1\ufe0f Warum:<\/em> Ohne Erkl\u00e4rung sind wichtige Informationen unsichtbar.<\/p>\n

Dekorative Bilder mit alt=\"\"<\/code> auszeichnen<\/h4>\n

Wenn ein Bild nur zur Zierde da ist, setze ein leeres Alt-Attribut.
\u27a1\ufe0f Warum:<\/em> Screenreader ignorieren es dann \u2013 das spart Zeit und Verwirrung. Hier ein Beispielbild, welches keinen alternativen Text ben\u00f6tigt. Auf dem Bild ist eine Blume und ein Blatt gezeichnet.<\/p>\n

\"<\/p>\n

Verlinkte Bilder richtig beschriften<\/h4>\n

Sag im Alt-Text, wohin der Link f\u00fchrt, nicht was zu sehen ist.
\u27a1\ufe0f Warum:<\/em> Screenreader-Nutzende brauchen Orientierung.<\/p>\n

\"Zur<\/a>
Beispiel: alt=\"Zur Startseite\"<\/code><\/p>\n

Vermeide Text im Bild \u2013 oder mache ihn barrierefrei<\/h4>\n

Wenn dein Bild Text enth\u00e4lt (z.\u202fB. in Grafiken oder Werbebannern), achte auf hohen Kontrast (siehe Werkzeuge) und gib den vollst\u00e4ndigen Text im Alt-Text oder Flie\u00dftext wieder.
\u27a1\ufe0f Warum:<\/em> Nur so ist der Inhalt f\u00fcr alle verst\u00e4ndlich \u2013 auch bei Bildschirmvergr\u00f6\u00dferung, Farbenblindheit oder mit Screenreader.<\/p>\n

Videos<\/h3>\n

Als Einstieg zu diesem Thema mal ein Video vom Deutsche Blinden- und Sehbehindertenverband – dbsv.org<\/a>.<\/p>\n

\"Info<\/p>\n

Dieses Video wird \u00fcber eine externe Plattform (YouTube) gehostet. Das Laden bedarf der Zustimmung unserer Datenschutzbestimmungen.<\/a><\/p>\n

Einstellung vornehmen<\/a><\/div>\n