Du erstellst Inhalte, schreibst Blogartikel, passt Webinhalte an und fügst zum Beispiel Elemente wie Videos in eine Seite ein? Dann spielst du für die Barrierefreiheit einer Website eine entscheidende Rolle. Denn auch in einer nicht-technischen Rolle hast du viele Möglichkeiten, Inhalte so zu gestalten, dass sie für alle zugänglich sind – ganz gleich, ob jemand blind, gehörlos, farbenblind oder motorisch eingeschränkt ist. Hier zeigen wir dir, worauf es dabei vor allem ankommt.
Warum Barrierefreiheit wichtig ist
Stell dir vor:
- Eine blinde Nutzerin nutzt einen Screenreader, um ein PDF zu lesen – sind deine Inhalte richtig strukturiert?
- Ein gehörloser Mensch schaut sich dein Video an – sind Untertitel vorhanden?
- Jemand mit unkontrollierten Handbewegungen muss mit einem zeitgesteuerten Formular klarkommen – ist das überhaupt möglich?
- Eine farbenblinde Person sieht deine Infografik – sind die Informationen auch ohne Farbcodierung verständlich?
Du siehst: Barrierefreiheit beginnt nicht erst im Code, sondern schon bei der Konzeption und Erstellung deiner Inhalte.
Wichtig dabei: Denke Barrierefreiheit von Anfang an mit. Je früher du Barrierefreiheit in deine Arbeit einplanst, desto einfacher wird die Umsetzung. Überlege bei jedem Inhalt:
- Wer wird ihn nutzen?
- Welche Barrieren könnten bestehen?
- Was kannst du tun, um diese Barrieren zu beseitigen?
Eine hilfreiche Methode: Erstelle real-wirkende Nutzerprofile (Personas) mit unterschiedlichen Behinderungen. Frag dich dann: Können sie alle Informationen verstehen und nutzen? Auf folgender Seite des Projektes Teilhabe 4.0 findest du mehr Infos zum Thema Persona.
Unsere 10 Empfehlungen für Content-Spezialisten
Als Content-Manager musst du nicht zwingend selbst Anpassungen in HTML oder CSS vornehmen können – und das wird in der Regel auch nicht von dir erwartet. Viel wichtiger ist, dass du weißt, welche Inhalte barrierefrei gestaltet werden müssen und wie du deinen Teil dazu beiträgst. Zum Beispiel, indem du entscheidest, ob ein Bild informativ oder rein dekorativ ist. Ist es dekorativ, sollte es für Screenreader verborgen werden – ist es informativ, braucht es eine passende Textalternative. Auch bei Grafiken oder visuellen Elementen liegt es an dir, zu beurteilen, ob eine ergänzende Beschreibung nötig ist. Diese Informationen gibst du dann an die Entwickler weiter, die sich um die technische Umsetzung kümmern. So entsteht barrierefreier Content durch Zusammenarbeit – ganz ohne Code.
1. Textalternativen für Bilder bereitstellen
Informative Bilder brauchen Alternativtexte – kurze Beschreibungen (max. 150 Zeichen), die den Zweck des Bildes erfassen. Frage dich: Warum ist dieses Bild da? Welche Information soll es vermitteln?
Beispiele:
- Dekoratives Bild: Keine Textalternative nötig, aber bitte als „dekorativ“ kennzeichnen; z.B. mit leerem Alt-Text oder
- Sinnvolles Bild: „Zwei Menschen, einer blind, gehen gemeinsam durch den Wald. Die Frau hält den Mann am Ellbogen.“
Vermeide Text als Teil eines Bildes – dieser lässt sich weder skalieren noch farblich anpassen. Nutze echten Text, außer bei Logos (da ist es erlaubt).
2. Informationen nicht nur durch Farben vermitteln
Farbige Diagramme? Toll – aber nicht jeder sieht Farben gleich. Achte darauf, dass die Informationen auch ohne Farben verständlich sind:
- Beschrifte Kreisdiagramme direkt im Segment.
- Nutze Muster oder Symbole zusätzlich zur Farbe.
3. Guter Farbkontrast ist für alle hilfreich
Ein ausreichender Kontrast verbessert die Lesbarkeit – nicht nur für Menschen mit Sehschwäche. Die Faustregel:
- Kleiner Text: mindestens 4,5:1 Kontrastverhältnis
- Großer Text: mindestens 3:1
- Nicht-Text-Elemente: mindestens 3:1
Tipp: Tools wie der Color Contrast Analyzer helfen dir bei der Prüfung.
4. Gut lesbare Texte gestalten
Leserfreundliche Inhalte erreichst du durch:
- Klare Schriftarten (z. B. Arial, Calibri)
- Linksbündige Ausrichtung
- Ausreichenden Zeilenabstand (mind. 1,5-fach)
- Kleinere Textblöcke mit sinnvollen Zwischenüberschriften
5. Echte Überschriften verwenden
Nutze echte, semantische Überschriften (z. B. „Überschrift 1“ in Word), nicht nur fett und groß formatierten Text. So können Screenreader die Struktur erkennen. Halte dabei die Hierarchie ein und überspringe keine Ebenen.
6. Struktur durch Listen und Tabellen
Verwende echte Listen (Aufzählung oder nummeriert) und Tabellen mit korrekt ausgezeichneten Kopfzeilen. Markiere für deine Entwickler klar, welche Tabellenzellen Überschriften sind – sie übernehmen die technische Umsetzung.
7. Aussagekräftige Seitentitel und Linktexte
Titel sind das Erste, was Nutzer*innen mit Screenreader hören. Wähle daher:
- Eindeutige, beschreibende Titel
- Sinnvolle Linktexte statt „Hier klicken“ oder „Mehr erfahren“
Beispiel: „Tipps zur digitalen Barrierefreiheit“ statt „Link zu Tipps“.
8. Videos barrierefrei gestalten
Wenn du Videos erstellst, denke an:
- Untertitel
- Transkripte
- Audiodeskriptionen (für visuelle Inhalte, die nicht gesprochen werden)
Diese Formate helfen Menschen mit Hörbehinderungen – und allen, die ein Video ohne Ton schauen.
9. Keine rein sensorischen Hinweise geben
„Drücke den roten Knopf“ oder „Hörst du den Ton?“ – solche Anweisungen sind für viele unbrauchbar. Ergänze visuelle und akustische Hinweise mit Text. Zum Beispiel: „Falsch – bitte erneut versuchen.“
10. Fremdsprachige Wörter kennzeichnen
Wenn du fremdsprachige Begriffe verwendest, teile dies deinem Entwicklerteam mit. Nur so kann der Screenreader die Sprache korrekt aussprechen.
Kleine Schritte mit großer Wirkung
Barrierefreiheit ist kein Hexenwerk. Mit dem richtigen Bewusstsein und ein paar konkreten Maßnahmen kannst du deine Inhalte für ein breiteres Publikum zugänglich machen. Denke daran: Du machst das Internet inklusiver – nicht irgendwann, sondern jetzt. Und jeder Schritt zählt.
