In diesem Beitrag erfährst du, was genau diese Alt-Texte eigentlich sind und warum du sie verwenden solltest. Außerdem beleuchten wir ihre unterschiedlichen Funktionen und geben hilfreiche Tipps, wie dir das Schreiben guter Alt-Texte gelingt und was es zu beachten gilt!
Was genau sind Alt-Texte?
Ein Alt-Text beschreibt ein Bild auf einer Webseite und ermöglicht Blinden und Sehbehinderten, visuelle Inhalte zu konsumieren. Im Gegensatz zu Bildern kann Text von jeder Software ausgelesen werden.
Ein Alt-Text wird im Code der Website beim Bild hinterlegt und ist normalerweise unsichtbar. In diesem Artikel zeigen wir dir die Alt-Texte allerdings auch in den Bildunterschriften, damit du sie ebenfalls sehen kannst.
Als Redakteur:in findest du in deinem CMS meist ein Feld beim Bild, um den Alternativtext zu befüllen. Je nach Plattform können die Methoden variieren.
Der Unterschied zur Bildunterschrift
Alt-Texte und Bildunterschriften sind nicht dasselbe. Bildunterschriften sind für alle sichtbar und liefern Informationen, die nicht direkt aus dem Bild hervorgehen wie zum Beispiel Copyright-Hinweise. Sie ergänzen das Bild. Alt-Texte hingegen sind eine Alternative zum Bild speziell für Menschen mit Sehbehinderung und enthalten nur das, was auf dem Bild zu sehen ist.
Alt-Texte und Bildunterschriften sollten somit unterschiedlichen Inhalt haben. Ausnahme sind da Fotos von Personen. Für den Alternativtext ist in den meisten Fällen der Name der Personen am Foto ausreichend. Sehende brauchen ebenfalls den Namen der Person, doch dafür kann die Bildunterschrift genutzt werden.
Warum sind Alt-Texte wichtig?
1. Barrierefreiheit
Menschen mit Sehbehinderung nutzen spezielle Software, um Fotos und Grafiken auf Webseiten erkennen zu lassen. Ein Screenreader, der zu solchen Hilfsmitteln zählt, liest die Alternativtexte vor. Alternativ gibt er sie an eine Braillezeile weiter und der Text kann ertastet werden.
Fehlen Alt-Texte, kann der Bildinhalt nicht an Blinde und Sehbehinderte kommuniziert werden. Abbildungen werden dann übersprungen und wertvolle Informationen werden nicht wahrgenommen.
Tipp!
Alt-Texte sind auch hilfreich, wenn die Internetverbindung langsam ist und die Bildanzeige nicht sofort funktioniert. Dann wird das Alt-Attribut anstelle des Bildes angezeigt.
2. Google-Bildsuche
Suchmaschinen wie Google nutzen Alt-Texte, um den Inhalt einer Webseite besser zu verstehen. Alt-Tags verbessern also nicht nur die Barrierefreiheit, sondern sind auch wichtig für die Suchmaschinenoptimierung (SEO). Alt-Texte helfen, dass Bilder in der Google-Bildersuche besser gefunden werden. Ohne sie erscheinen deine Bilder in den Suchergebnissen oft gar nicht oder nur sehr weit unten.
Arten von Bildern
Bilder auf einer Website lassen sich in vier Arten unterteilen:
1. Dekorative Bilder
Der Alt-Text bleibt leer, wenn Abbildungen ausschließlich zur Deko dienen und keine zusätzliche Information vermitteln. Screenreader wissen so, dass sie das Bild ignorieren können.
Beispiele für dekorative Bilder sind Icons neben Text, wie ein Briefumschlag neben einem Newsletter-Link, oder Trennlinien. Diese Bilder benötigen keinen Alt-Text, da sie keine zusätzliche Information für blinde und sehbehinderte Menschen liefern. Dekorative Grafiken kommen aber in der Regel nur selten vor.
Tipp!
Um festzustellen, ob ein Bild dekorativ ist oder nicht, frag dich, ob du es erwähnen würdest, wenn du jemandem am Telefon die Webseite beschreibst. Wenn ja, braucht es einen Alt-Text!
Fragst du dich, ob Alt-Texte in diesen Fällen wirklich nötig sind oder sogar stören? Die Antwort ist nein! Blinde oder sehbehinderte Menschen sollten selbst entscheiden können, ob sie sich Alt-Texte anhören möchten. Sind Alt-Texte für sie uninteressant, können sie diese einfach überspringen.
2. Informative Bilder
Ein Großteil von Abbildungen hat eine informative Rolle. Durch diese erhältst du Wissen, das du sonst nicht hättest. Der Inhalt und die Länge des Alt-Textes hängt vom Kontext ab.
Wenn die Informationen bereits im Fließtext enthalten sind, müssen sie im Alt-Text nicht wiederholt werden. Dann sollte im Alt-Text nur gesagt werden, dass die Beschreibung im Fließtext zu finden ist. Schauen wir uns nun an, wie der Kontext die Beschreibung von Bildern beeinflusst.
Beispiel 1: Bild ohne speziellen Kontext
Ein Bild zeigt einen geparkten, schwarzen Oldtimer auf einer verlassenen Straße. Ohne spezifischen Kontext könnte ein passender Alt-Text sein:
Alt-Text: „Seitenansicht eines geparkten, schwarzen Oldtimers auf einer verlassenen Straße.“
Hier sind weitere Details wie Büsche am Straßenrand oder der gelbe Streifen auf der Unterseite des Autos nicht notwendig, da sie nicht die Hauptinformationen sind.
Beispiel 2: Bild im Kontext eines Zeitschriftenartikels
Das gleiche Bild könnte in einem Artikel über eine bevorstehende Oldtimer-Messe erscheinen. Hier wird das Auto im Text genauer beschrieben:
Alt-Text: „Oldtimer der Marke XY auf Straße.“
In diesem Fall ist der Alt-Text kürzer, weil der Text bereits die nötigen Details enthält. Das Bild ergänzt.
Beispiel 3: Bild vermittelt Emotion
Das Bild könnte auch dazu dienen, eine bestimmte Emotion zu vermitteln, unabhängig vom genauen Modell. Die Firma möchte damit ihre Unternehmensphilosophie betonen:
Alt-Text: „Uns ist Tradition und Handwerkskunst wichtig“
3. Funktionale Bilder
Mit diesen Grafiken kann die Website bedient werden. Daher liegt der Fokus auf der Beschreibung des Zweck des Elements. Was auf dem Bild gezeigt wird, ist weniger wichtig.
Beispiel 1: Lupe, um Suchfunktion anzuzeigen
In den Alt-Text kommt die Funktion, aber die Beschreibung der Lupe ist nicht nötig.
Beispiel 2: Social Media Icon verlinkt auf Social-Media-Kanal des Unternehmens
Auch hier beschreibt der Alt-Text, was der Button tut, ohne das Aussehen des Logos zu erwähnen.
4. Komplexe Bilder
Komplexe Bilder wie Diagramme oder Tabellen benötigen detaillierte Beschreibungen, die oft zu lang für Alt-Texte sind. Eine mögliche Alt-Beschreibung eines Balkendiagramms wäre: „Balkendiagramm: Nutzungsverhalten von Social-Media-Plattformen“. Eine genaue Erklärung des Diagramms wäre hier oft zu lang. Ergänze daher im Alt-Text, wo die ausführliche Beschreibung zu finden ist.
Tipps für gute Alt-Texte
Bevor du einen Alt-Text schreibst, frage dich:
- Wie wichtig die Grafik für das Verständnis der Webseite?
- Was wäre die Folge, wenn Bilddateien nicht geladen werden?
- Was ginge, ohne Verwendung eines Alt-Attributs, für eine sehbehinderte Person verloren?
- Welchen Zweck erfüllt das Bild?
1. Kurz und präzise
Der Leitsatz lautet: So knapp wie möglich, aber so ausführlich wie nötig!
Blinde und Sehbehinderte brauchen ausreichend Informationen, um nachzuvollziehen, warum ein Bild an dieser Stelle eingefügt wurde. Dabei ist aber nicht jedes noch so kleine Detail wichtig.
Versuche, den Alt-Text unter 80 Zeichen zu halten, indem du auf Füllwörter und unnötige Artikel verzichtest. Das hat auch technische Gründe: Braillezeilen sind meist zwischen 40 und 80 Zeichen lang. Ist der Alt-Text zu lang, könnte er in der Braillezeile abgeschnitten werden und schwer einer Grafik zuzuordnen sein.
2. Einfache Sprache verwenden
Schreibe Alt-Texte nicht nur kurz und prägant, sondern verwende auch eine einfache und leicht verständliche Sprache. Bleibe im Tonfall genauso natürlich wie in den restlichen Texten deiner Website.
3. Bild im Kontext beschreiben
Achte darauf, dass der Alt-Text zum Kontext passt, in dem das Bild erscheint und sinnvoll interpretiert werden kann!
Bilder kommunizieren oft einen zusätzlichen Inhalt und haben eine symbolische Funktion. Alle nötigen Informationen, um das Bild richtig zu verstehen, sollten vorhanden sein.
4. Keine Interpretationen
Alt-Texte sollen beschreiben. Darum solltest du Interpretationen so gut es geht vermeiden.
Ähnliches gilt für das Aussehen von Personen, das du nur erwähnen solltest, wenn es relevant ist. Bei Themen wie „Diversität am Arbeitsplatz“ kann die Ethnie wichtig sein, während sie bei „Vegetarisches Angebot in der Bürokantine“ keine Rolle spielt.
Wenn die Grafik eine eindeutige Reaktion oder Emotion, etwa Mitleid, hervorrufen soll, sind subjektive Einschätzungen in Ordnung. Damit ist jedoch wirklich zu sparen!
5. Texte im Bild beschreiben
Wenn das Bild Text enthält, muss dieser Text auch im Alt-Text erscheinen. Das ist häufig bei Logos der Fall.
Zusatz-Tipp!
Wenn das Logo mit der Website des Unternehmens verlinkt ist, dann beschreibe diese Funktion im Alt-Text: Website datenwerk | Team Farner
6. Ausrichtung der Elemente beschreiben
Beschreibe auch, wie die einzelnen Elemente eines Bildes zueinander ausgerichtet sind. Hier ein Beispiel dafür:
7. Sparsam mit Keywords umgehen
Keywords in Artikeln und Alt-Texten sind wichtig für die Sichtbarkeit in Suchmaschinen, aber übertreibe es nicht. Die SEO sollte nicht über der Barrierefreiheit stehen. Der Hauptzweck von Alt-Texten ist, Bilder für alle zugänglich zu machen.
Zu viele Keywords können sich sogar negativ auswirken, denn Google stuft Websites als Spam ein, wenn die Alt-Texte mit unpassenden Schlüsselbegriffen zu vollgestopft sind. Dasselbe gilt für Alt-Attribute, die mit dem Bild oder dem umliegenden Text nichts zu tun haben.
8. „Bild von …“ vermeiden
Den Alt-Text mit „Bild von …“ oder „Abbildung von …“ zu starten, ist nicht notwendig. Screenreader geben automatisch den Hinweis, dass es sich um ein Bild handelt.
9. Korrekte Zeichensetzung
Korrekte Rechtschreibung und Zeichensetzung sind wichtig. Vermeide Anführungszeichen, Links oder Emojis im Alt-Text. Prüfe auch die Rechtschreibung des Alt-Textes bevor du ihn beim Bild hinterlegst.
10. Bilder in Social-Media beschreiben
Du hast einen Social-Media-Kanal? Hinterlege auch dort Alt-Texte bei deinen Bildern. Die meisten Plattformen liefern dazu eigene Felder. Du kannst die Bildbeschreibung aber auch einfach am Ende deines Posts setzen. Für Details schau doch in unserem ultimativen Social-Media-Guide nach.
Sonderfälle
Unbeschreibbare Bilder
Theoretisch lassen sich alle Bilder beschreiben, aber in der Praxis ist das oft nicht sinnvoll. Komplexe Grafiken wie Landkarten oder Baupläne sind meist sehr detailliert. Sie richten sich hauptsächlich an Fachkräfte. Solche Inhalte wären auch für sehende Personen ohne spezielles Fachwissen schwer verständlich.
Diese Abbildungen können beschrieben werden, indem man nur die Grundrisse eines Bauplans nennt oder das Bild schrittweise erklärt. Bei einigen Blinden ist das räumliche Vorstellungsvermögen jedoch nicht gut genug ausgeprägt, als dass dies eine Option wäre.
Bildergalerien
Eine Gruppe von Bildern sollte auch für Screenreader als solche erkannt werden können. Als Redakteur:in kannst du in einer Überschrift oder einleitenden Satz sagen, worum es in der Bildergalerie geht.
Die Beschreibung einzelner Bilder kann nützlich sein, z. B. bei Produktgalerien ohne weitere Details. Es ist hilfreich zu wissen, ob ein Foto die Vorder- oder Rückseite eines T-Shirts zeigt oder wie das Muster aussieht, etwa „rot-grün kariert“.
Häufig können Bilder einer Galerie per Klick auf das Bild vergrößert dargestellt werden. Das Bild hat dann eine Funktion. Beschreibe also im Alt-Text, das per Klick das Bild in einer vergrößerten Version geöffnet wird. Die Beschreibung des Bildinhalt kann, falls notwendig, in diesem Fall in der Bildunterschrift erfolgen.
Grafische Emoticons
Sind Emojis für das Verständnis des Textes relevant, musst du sie beschreiben. Das trifft z. B. auf ein zwinkerndes Smiley zu, um zu verdeutlichen, dass die Aussage ironisch gemeint ist. Emojis, die im Unicode-Standard enthalten sind, benötigen keinen Alt-Tag, da Screenreader diese standardmäßig mit Beschreibung vorlesen.
Fazit
Die Bedeutung von Alt-Texten ist groß. Sie sind entscheidend für Barrierefreiheit und verbessern die SEO. Weiters helfen sie, Inhalte inklusiv zu gestalten und sollten immer passend zum Kontext des Bildes sein. Halte deine Alt-Texte kurz, präzise und bleibe objektiv, dann bist du auf der sicheren und vor allem barrierefreien Seite.
Brauchst du noch Unterstützung bei deiner Website oder App? Schreib uns und die Expert:innen bei datenwerk helfen dir sicher weiter!