Barrierefrei texten fürs Web

Informations- und Kommunikationstechnologien (IKT), also auch Webseiten und Online-Anwendungen, sollen so gestaltet sein, dass sie von möglichst vielen Menschen mit unterschiedlichen Fähigkeiten, möglicherweise auch unter Einsatz von Hilfsmitteln, genutzt werden können.

Konkret heißt das, dass die folgende funktionale Leistungsfähigkeit der Systeme, gemäß der DIN EN 301 549 Barrierefreiheitsanforderungen für IKT-Produkte und -Dienstleistungen, gegeben sein muss:

Einige Aussagen zur funktionalen Leistungsfähigkeit betreffen eher Hardware, wie beispielsweise die „Nutzung mit eingeschränkter Handhabung oder Kraft“. Andere treffen eher für Webseiten beziehungsweise Web-Anwendungen zu beispielsweise, dass sie mit einer gut gestalteten semantischen Struktur Benutzer*innen ohne Sehvermögen ermöglichen, die visuelle Benutzungsschnittstelle zu erkennen, darin zu navigieren und mit ihr zu interagieren.

Die funktionale Leistungsfähigkeit von Webseiten ist gegeben, wenn die Web-Inhalte nach den Kriterien der Web-Barrierefreiheit, den internationalen „Web Content Accessibility Guidelines (WCAG)“, gestaltet sind, die sich den vier Grundprinzipien barrierefreien Webdesigns zuordnen lassen:

• Wahrnehmbarkeit
• Bedienbarkeit
• technologische Robustheit
• Verständlichkeit

In allen vier Bereichen gibt es Anforderungen, die auch das Schreiben von Web-Texten und damit die Arbeit von Web-Redakteur*innen betreffen. Werden diese Anforderungen der Barrierefreiheit berücksichtigt, ermöglicht dies nicht nur Menschen mit Behinderungen auf die Web-Inhalte zuzugreifen, sondern es bringt im Sinne eines „Universellen Designs“ Vorteile für alle Nutzer*innen des Web-Angebots.

Motivation zum verständlichen Texten

Sie können als Web-Redakteur*in nicht sicher wissen, wer Ihre Texte später lesen wird. Sicherlich werden Ihre Texte eine Zielgruppe haben, an die sich die Texte richten. Aber die Tatsache, dass die Texte online veröffentlicht sind, macht die Texte grundsätzlich allen Menschen mit einem Internetzugang verfügbar.

Auch wenn sich die Inhalte des Textes an eine Zielgruppe richten, sollte die Form oder die Art der Formulierung und die visuelle Gestaltung der Texte niemanden davon ausschließen oder abschrecken diese Texte zu lesen.

Hinzu kommt, dass das Lesen am Bildschirm uns mehr anstrengt als das Lesen auf Papier. Möglicherweise werden die Online-Texte auch in einer unruhigen Umgebung oder mit Unterbrechungen durch Kolleg*innen oder Telefonanrufe am Arbeitsplatz gelesen. Eine verständliche Sprache sowie eine, die Verständlichkeit unterstützende, visuelle und semantische Gestaltung der Texte kann daher vielen Leser*innen helfen, die Texte besser zu verstehen.

Insbesondere Menschen mit Lernschwierigkeiten hilft eine verständliche Sprache. Grundlegende Informationen zu einem Internetangebot sowie Kontaktmöglichkeiten müssen zusätzlich in Leichter Sprache verfügbar sein. Leichte Sprache unterscheidet sich von verständlicher Sprache. Die Leichte Sprache folgt speziellen Regeln und verkürzt die Inhalte bewusst.

Vorgehen zum verständlichen Texten

Nutzen Sie die folgenden Regeln, um einen Text verständlich zu formulieren:

Satzlänge

Weiterführende Gedanken dazu, wie lang ein Satz idealerweise sein darf, finden Sie im Webangebot des Languagetool.

Substantivierungen und Verben

Einige Hintergründe zum Thema zusammengefasst in dem Online-Artikel „Meide die Hauptwörterei“.

Abkürzungen

Hierzu gibt es bereits etwas ältere ausführliche Betrachtungen des Projekts „Barrierefrei informieren und kommunizieren (BIK)“. Da es sich um ein Kriterium der höchsten Prioritätsstufe (AAA) sowohl der alten Webrichtlinie als auch der neuen Webrichtlinie handelt, ist das Kriterium nicht verpflichtend, aber diese Empfehlungen sind trotzdem weiterhin aktuell (Hinweis: Die externen Verweise in dem Artikel sind veraltet und können ignoriert werden). Schwerpunkt des Artikels liegt auf der Perspektive von blinden Nutzenden auf die Verwendung und technischen Auszeichnungsmöglichkeiten von Abkürzungen im Web.

Fachbegriffe

Für einige Redaktionssysteme beziehungsweise Content Management Systeme (CMS) gibt es Erweiterungen, die dabei helfen ein eigenes Glossar aufzubauen oder auf bestehende Lexika wie beispielsweise das Hurraki-Wörterbuch in Einfacher Sprache zu verweisen.

Textwände

Einige Ergebnisse der Usability-Forschung in einem Artikel über unser Online-Leseverhalten zusammengefasst.

Nur-Text-Inhalte

Lesen Sie weiterführende Tipps zum guten Einsatz von Bildern im Artikel „Visual Content Marketing“. Wie Sie die Bilder barrierefrei in Ihren Artikel einbinden, erfahren Sie im Abschnitt „Aussagekräfte Text-Alternativen für Bilder formulieren“ dieses Leitfadens.

Formulare und Interaktion

Schauen Sie sich die Beispiele in unserer Demonstrator-App zu korrekten Fehlermeldungen in Formularen an.

Die rechtlichen Grundlagen der Verständlichkeit im Web

Die deutschen Gesetze und Verordnungen verweisen im Zusammenhang mit Web-Inhalten auf die internationalen „Richtlinien für barrierefreie Web-Inhalte“, die sogenannten „Web Content Accessibility Guidelines (WCAG) 2.1“.

• Für öffentliche Stellen, die zur Barrierefreiheit verpflichtet sind,
  • steht in den verbindlichen Barrierefreien-Informationstechnik-Verordnungen (BITV) auf Bundesebene und auf Landesebene in der Regel ein Verweis auf
  • die Norm „DIN EN 301 549 Barrierefreiheitsanforderungen für IKT-Produkte und -Dienstleistungen“, die wiederum für Web-Inhalte
  • auf die WCAG 2.1 verweisen.
• Für private Wirtschaftsakteure, die in einigen Branchen zu Barrierefreiheit verpflichtet sind, beispielsweise für einige Dienstleistungen und Produkte von Banken, Verlagen oder Online-Shops,
  • sind die Details im Barrierefreiheitsstärkungsgesetzes (BFSG) geregelt, das für die technischen Details alternativ auf
  • die dazugehörige Verordnung (BFSGV) verweist, die entsprechende technische Spezifikationen enthält oder
  • auf die voraussichtlich zukünftig auch für das BFSG harmonisierte und dann um Anhänge für die neuen Anwendungsfälle ergänzte Norm „DIN EN 301 549 Barrierefreiheitsanforderungen für IKT-Produkte und -Dienstleistungen“, die wiederum für Web-Inhalte
  • auf die WCAG 2.1 verweisen.

Verständlichkeit in der Verordnung für private Wirtschaftsakteure

In der „Verordnung über die Barrierefreiheitsanforderungen für Produkte und Dienstleistungen nach dem Barrierefreiheitsstärkungsgesetz“ vom 15. Juni 2022 oder auch kurz BFSGV wird Verständlichkeit explizit für Dienstleistungen gefordert, die Webseiten beinhalten:

Auch Informationen zu Produkten müssen verständlich sein nach:

Dies trifft auch für online bereitgestellte Anleitungen zur Installation und Wartung, sowie Lagerung und Entsorgung zu (siehe BFSGV § 5).

Für Bankdienstleistungen gelten zusätzliche Anforderungen, damit diese für Verbraucher verständlich sind. Hierbei wird mit dem gemeinsamen europäischen Referenzrahmen für Sprachen des Europarats gearbeitet, das verschiedene Sprachniveaus definiert. In diesem Falle von Erklärungen der Bankdienstleistungen, darf das Sprachniveau B2 nicht überschritten werden.

Verständlichkeit in den Web-Richtlinien

Die Erfolgskriterien der WCAG 2.1 sind in drei Prioritätsstufen organisiert. Die DIN EN 301 549 fordert verbindlich nur die ersten beiden Stufen A und AA. Webredakteur*innen werden jedoch „ermutigt“ auch die WCAG 2.1 Stufe-AAA-Erfolgskriterien zu erfüllen, sofern ihre Anwendung möglich ist.

Folgende WCAG 2.1-Erfolgskriterien liegen den, in diesem Leitfaden gegebenen Schreibregeln für Web-Redakteur*innen zugrunde und betreffen die Verständlichkeit im Web:

Weiterführende Informationen zur Verständlichkeit im Web

Sie finden tiefergehende Informationen zum Thema verständlich schreiben beziehungsweise verständlich kommunizieren in der Teilhabe 4.0-Toolbox und an weiteren Stellen im Web:

• W3C-Leitfaden: Writing for Web Accessibility: Keep content clear and concise
• in der Toolbox: Handbuch barrierefreie Kommunikation
• in der Toolbox: Leichte Sprache automatisch prüfen
• in der Toolbox: Inhalte von E-Mails barrierefrei gestalten
• in der Toolbox: Besonderheiten von Newslettern

Struktur hilft beim Lesen

Texte werden durch semantische Strukturen gegliedert und geordnet, sie geben dem Auge halt und machen einen Text angenehmer zu lesen. Niemand möchte einen Text ohne Abschnitte und Überschriften lesen. Dies gilt besonders für Texte im Web, denn nirgendwo sonst sind die Leser*innen schneller wieder weg und suchen sich andere Informationsquellen als im Internet. Menschen mit Behinderungen sind dabei keine Ausnahmen.

Nutzer*innen von Screenreadern zum Beispiel können sich an den Überschriften eines Textes genauso orientieren wie sehende Menschen. Statt den Text optisch zu scannen, lassen sie sich einfach nur die Überschriften vorlesen oder navigieren von Überschrift zu Überschrift. Genauso wie Sehende entscheiden sie anhand der Überschrift, ob sie einen Text oder einen Abschnitt vertieft lesen wollen.

Wichtig dafür ist, dass die semantischen Strukturen im Text von Screenreadern erkannt werden und an deren Nutzer*innen weitergegeben werden. Dies funktioniert bei Überschriften zum Beispiel nur, wenn die Überschriften im Quellcode der Webseite auch als Überschrift gekennzeichnet wurden. Wird ein Text lediglich als großer fetter Text dargestellt, ist dies für einen Screenreader noch lange keine Überschrift und diese strukturelle Information und Hilfe gehen verloren.

So verwenden Sie Überschriften richtig

Zunächst sollten Sie wissen, dass im HTML, der Sprache des Web, sechs Hierarchie-Stufen vorgesehen sind. Im Quellcode erkennen Sie diese an den HTML-Tags <h1> bis <h6>. Wir gehen davon aus, dass Sie zum Bearbeiten Ihrer Webseite ein Content-Management-System (CMS) einsetzen und dieses Ihnen einen geeigneten Editor zur Verfügung stellt. In diesem Editor sollte ein Verfahren vorgegeben sein, wie Sie Überschriften erzeugen. In folgender Abbildung sehen Sie beispielhaft einen Editor der eine Liste von geeigneten Formatvorlagen für alle Überschriften-Ebenen anbietet.

Sollten Sie nicht wissen, wie Sie Überschriften in Ihrem System erzeugen, fragen Sie Ihre zuständigen IT-Expert*innen.

Die Ebenen der Überschriften sollten immer eine logisch sinnvolle Struktur abbilden. Es sollten zum Beispiel keine Überschriftenebenen übersprungen werden.

Nicht die Optik ist hier entscheidend, sondern die Struktur. Eine Überschrift ist immer die Überschrift des gesamten folgenden Webseiten-Inhalts bis zur nächsten Überschrift derselben Ebene.

Sollten Sie nicht wissen, wie Sie Überschriften in Ihrem System erzeugen, fragen Sie Ihre zuständigen IT-Expert*innen.

Was Sie auf keinen Fall machen sollten, ist mit ihrem Editor Texte zu vergrößern, um daraus optisch eine Überschrift zu erzeugen. Diese sind dann für einen Screenreader keine Überschriften.

Überschriften können leider auch missbraucht werden. Wollen Sie zum Beispiel ein Text lediglich hervorheben, nutzen Sie dafür die vorgesehenen Formate und nicht eine Überschrift der niedrigen Ebenen. Es wird zum Beispiel häufig einfach die Überschriften-Ebene 6 verwendet, um eine Textzeile hervorzuheben, da die Ebene oft in derselben Schriftgröße dargestellt wird wie der restliche Text.

Wenn Sie die Überschriftenstruktur einer Webseite sehen möchten, haben wir für Sie am Ende dieser Seite einige Werkzeuge zusammengestellt, mit denen Sie die Strukturen einer Webseite sichtbar machen können.

Texte sinnvoll mit Absätzen strukturieren

Texte sollten immer nach dem Leitsatz „Ein Satz – eine Aussage, ein Absatz – ein Gedanke“ aufgebaut werden.

Absätze machen Texte für sehende und nicht-sehende Menschen übersichtlicher und besser handhabbar. Ist ein Text gut mit Absätzen strukturiert, können nicht nur sehende die einzelnen Absätze kurz anlesen und bei Bedarf zum nächsten Abschnitt springen. Auch Nutzer*innen von Screenreadern können durch Kurzbefehle direkt zum nächsten oder vorherigen Abschnitt navigieren.

In der Regel ist im Editor Ihres Content-Management-Systems eine Methode vorgesehen, um korrekt Absätze in den Text einzufügen. Meist ist dies eine Art Formatvorlage, die Sie aus einer Liste auswählen können. Im HTML-Quellcode sind korrekt eingefügte Absätze mit dem Element <p> (für Paragraph) gekennzeichnet.

Achten Sie darauf, dass doppelten Zeilenumbrüche in der Regel nur optisch zwei getrennte Abschnitte erzeugen. Im Quellcode werden dann keine Abschnitte mit dem Element <p> erzeugt, sondern mit doppelten <br>-Elementen. Die so nur optisch getrennten Abschnitte bleiben semantisch ein Absatz und helfen Nutzer*innen von Screenreadern nicht weiter.

Sollten Sie nicht wissen, wie Sie korrekt Absätze in Ihrem System erzeugen sollen, fragen Sie bitte Ihre zuständigen IT-Expert*innen.

Wenn Sie die Absätze in einer Webseite sehen möchten, haben wir für Sie am Ende dieser Seite einige Werkzeuge zusammengestellt, mit denen Sie die Strukturen von Webseiten sichtbar machen können.

So verwenden Sie Listen und Aufzählungen richtig

Weitere Strukturen, die gerne auf Webseiten eingesetzt werden, sind Listen und Aufzählungen. Listen helfen den Leser*innen die Aussagen eines Textes schneller und einfacher zu erfassen. Dies gilt ebenfalls für Menschen mit Behinderungen. Ein Screenreader zum Beispiel kann Aufzählungen ankündigen und den Nutzer*innen mitteilen, wie lang eine Liste ist. Bei Bedarf können die Nutzer*innen von einem Listenpunkt zum nächsten navigieren oder direkt die Liste verlassen.

In der Regel bieten CMS-Systeme oder Web-Editoren eine vorgesehene Methode an, um Aufzählungen und Listen zu erstellen. Häufig sind dies Schaltflächen (Buttons) im Editor für unsortierte Listen und nummerierte Aufzählungen. Bei einer korrekten Verwendung werden im Quelltext der Webseite die HTML-Elemente <li> (für „list item“), <ul> (für „unordered list“) oder <ol> (für „ordered list“) erzeugt.

Falls Sie nicht sicher sind, mit welcher Methode Sie Aufzählungen oder Listen in ihrem System erzeugen sollen, fragen Sie bitte die zuständigen IT-Expert*innen.

So kennzeichnen Sie Sprachwechsel

Screenreader können Sprachwechsel nicht ohne weiteres in einem Text erkennen und die korrekte Aussprache wählen. Bei einzelnen nicht-deutschen Wörtern, die aber im Duden stehen, ist dies in der Regel kein Problem. Die Screenreader haben dafür eine Art eingebautes Wörterbuch in dem die richtige Aussprache hinterlegt ist.

Problematisch sind unübliche nicht-deutsche Wörter oder ganze Textabschnitte, hier kann es passieren, dass der Screenreader diese Texte mit einer deutschen Aussprache vorliest. Im schlechtesten Fall ist der Text dann trotz Fremdsprachenkenntnisse nicht mehr zu verstehen.

Ist es notwendig unübliche nicht-deutsche Wörter oder Texte zu verwenden, können diese im Quelltext mit dem HTML-Attribut lang gekennzeichnet werden. Leider unterstützen viele Webeditoren nicht direkt das Kennzeichnen von Sprachwechseln, deshalb ist es häufig nötig in die Quellcode-Ansicht des verwendeten Editors zu wechseln und den HTML-Code per Hand einzugeben.

Falls Sie nicht sicher sind, mit welcher Methode Sie fremdsprachliche Textabschnitte in ihrem System kennzeichnen sollen, fragen Sie bitte die zuständigen IT-Expert*innen.

So kennzeichnen Sie Abkürzungen

Durch die Verwendung von Abkürzungen und Akronymen kann die Verständlichkeit eines Textes leiden. Es sollte deshalb entweder auf Abkürzungen verzichtet werden oder sie sollten sparsam eingesetzt und beim ersten Auftreten erläutert werden. Dies kann einfach im Text geschehen, indem die Abkürzung einmal ausgeschrieben wird und die Kurzform in Klammern dahinter gesetzt wird, oder es kann das im HTML vorgesehen Element <abbr> (für „abbreviation“) verwendet werden.

Leider unterstützen viele Webeditoren nicht direkt das Kennzeichnen von Abkürzungen, deshalb ist es häufig nötig in die Quellcode-Ansicht des verwendeten Editors zu wechseln und den HTML-Code per Hand einzugeben.

Falls Sie nicht sicher sind, mit welcher Methode Sie Abkürzungen in ihrem System kennzeichnen sollen, fragen Sie bitte die zuständigen IT-Expert*innen.

Sonstige semantische Elemente

Sie werden in den Editoren und in den verschiedenen Anleitungen im Internet noch weitere Struktur-Elemente finden. Alle diese Elemente können Sie gemäß ihrer Semantik korrekt verwenden, dann ist dies für Menschen mit Behinderungen meist ein Gewinn. Sie können diese Elemente aber auch missbrauchen und nicht gemäß ihrer Semantik einsetzen, in der Regel werden Sie dann aber neue Barrieren erzeugen.

Hier finden Sie zwei typische Beipiele für den Missbrauch von HTML-Elementen:

• Das HTML-Element <blockquote> kennzeichnet Zitate, es wird aber leider auch gerne missbraucht, um Einrückungen zu erzeugen und Abschnitte dadurch hervorzuheben.
• Die HTML-Elemente für Tabellen <table>, <tr>, <td> usw. kennzeichnen Tabellen und deren Zeilen und Spalten. Besonders früher wurden diese Elemente aber gerne missbraucht, um Inhalte auf einer Webseite zu positionieren und anzuordnen.

Werkzeuge, um Strukturen und Semantik sichtbar zu machen

• verschiedene Lesezeichen, unter anderem um Gliederungen und Strukturen auf einer Webseite anzuzeigen
• Lesezeichen, um Überschriften und Listen anzuzeigen (in englischer Sprache)
• Lesezeichen, um die Überschriften-Hierarchie anzuzeigen (in englischer Sprache)
• Browser-Erweiterung, um Überschriften-Hierarchie anzuzeigen: HeadingMap for Chrome, HeadingMap for Firefox

Strukturen und Semantik in der Check-Artikel-App

Sie haben Ihren Online-Artikel bereits geschrieben und Sie wollen überprüfen, ob Sie an alles gedacht haben? Einen Abschnitt zu „Strukturen und Semantik“ finden Sie auch in unserer Check-Artikel-App.

Mit aussagekräftigen Linktexten schneller zum Ziel

Verlinkungen sind eines der wichtigsten Konzepte im Web. Das „Internet“ wäre ohne Links oder Hyperlinks, wie sie früher noch hießen, nicht vorstellbar. Schon das H in HTML der Sprache des Webs steht für Hypertext, was wiederum per Definition ein verlinkter Text ist.

Wir gehen davon aus, dass Sie zum Bearbeiten Ihrer Webseite ein Content-Management-System (CMS) einsetzen und dieses Ihnen einen geeigneten Editor zur Verfügung stellt. In der Regel finden Sie in diesem Editor eine Schaltfläche zum Einfügen eines Links. Nach dem Öffnen erscheint dann meist ein Dialogfeld in dem Linktext und Linkziel eingegeben werden können.

In einigen Systemen habe Sie noch weiterer Optionen zur Auswahl. Beispielsweise können Sie die Sprache des Linkziels und des Linktexts bestimmen oder angeben, ob es sich um einen internen oder externen Link handelt.

Der Linktext ist der Teil des Links, den die Nutzer*innen sehen und lesen können. Um einen Link auf einer Seite auszuwählen, können blinde Nutzer*innen ihn nicht einfach per Maus oder Touchscreen anklicken, sie müssen zum Beispiel per Tastatur von Link zu Link navigieren und bekommen dann nur den Linktext vorgelesen.

Weiter Informationen finden Sie in unserem Toolbox-Artikel „Lesen mit den Ohren“.

Beschreiben Sie das Linkziel

Die Linktexte sollten das Ziel beschreiben. Linktexte wie „klicken sie hier“, „unter diesem Link“, „mehr“, „weiter lesen“ oder nur „hier“ sind nicht aussagekräftig! Sie sagen nichts darüber aus, was passiert, wenn die Nutzer*innen den Link auswählen.

Vermeiden Sie URLs in Linktexten

Linktexte sollten nicht aus der Internetadresse des Linkziels (der URL) bestehen. Denken Sie daran, dass die Adressen von einem Screenreader vorgelesen werden und das kann je nach Adresse sehr unverständlich werden. Nur wenn Sie zum Beispiel explizit auf eine Domain wie www.teilhabe40.de hinweisen möchten, kann eine kurze URL als Linktext sinnvoll sein.

Verwenden Sie eindeutige Linktexte

Linktexte sollen eindeutig sein. Dies bedeutet, dass zwei Links zu unterschiedlichen Zielen nicht denselben Linktext besitzen sollen. Die Links müssen anhand des Linktextes unterscheidbar sein. Neben Nutzer*innen von Screenreadern profitieren insbesondere Nutzer*innen der Sprachsteuerung an Smartphones von solchen eindeutigen Links.

Spezialfälle

In einigen Content-Management-Systemen ist es möglich Sprachen für den Linktext und das Linkziel anzugeben. Im HTML-Code der Webseite werden dann Attribute wie lang und hreflang eingefügt. Wenn Sie auf englisch-sprachige Dokumente verweisen, können Sie dadurch Sprachwechsel technisch eindeutig festlegen. Screenreader können die Aussprache anpassen (durch lang) oder die Sprache der Linkziele ankündigen (durch hreflang). Um auch letztere Information sehenden Nutzer*innen nicht vorzuenthalten, ist es sinnvoll, dies einfach im Linktext mit anzugeben.

Dasselbe gilt auch für das Format des Linkziels. Häufig wird zum Beispiel aus einer Webseite heraus auf PDF-Dokumente verwiesen. Für Nutzer*innen von Screenreadern bedeutet dies häufig eine Umstellung der Arbeitsweise, weshalb manche das Arbeiten mit Webseiten bevorzugen. Es ist also nützlich, wenn so ein Wechsel des Formats im Link angekündigt wird.

Barrierefreie Links in der Check-Artikel-App

Sie haben Ihren Online-Artikel bereits geschrieben und Sie wollen überprüfen, ob Sie an alles gedacht haben? Einen Abschnitt zu „barrierefreien Links“ finden Sie auch in unserer Check-Artikel-App.

Textliche Beschreibungen für Bilder haben Vorteile für alle

Viele Menschen haben Schwierigkeiten, Bilder zu sehen oder deren Inhalte zu erkennen. Dies gilt vor allem für blinde und sehbehinderte Menschen. Sie können Bilder oder Grafiken gar nicht oder nur schwer wahrnehmen.

Die Information eines Bildes kann nicht ohne weiteres automatisch in Text oder Sprache umgewandelt werden. Blinden und sehbehinderten Menschen bleiben die Informationen, die ausschließlich in Bildern transportiert werden, verschlossen.

Um blinden und sehbehinderten Menschen bildliche Informationen zugänglich zu machen, benötigen Bilder Text-Alternativen. Text-Alternativen sind Texte, die anstelle der Bilder benutzt werden und dabei gleichwertige Informationen vermitteln sollen. So kann sichergestellt werden, dass sehenden und nicht sehenden Nutzer*innen gleichwertige Informationen bereitgestellt werden.

Werden konsequent gute Text-Alternativen genutzt, ergeben sich daraus weitere Vorteile:

• Die Text-Alternativen werden auch von Suchmaschinen gespeichert und können so auch von Nutzer*innen gefunden werden.
• Bei langsamen oder teuren Mobilfunkverbindungen kann eine Seite ohne Bilder schneller und günstiger geladen werden.

So finden Sie gute Text-Alternativen

Um eine solche „gleichwertige Text-Alternative“ zu finden, sollten Sie sich zunächst folgende Fragen stellen:

• Warum ist dieses Bild hier?
• Welche Information bietet es an?
• Welchen Zweck erfüllt es?
• Wenn Sie das Bild nicht verwenden könnten, welche Worte würden Sie benutzen, um die gleiche Information zu vermitteln?

Ein Bild eines Dackels zum Beispiel kann auf unterschiedliche Webseiten einen unterschiedlichen Zweck erfüllen und benötigt deshalb auch unterschiedliche Text-Alternativen:

• Auf einer Webseite für Kinder über die unterschiedlichen Haustiere der Menschen wäre zum Beispiel „ein Hund“ eine geeignete Text-Alternative.
• Stellt die Webseite die verschiedenen Hunderassen da, würden Sie eher eine Text-Alternative wie „ein Dackel“ wählen.
• Hundezüchter*innen würden wahrscheinlich auf ihren Webseiten noch viel mehr Details in einer Text-Alternative angeben.

Je nach Art des Bildes, haben Sie verschiedenen Möglichkeiten eine geeignete Text-Alternative auf Ihrer Webseite einzufügen.

Bilder mit einfachen visuellen Informationen

Wenn sie zu dem Schluss gekommen sind, dass ihr Bild lediglich eine einfache Information beinhaltet, dann versuchen Sie Ihre Text-Alternative kurz und knapp zu formulieren. Geben Sie sich selbst ein Zeichenlimit. 80 Zeichen sind zum Beispiel ein gutes Limit, da kommerzielle elektronische Braille-Displays für Blindenschrift meist 40 oder 80 Zeichen gleichzeitig darstellen können. Die Text-Alternative wäre dann auf 1-2 Zeilen, der auf dem Braille-Display darstellbaren Zeichen beschränkt.

Wir gehen davon aus, dass Sie zum Bearbeiten Ihrer Webseite ein Content-Management-System (CMS) einsetzen und dieses Ihnen einen geeigneten Editor zur Verfügung stellt. In der Regel finden Sie in diesem Editor beim Einfügen oder Hochladen eines Bildes ein Textfeld, in dem Sie die Text-Alternative eingeben können.

Aus technischer Sicht, wird die Text-Alternative als alt-Attribut des Bildes im Quellcode einer Webseite angegeben. Es wird dann auch vom „Alternativtext“ gesprochen.

<img src="dackel.jpg" alt="Kurzhaardackel">

Falls Sie nicht sicher sind, mit welcher Methode Sie Alternativtexte in ihrem System eingeben, fragen Sie bitte die zuständigen IT-Expert*innen.

Wenn Sie keine kurze Text-Alternative finden und die Information des Bildes komplex ist, können Sie eine der folgenden Techniken verwenden.

Bilder mit komplexen Informationen

Häufig beinhalten Bilder komplexe Informationen, die sich nicht in wenigen Worten beschreiben lassen.

Betrachten wir zum Beispiel noch einmal die Hundefotos auf den Webseiten von Hundezüchter*innen. Wenn die Züchter*innen hier die verschiedenen Merkmale der Zucht präsentieren möchten, kann die Information des Fotos sehr komplex werden. Die vollständige Information würde nicht gut in einen einfachen Alternativtext passen.

In diesem Fall würde es viel mehr Sinn ergeben die Bildbeschreibung als Teil des Textes auf der Webseite zu verfassen. Die wesentliche Information ist dann für alle Nutzer*innen verfügbar. Das Bild wäre nur eine Ergänzung zum Text und käme mit einer einfachen Text-Alternative aus.

Auf Seiten mit aktuellen Nachrichten werden gerne Fotos von Personengruppen dargestellt. Autor*innen geben dazu gerne die Namen der dargestellten Personen an. Auch hier ist es nicht sinnvoll diese Information als Alternativtext anzugeben, sondern die Namen für alle sichtbar zum Beispiel als Bildunterschrift darzustellen. Der Alternativtext kann dadurch kurz ausfallen.

Bei Diagrammen oder komplexen Zeichnungen ist es offensichtlich, dass eine Alternativtext viel zu lang werden würde. Hier müssen sich die Autor*innen tatsächlich intensiv über den Zweck oder die Aussage des Diagramms Gedanken machen:

• Soll das Diagramm lediglich einen einfachen Sachverhalt visualisieren? Zum Beispiel: „Land A hat ungefähr doppelt so viele Einwohner als Land B“, dann reicht eine entsprechend einfache Text-Alternative.
• Veranschaulicht das Diagramm aber ein Zahlenwerk und die Zahlen sind wichtig, dann sollten die Zahlen irgendwo auch als Text-Alternative angegeben werden.

Soll eine lange Text-Alternative nicht als Teil des Webseitentexts dargestellt werden, besteht auch die Möglichkeit die lange Beschreibung als zusätzliche Webseite anzulegen und diese zu verlinken.

Dekorative Bilder ohne Information

Es kann auch vorkommen, dass ein Bild keinerlei Information enthält und ausschließlich einen dekorativen Charakter besitzt.

Hier kommt nun eine Eigenart der Zusammenarbeit von Screenreader und Quellcode der Webseite zum Tragen. Wird bei einem Bild kein Alternativtext angegeben (das Bild hat also kein alt-Attribut im Quelltext) liest der Screenreader meist den Dateinamen des Bildes vor, da davon ausgegangen wird, dass lediglich vergessen wurde das Bild zu beschreiben und der Dateiname möglicherweise Rückschlüsse auf den Inhalt oder Zweck des Bildes zulässt. Dieses Vorgehen ist natürlich für Nutzer*innen sehr irritierend und nicht verständlich.

<img src="deko0815.jpg">

Wird im Quelltext der Seite aber das alt-Attribut verwendet und leer gelassen, dann bedeutet dies für den Screenreader, dass dieses Bild hat keine Information besitzt und deshalb nichts vorgelesen werden muss.

<img src="deko0815.jpg" alt="">

Da wir davon ausgehen, dass Sie ein Content-Management-System (CMS) einsetzen und den Quellcode nicht von Hand bearbeiten, sollte Ihr System ein vorgegebenes Verfahren anbieten, um leere Alternativtexte zu erzeugen.

In manchen Systemen, kann hierzu beim Einfügen eines Bildes explizit eine Option ausgewählt werden, dass dieses Bild keinen Alternativtext benötigt. Manchmal muss aber auch in das Textfeld für den Alternativtext genau ein einzelnes Leerzeichen eingegeben werden.

Falls Sie nicht sicher sind, mit welcher Methode Sie leere Alternativtexte erzeugen, fragen Sie bitte die zuständigen IT-Expert*innen!

Stimmungsbilder

Wird ein Bild dazu eingesetzt, eine bestimmte Stimmung zu erzeugen, ist dies auch eine wichtige Information, die in der Text-Alternative auftauchen sollte. Auf einer Webseite mit einer Geschichte zu Halloween würde zum Beispiel eine Text-Alternative wie „Vorgarten mit Figuren aus Pappmache“ keine gruselige Stimmung erzeugen. Besser wäre etwa: „düsteres Foto eines Vorgartens mit gruseligen Skeletten“.

Schriftgrafiken

Eine Schriftgrafik ist eine Abbildung von Text, die als Grafik gespeichert wurde. Der Text liegt also technisch nicht als Text, sondern nur als Bild vor. Ein Screenreader kann in der Regel, nicht auf solche Texte zugreifen und diese also auch nicht vorlesen.

Hier ist es wichtig, dass der Text aus der Grafik möglichst vollständig im Alternativtext angegeben wird. Solche Schriftgrafiken finden Sie häufig als Logos, Marketing-Claims oder als andere Hervorhebungen.

Beispiel einer Schriftgrafik:

Text-Alternative: Umsetzungsfrist: 28. Juli 2025

Icons und Symbole

Viele Icons und Symbole werden in einem übertragenen Sinne verwendet. Sie habe also nicht vollständig dieselbe Bedeutung wie die dargestellte Abbildung. Entsprechend sollte hier die Text-Alternative nicht das Symbol selbst beschreiben, sondern dessen übertragene Bedeutung.

Im folgenden Beispiel werden zwei Symbole verwendet. beide werden im übertragenen Sinne verwendet. Der Briefumschlag bedeutet hier zum Beispiel nicht „Brief“ oder „Briefumschlag“, sondern hat richtigerweise den Alternativtext „E-Mail“.

Grafische Links oder Schaltflächen

Die letzten Spezialfälle, die hier betrachtet werden sollen, sind Bilder die als Link oder als Schaltfläche dienen.

Wird ein Bild wie im folgenden Beispiel als Link verwendet, sollte der Alternativtext nicht das Bild, sondern das Linkziel beschreiben.

Beispiel: Verwendung eines Bildes als Link:

Text-Alternative: zur Homepage des Projekts Teilhabe 4 Punkt 0

Dasselbe gilt für grafische Schaltflächen, bei denen durch Anklicken eine Aktion ausgelöst wird. Hier sollte auch die Aktion in der Text-Alternative beschrieben werden und nicht die Grafik selbst. Ein Zahnrad-Symbol könnte zum Beispiel die Text-Alternative „zu den Einstellungen“ haben und das Papierkorb-Symbol die Alternative „Löschen“.

Weiterführende Informationen zu Text-Alternativen für Bilder

• W3C-Tipps für sinnvolle Text-Alternativen: W3C Writing for Accessibility
• Leitlinien für die Bildbeschreibung des National Center for Accessible Media (NCAM): Image Description Guidelines
• Leitfaden Text-Alternativen von WebAIM (Web Accessibility In Mind): WebAIM: Alternative Text
• Entscheidungsbaum für Text-Alternativen: Alt Decision Tree
• Von den Kompetenzzentren Selbstbestimmt Leben NRW (KSL NRW) bereitgestelltes Schema zum Erstellen von Alternativtexten
• Artikel „Bildbeschreibungen von Bildern im www – Mehr als nur eine lästige Pflicht“ zum Global Accessibility Awareness Day (GAAD) 2023
• Einige Überlegungen zum Einsatz von Künstlicher Intelligenz beim automatischen Erzeugen von Alternativtexten:
  • Netzpolitik.org: „Das nächste große Ding für digitale Zugänglichkeit?“
  • Artikel „Barrierefreiheit und künstliche Intelligenz.“ zum Global Accessibility Awareness Day (GAAD) 2023

Text-Alternativen in der Check-Artikel-App

Sie haben Ihren Online-Artikel bereits geschrieben und Sie wollen überprüfen, ob Sie an alles gedacht haben? Einen Abschnitt zur „Verwendung von Text-Alternativen“ finden Sie auch in unserer Check-Artikel-App.

In vielen Redaktionen gibt es interne Redaktionsleitfäden. Diese dienen der Qualitätssicherung, wenn Texte durch unterschiedliche Redakteur*innen erstellt werden und beinhalten Regeln, die für Mitglieder des Teams verbindlich sind.

Nicht-diskriminierende Sprache verwenden

Berücksichtigen Sie ebenfalls die Richtlinien zur Verwendung einer nicht-diskriminierenden Sprache. Begriffe, wie „leidend“, „an den Rollstuhl gefesselt“ oder „taubstumm“ sollten vermieden werden, ebenso Floskeln und Klischees, die Menschen mit Behinderungen als diskriminierend empfinden, wie zum Beispiel Darstellung als „Opfer“ oder ebenso als „tapfere Helden“. Der Mensch mit Behinderungen und seine Stärken müssen in den Vordergrund gestellt werden und nicht ein defizitorientiertes Bild.

Gendern

Eine gendergerechte Sprache zu verwenden, konnte bisher beispielsweise für Menschen, die eine Sprachausgabe nutzen, eine Barriere darstellen. Damit dies zukünftig keine Barriere darstellt, hat die Überwachungsstelle des Bundes für barrierefreie Informationstechnik (BFIT) gemeinsam mit den Selbsthilfeverbänden von Menschen mit Behinderungen eine Studie dazu durchgeführt, welche Methode des Genderns die wenigsten Probleme bereitet. Eine einheitliche Vorgehensweise bietet hierbei Vorteile für die meisten Nutzer*innen.

Die Ergebnisse der Studie wurden in der BFIT-Empfehlung zusammengefasst.

Weiterführende Informationen zur Barrierefreiheit

Sie finden weitere Hinweise zur Barrierefreiheit für Web-Redakteure in Leitfäden mit unterschiedlichen Schwerpunkten:

• Falls Sie selbst eine Schulung für Web-Redakteure planen, nutzen Sie unsere Teilhabe 4.0-Schulungsmaterialien für Trainer*innen:
  • Videos und Präsentationen in der Stufe „Basis“ ohne Anmeldung frei verfügbar im Schulungsportal
  • Handouts und Leitfäden nach Registrierung als Trainer*in kostenfrei Handout „Leitfaden für Online-Redakteure“ im Downloadbereich
• Materialien des World Wide Web-Consortiums (W3C) in englischer Sprache:
  • W3C-Leitfaden „Writing for Web Accessibility“, Basis
  • W3C-Ressourcen für Web-Redakteure
• Leitfäden, die neben dem Verfassen von Texten auch aufwändigere Online-Redaktionstätigkeiten umfassen, wie das Erstellen von Tabellen, Formularen oder Multimedia:
  • Leitfaden des Projekts „BIK für Alle“: Webinhalte barrierefrei pflegen – ein Leitfaden für Online-Redakteure
  • Hinweise für eine „Barrierefreie Redaktion“ der Bundesfachstelle Barrierefreiheit
  • Amerikanischer Leitfaden „Best Practices for Writing for the Accessible Web“
  • Leitfaden der Arizona State University „Writing accessible content“
  • Umsetzungshilfen in Form von Checklisten und Erklärvideos im Portal „Barrierefreiheit der Dienstekonsolidierung des Bundes“
  • Checklisten der Landesfachstelle für Barrierefreiheit Sachsen-Anhalt