Warum barrierefreie Webseiten wichtig sind
Barrierefreie Webseiten ermöglichen allen Menschen einen gleichberechtigten Zugang zu Informationen – unabhängig von körperlichen, sensorischen oder kognitiven Einschränkungen. Dazu zählen z.B. Menschen mit Seh- oder Hörbeeinträchtigungen, motorischen Einschränkungen, Lernschwierigkeiten, ältere Personen oder Menschen, die mobile Endgeräte nutzen (bestes Beispiel: in der vollen Bahn ein Video ohne Ton auf dem Smartphone anschauen -> Untertitel helfen)
Barrierefreiheit ist kein Nischenthema:
Sie verbessert die Usability, also Nutzerfreundlichkeit, für alle (klare Sprache, gute Struktur, verständliche Navigation).
Sie unterstützt Suchmaschinenoptimierung (SEO).
Sie erhöht die Reichweite und Auffindbarkeit von Inhalten.
Sie hilft, rechtliche Anforderungen einzuhalten.
Barrierefreiheit bedeutet, Inhalte klarer, strukturierter und bewusster aufzubereiten. Als Redakteur*in tragen Sie entscheidend dazu bei – oft mit kleinen, aber wirkungsvollen Maßnahmen. Barrierefreiheit ist kein Zusatzaufwand, sondern Teil guter redaktioneller Arbeit. Mit jedem gut strukturierten Text und jeder klaren Überschrift leisten Sie einen wichtigen Beitrag zu einer barrierearmen digitalen Kommunikation.
Am Ende dieses Kapitels können Sie sich eine Checkliste zu barrierefreien Webseiten herunterladen (Quelle: Kompetenzzentrum digitale Barrierefreiheit (NRW)).
Was bedeutet Barrierefreiheit im Redaktionsalltag?
Barrierearme Inhalte sind so gestaltet, dass sie:
wahrnehmbar sind (z.B. lesbar, hörbar),
bedienbar sind (z.B. per Tastatur),
verständlich sind (klare Sprache, logische Struktur),
robust sind (z.B. mit Hilfstechnologien wie Screenreadern** funktionieren).
Bildquelle: Kompetenzzentrum digitale Barrierefreiheit (NRW)
** Screenreader sind spezielle Softwareprogramme, die digitale Inhalte (Texte, Links, Bilder) für blinde oder seheingeschränkte Menschen zugänglich machen. Sie übersetzen visuelle Informationen in eine akustische oder taktile Form, ermöglichen Navigation per Tastatur und sind essenziell für digitale Barrierefreiheit.
Barrierefreie vs barrierearme Webseiten
Barrierefrei bedeutet, dass etwas vollständig ohne Hindernisse für alle Menschen zugänglich und nutzbar ist (gesetzlich definiert nach DIN 18040). Im Webkontext bedeutet Barrierefreiheit, dass Standards wie die WCAG (Web Content Accessibility Guidelines) zu 100% erfüllt sind. Barrierefrei ist also der Idealzustand (nach Norm).
Eine barrierearme Webseite hat Teile der Zugänglichkeit umgesetzt und ist somit eine Annäherung mit Kompromissen, oft als Übergangslösung oder in der Praxis umgesetzt. Für Barrierearmut gibt es keine gesetzliche Definition.
Zielgruppen barrierearme Webseiten
Bildquelle: Kompetenzzentrum digitale Barrierefreiheit (NRW)
Praktische Tipps für barrierearme Webseiten
1. Klare Struktur und Überschriften verwenden
Nutzen Sie Überschriften in einer logischen Hierarchie (H1, H2, H3 …).
Zur Kennzeichnung von Überschriften Formatvorlagen in TYPO3 verwenden (siehe Screenshots)
Überschriftenhierarchie sollte der inhaltlichen Hierarchie des Textes entsprechen (H1: Titel der Start- oder Unterseite; H2: Hauptüberschriften zur Kennzeichnung von Artikeln oder Abschnitten; H3: Zwischenüberschriften innerhalb des Textes zur Kennzeichnung von Absätzen etc.)
Überschriften sollen Inhalte zusammenfassen, nicht dekorativ sein.
Beispiel:
❌ „Willkommen“
✅ „Studienangebote im Überblick“
Praxistipp:
2. Verständlich schreiben, klar gestalten
Kurze Sätze, klare Aussagen
Fachbegriffe nur, wenn nötig – ggf. erklären
Aktive statt passive Formulierungen, Verbalstil statt Nominalstil
Füllwörter, Anglizismen und Fremdworte vermeiden
mobiles Verhalten und Farbwahrnehmung in der Sprache berücksichtigen (keine Verweise wie „links“, „rechts“, „unten“, „oben“ oder „im roten Kasten")
sparsamer Umgang mit Hervorhebungen im Text durch Fettung (VERSALSCHREIBUNG, Kursivstellung, Unterstreichungen vermeiden)
keine leeren Absätze nutzen, um z.B. Abstände zwischen Textblöcken zu erzeugen
keine Leerzeichen zur Erzeugung horizontaler Abstände nutzen
3. Sinnvolle Linktexte einsetzen
- Links sollten auch ohne Kontext verständlich sein.
- Keine Formulierungen wie „mehr“ oder „hier klicken“
- Stattdessen Links zu internen oder externen Webseiten oder Dateien beschreiben, z.B. „Artikel zur Erstellung von Alt-Texten“
Beispiel:
❌ „Hier klicken“
❌ „Mehr“
✅ „Studiengänge der Fakultät für Biologie“
4. Bilder mit Alternativtexten versehen
Jedes inhaltliche Bild und jede Grafik benötigt einen Alternativtext (Alt-Text).
Der Alt-Text beschreibt die Information (keine Interpretation), nicht das Bild an sich (Beispiel: „Studierende arbeiten gemeinsam im Labor“)
Bilder mit erkennbaren Motiven und eindeutiger Aussage nutzen
Einsatz von Icons/Piktogrammen kann die Kommunikation unterstützen
Bilder mit ruhigem Hintergrund und deutlichen Kontrasten nutzen
Bilder sollten einen sprechenden Dateinamen besitzen, keine Zahlenkolonnen oder Abkürzungen
5. Listen & Tabellen korrekt nutzen
Aufzählungen nicht mit Bindestrichen erzeugen, sondern über die Formatvorlagen
Tabellen mit einfacher Struktur erstellen
Tabellen nur für Daten, nicht fürs Layout
Leere Spalten und Zellen vermeiden
6. Keine Informationen nur über Farbe oder Form vermitteln
Wichtige Hinweise nicht nur farblich kennzeichnen, z.B. Pflichtfelder
7. Videos und Audioinhalte barrierearm gestalten
Videos sollten Untertitel haben
Bei wichtigen Inhalten: kurze Textzusammenfassung anbieten
Barrierefreie Dokumente (PDF, Word & Co.)
Manche Inhalte müssen als Dokument bereitgestellt werden. Auch diese sollten möglichst barrierearm sein.
Worauf Sie achten sollten:
Klare Überschriftenstruktur im Dokument
Sinnvolle Dateinamen (z. B. „Studienordnung_BA_Biologie.pdf“)
Alternativtexte für Bilder
Tabellen strukturiert und verständlich
Ausreichender Kontrast
Keine gescannten PDFs ohne Texterkennung
Nutzen Sie möglichst HTML-Seiten statt PDFs, wenn Inhalte regelmäßig gelesen oder aktualisiert werden.
Viele weitere Informationen rund um das Thema Daten und Datenhygiene finden Sie in diesem Kapitel: https://support.dshs-koeln.de/kb/de-de/86-daten-hygiene
Eine Checkliste zu barrierefreien Dokumenten hat das Kompetenzzentrum digitale Barrierefreiheit (NRW) erstellt: https://barrierefreiheit.dh.nrw/fileadmin/user_upload/barrierefreiheit/Publikationen/Checkliste_BF_Dokumente.pdf. Für die Anwendung ist das Programm Adobe Acrobat Pro Voraussetzung.