Barrierefreiheit für Content-Ersteller: Inklusive Inhalte schreiben und produzieren

Barrierefreiheit beginnt nicht beim Design und endet nicht beim Code. Content-Ersteller — Autoren, Redakteure, Marketer und Multimedia-Produzenten — haben einen direkten und erheblichen Einfluss darauf, ob digitale Inhalte für alle nutzbar sind. Die Worte, die Sie wählen, die Struktur, die Sie schaffen, die Bilder, die Sie beschreiben, und die Medien, die Sie produzieren, bestimmen das Erlebnis für Nutzer mit Behinderungen.

Die gute Nachricht ist, dass barrierefreies Schreiben weitgehend gutes Schreiben bedeutet. Klare, strukturierte, beschreibende Inhalte kommen allen Nutzern zugute, nicht nur denen, die assistive Technologien verwenden.

In klarer Sprache schreiben

Klares, verständliches Schreiben ist eine Barrierefreiheitsanforderung, nicht nur eine Stilpräferenz. Nutzer mit kognitiven Behinderungen, Lernbehinderungen wie Legasthenie, Nicht-Muttersprachler sowie Nutzer, die einfach beschäftigt oder abgelenkt sind, profitieren alle von Inhalten, die leicht verständlich sind.

Schreiben Sie in kurzen Sätzen mit aktivem Satzbau. Verwenden Sie gängige Wörter statt Fachjargon oder Fachterminologie — und wenn Fachbegriffe notwendig sind, erklären Sie sie. Teilen Sie lange Passagen in kürzere Absätze mit beschreibenden Zwischenüberschriften auf. Verwenden Sie Listen, wenn Sie mehrere Punkte oder Schritte darstellen. Vermeiden Sie Redewendungen, Metaphern und kulturspezifische Referenzen, die sich möglicherweise nicht gut übersetzen lassen.

WCAG verlangt, dass Inhalte so lesbar wie möglich sein sollten, und auf Stufe AAA, dass ergänzende Inhalte oder eine alternative Version bereitgestellt werden, wenn der Text ein Leseverständnis erfordert, das über das Niveau der Sekundarstufe I hinausgeht.

Alternativtext für Bilder

Alternativtext ist eine der wichtigsten Verantwortlichkeiten im Content-Bereich. Jedes Bild, das Informationen vermittelt, benötigt eine Textalternative, die dieselben Informationen an Nutzer kommuniziert, die das Bild nicht sehen können. Screenreader lesen den Alt-Text vor, und er erscheint, wenn Bilder nicht geladen werden können.

Guten Alt-Text zu schreiben bedeutet, den Zweck zu kommunizieren, nicht nur das Aussehen. Fragen Sie sich: Welche Informationen vermittelt dieses Bild, die ein Nutzer wissen muss? Ein Foto eines Teams in einer Besprechung könnte einen Alt-Text wie „Team arbeitet gemeinsam an Projektplänen um einen Konferenztisch" benötigen, statt „foto.jpg" oder ein vages „Teamfoto".

Verschiedene Arten von Bildern erfordern unterschiedliche Ansätze:

Informative Bilder, die Inhalte vermitteln, benötigen beschreibenden Alt-Text, der die Informationen kommuniziert. Halten Sie ihn prägnant — typischerweise unter 125 Zeichen — aber stellen Sie sicher, dass die wesentlichen Informationen vorhanden sind.

Funktionale Bilder wie Icons, die als Schaltflächen verwendet werden, benötigen Alt-Text, der die Funktion beschreibt, nicht das Aussehen. Ein Lupensymbol in einer Suchschaltfläche sollte den Alt-Text „Suchen" haben, nicht „Lupe".

Dekorative Bilder, die visuelles Interesse hinzufügen, aber keine Informationen liefern, sollten einen leeren Alt-Text haben (alt=""), damit Screenreader sie vollständig überspringen. Stockfotos, die rein zu ästhetischen Zwecken verwendet werden, fallen oft in diese Kategorie.

Komplexe Bilder wie Diagramme, Grafiken, Infografiken oder Schaubilder benötigen mehr als ein kurzes alt-Attribut. Geben Sie einen kurzen Alt-Text an, der das Bild identifiziert, und stellen Sie dann eine detaillierte Beschreibung in der Nähe bereit — entweder als sichtbarer Text, als Bildunterschrift oder als verlinkte Langbeschreibung.

Linktext

Links sollten auch ohne Kontext verständlich sein. Screenreader-Nutzer navigieren häufig, indem sie eine Liste aller Links auf einer Seite aufrufen. Wenn jeder Link „Mehr erfahren" oder „Hier klicken" sagt, ist diese Liste nutzlos.

Schreiben Sie Linktext, der beschreibt, wohin der Link führt oder was er bewirkt. Statt „Klicken Sie hier, um unseren Leitfaden zur Barrierefreiheit herunterzuladen" schreiben Sie „Laden Sie unseren Leitfaden zur Barrierefreiheit herunter". Statt „Mehr erfahren" schreiben Sie „Mehr über WCAG-Konformitätsstufen erfahren".

Verwenden Sie niemals eine rohe URL als Linktext, es sei denn, die URL selbst ist die zu vermittelnde Information. URLs sind schwer vorzulesen und noch schwieriger zu verstehen, wenn man sie hört.

Überschriften und Struktur

Verwenden Sie Überschriften, um eine sinnvolle Inhaltshierarchie zu schaffen, nicht für visuelle Gestaltung. Screenreader-Nutzer navigieren über Überschriften, um Inhalte zu überfliegen und zu Abschnitten von Interesse zu springen. Überschriften müssen einer logischen Reihenfolge folgen — H1 für den Seitentitel, H2 für Hauptabschnitte, H3 für Unterabschnitte innerhalb dieser Abschnitte — ohne Ebenen zu überspringen.

Jede Seite sollte genau ein H1 haben. Unterüberschriften sollten beschreibend genug sein, dass ein Nutzer den Inhalt des Abschnitts allein aus der Überschrift verstehen kann.

Tabellen

Verwenden Sie Tabellen für tabellarische Daten — Informationen, die sinnvolle Beziehungen zwischen Zeilen und Spalten haben. Verwenden Sie Tabellen niemals für das visuelle Layout. Wenn Sie Tabellen verwenden, fügen Sie korrekte Kopfzellen mit <th>-Elementen und scope-Attributen ein, die angeben, ob es sich um Zeilen- oder Spaltenköpfe handelt. Für komplexe Tabellen mit mehreren Kopfzeilenebenen verwenden Sie id- und headers-Attribute, um Datenzellen explizit ihren Köpfen zuzuordnen.

Geben Sie eine Beschriftung oder Zusammenfassung an, die den Zweck der Tabelle beschreibt, insbesondere bei komplexen Datentabellen.

Listen

Verwenden Sie für die Darstellung einer Gruppe zusammengehöriger Elemente echte HTML-Listen — geordnete Listen (<ol>) für sequenzielle Elemente und ungeordnete Listen (<ul>) für nicht-sequenzielle Elemente. Erstellen Sie keine gefälschten Listen mit Zeilenumbrüchen und Strichen oder Aufzählungszeichen. Korrektes Listen-Markup teilt Screenreadern mit, wie viele Elemente in der Liste enthalten sind und wo sich der Nutzer innerhalb der Liste befindet.

Video- und Audioinhalte

Multimedia-Inhalte haben spezifische Barrierefreiheitsanforderungen:

Untertitel müssen für alle voraufgezeichneten Videos mit Ton bereitgestellt werden. Untertitel müssen alle gesprochenen Dialoge enthalten, Sprecher identifizieren, wenn es visuell nicht offensichtlich ist, und bedeutsame Soundeffekte einschließen. Untertitel sollten mit dem Ton synchronisiert sein und als einschaltbare Untertitel verfügbar sein, die Nutzer ein- und ausschalten können.

Transkripte müssen für voraufgezeichnete reine Audioinhalte wie Podcasts bereitgestellt werden. Transkripte sollten alle gesprochenen Inhalte enthalten, Sprecher identifizieren und relevante Nicht-Sprachgeräusche beschreiben.

Audiodeskriptionen müssen für voraufgezeichnete Videos bereitgestellt werden, bei denen wichtige visuelle Informationen nicht über die Tonspur vermittelt werden. Audiodeskriptionen beschreiben bedeutsame visuelle Elemente — Handlungen, Szenenwechsel, Bildschirmtext — in natürlichen Sprechpausen.

Automatisch abspielende Audioinhalte müssen vermeidbar sein. Wenn Audio automatisch für mehr als drei Sekunden abgespielt wird, stellen Sie einen Mechanismus bereit, um es anzuhalten, zu stoppen oder die Lautstärke unabhängig von der Systemlautstärke zu regeln.

Barrierefreie Dokumente

PDFs und andere herunterladbare Dokumente müssen ebenfalls barrierefrei sein. Das bedeutet, sie benötigen eine korrekte Tag-Struktur (Überschriften, Listen, Tabellen), eine logische Lesereihenfolge, Alternativtext für Bilder, eine definierte Dokumentsprache und Lesezeichen zur Navigation in längeren Dokumenten.

Stellen Sie wichtige Informationen, wenn möglich, als Webinhalt bereit, nicht als herunterladbare Dokumente. Webinhalte sind von Natur aus flexibler und leichter barrierefrei zu gestalten als PDFs.

Social-Media-Inhalte

Barrierefreiheit erstreckt sich auch auf soziale Medien. Fügen Sie Alt-Text zu Bildern hinzu, die auf Social-Media-Plattformen gepostet werden — die meisten großen Plattformen unterstützen dies inzwischen. Verwenden Sie CamelCase in Hashtags, damit Screenreader sie korrekt auslesen können (z. B. #WebBarrierefreiheit statt #webbarrierefreiheit). Vermeiden Sie es, Informationen ausschließlich über Bilder oder Videos ohne Textalternativen zu vermitteln.

Sensorische Merkmale

Geben Sie niemals Anweisungen, die ausschließlich auf sensorischen Merkmalen wie Form, Farbe, Größe, visueller Position, Orientierung oder Klang basieren. Statt „Klicken Sie auf den grünen Button" oder „Siehe die Seitenleiste rechts" geben Sie zusätzlichen Kontext: „Klicken Sie auf die Schaltfläche ‚Absenden'" oder „Siehe den Abschnitt ‚Verwandte Artikel'".