Leitfaden: Barrierefreie Inhalte für Online-Redakteure

Die Barrierefreiheitsanforderungen für digitale Inhalte orientieren sich an den WCAG-Richtlinien. Für die Stufe AA, die im Zusammenhang mit dem BFSG (Barrierefreiheitsstärkungsgesetz) relevant ist, ist leichte Sprache nicht zwingend vorgeschrieben. Erst die Stufe AAA fordert den Verzicht auf Fachbegriffe und Abkürzungen bzw. deren Erläuterung. Aber: Verständliche Sprache nützt allen! Nicht nur Menschen mit kognitiven Einschränkungen profitieren von klar formulierten Inhalten, sondern auch:

• Ältere Menschen, die sich mit digitalen Angeboten schwerer tun
• Internationale Besucher, die Deutsch als Fremdsprache sprechen
• Suchmaschinen, die klare, präzise Texte bevorzugen
• Alle Nutzer, die schnell erfassen möchten, worum es geht

👉 Empfehlung: Passen Sie die Sprache an Ihr Zielpublikum an. Vermeiden Sie unnötige Fachbegriffe, und wenn sie unvermeidbar sind, erklären Sie sie kurz. Nutzen Sie kurze Sätze und aktive Formulierungen, damit die Inhalte für alle verständlich sind.

Eine klare Struktur erleichtert das Lesen, verbessert die Nutzererfahrung und hilft Menschen mit assistiven Technologien, sich auf der Seite zurechtzufinden. Wer Inhalte erstellt, sollte folgende Punkte beachten:

Überschriften richtig nutzen

• Genau eine H1 pro Seite, nicht mehr und nicht weniger – sie ist die Hauptüberschrift und beschreibt das zentrale Thema.
• Überschriftenhierarchie einhalten – Jede Überschrift sollte sich logisch in die Struktur der Seite einfügen. Eine H3 darf nur verwendet werden, wenn zuvor eine H2 existiert, eine H4 nur unter einer H3 usw. Überschriften sollten niemals nur aus optischen Gründen gewählt werden, sondern immer der inhaltlichen Gliederung folgen.
• Fette oder große Texte nicht als Überschriften missbrauchen – stattdessen die richtigen Formatierungsoptionen nutzen.

Listen und Absätze korrekt einsetzen

• Listen verwenden, wenn Inhalte strukturiert aufgezählt werden – nicht einfach mit Bindestrichen oder Nummern im Fließtext arbeiten, sondern die Listenfunktion des Editors nutzen, damit Listen richtig ausgezeichnet werden.
• Absätze gezielt setzen, um lange Textblöcke zu vermeiden.
• Keine Leerzeichen oder Sonderzeichen nutzen, um Abstände zu erzeugen – nutzen Sie dafür vorgesehene Funktionen im CMS wie Trennlinien oder Einstellungsmöglichkeiten für Abstände vor bzw. nach Inhaltselementen. Sollten Sie keine solchen Möglichkeiten haben und Abstände auf der Website fehlen, wenden Sie sich bitte an Ihren Webdesigner.

Sprache und Mehrsprachigkeit berücksichtigen

• Verschiedene Sprachen auf einer Seite vermeiden – wenn doch notwendig, sollte der Entwickler sicherstellen, dass die Sprache korrekt ausgezeichnet ist (z. B. lang="en" für englische Abschnitte).
• Fremdsprachige Begriffe, die nicht gängig sind, mit einer Erklärung versehen.

Datum- und Zeitangaben eindeutig machen

• Statt „nächsten Montag“ besser „Montag, 10. März 2025“ schreiben.
• Datumsformat einheitlich halten – je nach Zielgruppe entweder TT.MM.JJJJ oder ISO-Format (YYYY-MM-DD) verwenden.

Links sind essenziell für die Navigation, aber sie müssen klar und aussagekräftig sein, damit alle Nutzer – einschließlich Screenreader-Anwender – sie richtig verstehen können.

Aussagekräftige Linktexte verwenden

Statt „Hier klicken“ oder „Mehr erfahren“ sollte der Linktext klar beschreiben, wohin er führt, z. B.:

❌ Schlecht: „Mehr erfahren“
✅ Gut: „Mehr über barrierefreie Webinhalte erfahren“

Falls aus gestalterischen Gründen ein kurzer Linktext wie „Mehr erfahren“ notwendig ist, kann ein `aria-label` ergänzt werden, um den Link für Screenreader aussagekräftiger zu machen.

Links müssen verständlich und eindeutig sein

Der Nutzer sollte sofort wissen, was ihn hinter einem Link erwartet. Besonders problematisch sind mehrere Links mit identischem Text auf einer Seite, die auf unterschiedliche Inhalte verweisen. Jeder Link sollte für sich genommen verständlich sein.

Redundante Links vermeiden

Ein und derselbe Link sollte nicht mehrfach hintereinander oder direkt in benachbarten Absätzen vorkommen.

Gut gewählte Links helfen nicht nur Nutzern mit Screenreadern, sondern machen die gesamte Website klarer und benutzerfreundlicher.

Bilder, Videos und Audiodateien sind wichtige Bestandteile von Webseiten. Damit sie für alle Nutzer zugänglich sind, sollten sie korrekt aufbereitet werden:

Aussagekräftige Alt-Texte für Bilder verwenden

• Jedes Bild, das eine inhaltliche Bedeutung hat, braucht eine kurze und präzise Bildbeschreibung im Alternativtext (auch Alt-Attribut genannt).
• Rein dekorative Bilder sollten ein leeres Alt-Attribut haben, damit Screenreader sie überspringen. (Welches ein korrekt eingerichtetes CMS automatisch einfügen sollte, sobald das Feld frei gelassen wird.)
• Der Alt-Text sollte den Inhalt des Bildes beschreiben, aber keine unnötigen Details enthalten.
• Der Beschreibungstext sollte nicht erwähnen, dass es sich um ein Bild handelt.
  ❌ Schlecht: „Das Bild zeigt einen jungen Mann der mit einem Smartphone telefoniert.“
  ✅ Gut: „Ein junger Mann telefoniert mit einem Smartphone.“

Text in Bildern vermeiden

• Texte sollten nicht in Grafiken eingebettet sein, sondern als regulärer HTML-Text ausgegeben werden.
• Falls ein Bild mit Text unvermeidbar ist (z. B. ein Logo oder eine Infografik), muss der Text als Alternativtext hinterlegt oder direkt im Umfeld beschrieben werden.

Komplexe Infografiken mit ergänzenden Beschreibungen versehen

• Wenn eine Grafik viele Informationen enthält (z. B. Diagramme oder Prozessabläufe), sollte es eine zusätzliche Erklärung im Fließtext oder als Tabelle geben.
• Alternativ kann eine detaillierte Beschreibung als separater Link bereitgestellt werden.

Audio-Inhalte mit Textalternativen anbieten

• Podcasts, Sprachaufnahmen oder andere Audioinhalte sollten ein Transkript erhalten, damit auch Nutzer ohne Ton alle Informationen erfassen können.

Videos mit Untertiteln und Audiotranskripten bereitstellen

• Videos benötigen Untertitel, damit gehörlose oder schwerhörige Nutzer den Inhalt verstehen können.
• Falls visuelle Inhalte wichtig sind (z. B. eine Präsentation ohne gesprochene Beschreibung), sollte eine Audiodeskription oder ein ergänzendes Transkript bereitgestellt werden.

Autoplay vermeiden und einen zugänglichen Player nutzen

• Videos und Audiodateien sollten nicht automatisch abgespielt werden, da das Nutzer stören oder verwirren kann.
• Der Medienplayer sollte steuerbar per Tastatur und kompatibel mit Screenreadern sein.

Alternative für wichtige visuelle Inhalte bieten

• Diagramme, Karten oder interaktive Grafiken sollten immer auch in einer Textform verfügbar sein.
• Beispiel: Eine interaktive Karte kann mit einer tabellarischen Adressliste ergänzt werden.

Diese Maßnahmen sorgen dafür, dass alle Nutzer – unabhängig von ihren Einschränkungen – Multimedia-Inhalte verstehen und nutzen können.

Farben spielen eine wichtige Rolle für die Lesbarkeit und Barrierefreiheit. Damit Inhalte gut sichtbar bleiben und keine ungewollten Probleme entstehen, sollten Redakteure folgende Regeln beachten:

Nur die voreingestellten Farbeinstellungen des CMS nutzen

Die Farben wurden vom Webdesigner so gewählt, dass sie den Kontrastanforderungen entsprechen und die Inhalte für alle Nutzer gut lesbar sind. Eigene Farbänderungen können die Lesbarkeit verschlechtern oder zu Barrierefreiheitsproblemen führen.

Keine farbigen Inhalte aus anderen Programmen einfügen

Texte, die z. B. aus Word oder anderen Quellen in den CMS Text-Editor kopiert wurden, können unsichtbare Formatierungen enthalten. Dadurch können Farben übernommen werden, die nicht den Kontrastanforderungen entsprechen. Deshalb sollte Text immer ohne Formatierung eingefügt oder mit der „Formatierung entfernen“-Funktion bereinigt werden.

Bei zu geringem Textkontrast Rücksprache mit dem Webdesigner halten

Falls ein Text schwer lesbar erscheint (z. B. hellgrau auf weißem Hintergrund), sollte der Webdesigner kontaktiert werden. Anpassungen am Design oder eine Optimierung der Kontraste müssen technisch korrekt umgesetzt werden, um Barrierefreiheit sicherzustellen.

Dokumente wie PDFs oder Word-Dateien sollten mit Bedacht eingesetzt werden, da sie meist weniger zugänglich sind als reguläre Website-Inhalte. Damit Nutzer keine Probleme mit Downloads haben, sollten folgende Punkte beachtet werden:

Dateiformat und Dateigröße angeben

Falls das CMS nicht automatisch das Dateiformat und die Dateigröße anzeigt, sollte dies manuell ergänzt werden. Dadurch wissen Nutzer im Voraus, was sie herunterladen:

❌ Schlecht: „Hier herunterladen“
✅ Gut: „Barrierefreiheits-Leitfaden (PDF, 1,2 MB)“

Dokumente nach Möglichkeit vermeiden

Wichtige Inhalte sollten direkt auf der Website veröffentlicht werden, statt als PDF oder Word-Dokument. Webseiten sind flexibler, besser durchsuchbar, barrierefreier und auf mobilen Geräten einfacher lesbar.

PDFs barrierefrei umsetzen

Wenn ein PDF benötigt wird, sollte es nach dem PDF/UA (Universal Accessibility) Standard erstellt werden. Dieser stellt sicher, dass das Dokument mit assistiven Technologien wie Screenreadern genutzt werden kann.

Wichtige Anforderungen für barrierefreie PDFs:

• Korrekte Dokumentenstruktur mit Überschriften, Absätzen und Listen
• Alternativtexte für Bilder, falls diese Informationen enthalten
• Markierbarer und durchsuchbarer Text (kein gescannter Text als Bild)
• Korrekte Lesereihenfolge, damit Screenreader die Inhalte logisch erfassen
• Metadaten zur Dokumentensprache, damit Screenreader die richtige Aussprache wählen

Diese Vorgaben sorgen dafür, dass auch Nutzer mit Einschränkungen PDFs problemlos lesen und navigieren können.