Wer die Inhalte einer Website pflegt, kommt zwangsläufig mit Alternativtexten für Bilder in Berührung. Muss man diese ALT-Texte überhaupt beachten? Wie nutzt man sie optimal? In diesem Artikel haben wir zusammengefasst, was Sie als Content Manager über ALT-Texte wissen müssen.
Wo ALT-Texte wichtig sind
Wovon reden wir hier überhaupt? Ein ALT-Text beschreibt den Inhalt eines Bildes auf einer Website. Im Gegensatz zu einer Bildlegende wird der ALT-Text aber nicht neben dem Bild angezeigt, sondern statt des Bildes – nämlich dann, wenn das Bild nicht sichtbar ist.
Wann kann eine solche Situation eintreten?
- Bei sehr langsamen Internet-Verbindungen sieht man als Benutzer zuerst nur den Text einer Webseite, während die Bilder Stück für Stück nachgeladen werden. Hierzulande erlebt man dies glücklicherweise nur noch selten, aber es gibt noch immer viele Menschen auf dieser Welt, welche mit einer geringen Bandbreite auskommen müssen. In diesem Fall ist es ungemein hilfreich, wenn man bereits anhand des ALT-Textes versteht, was das noch fehlende Bild zeigen würde.
- Blinde sowie Menschen mit einer starken Sehbehinderung nutzen keinen Bildschirm, sondern eine Screenreader-Software oder eine Braille-Zeile. Screenreader und Braille-Zeilen können mit Bildern nichts anfangen; sie können aber die ALT-Texte von Bildern vorlesen bzw. darstellen. Deshalb werden ALT-Text oft nur im Zusammenhang mit barrierefreien Websites diskutiert – was keineswegs der einzige Nutzen von ALT-Texten ist.
- Der Google-Bot kann ebenfalls nur Texte verarbeiten, aber keine Bilder. Indem man ein Bild mit einem ALT-Text versieht, verbessert man die Auffindbarkeit der eigenen Website über die Google-Suche.
- Bei E-Mails im HTML-Format sind Bilder nicht im E-Mail selbst enthalten, sondern sie werden bei Bedarf von einem Server nachgeladen. Dieses Verhalten nutzen viele Absender, um zu überprüfen, ob eine E-Mail vom Empfänger geöffnet wurde. Weil aber diese Form des Trackings von vielen Menschen als unangenehm empfunden wird, unterbinden die meisten E-Mail-Programme das Laden der Bilder standardmässig. Und solange die Bilder nicht geladen sind, erscheinen an ihrer Stelle die ALT-Texte. Wer Newsletters verschickt tut deshalb gut daran, die ALT-Texte konsequent zu befüllen, damit eine Botschaft auch dann ankommt, wenn der Empfänger die Bilder nicht lädt.
- Werden Bilder auf dem Webserver umbenannt, verschoben oder gelöscht, dann werden sie von Webseiten und Newsletters nicht mehr gefunden. In einem solchen Fall sieht der Benutzer dann nur noch ein «Broken Image» Icon – und eben den ALT-Text.
Halten wir also fest: Es gibt verschiedenste Situationen, in denen ALT-Texte eine wichtige Rolle spielen. Sie konsequent zu pflegen ist also ein absolutes Muss.
ALT-Tag, ALT-Attribut oder ALT-Text?
Oft hört man den Begriff ALT-Tag, wenn es um Alternativtexte für Bilder geht. Das klingt zwar cool, ist aber streng genommen falsch, denn ein HTML-Tag dieses Namens existiert nicht. Es gibt nur das IMG-Tag für Bilder, welches ein Attribut namens ALT besitzt. Und das, was wir in das ALT-Attribut schreiben, ist dann der ALT-Text.
<img src="apples_pears.jpeg" alt="Äpfel und Birnen">Was einen guten ALT-Text ausmacht
Ein ALT-Text soll in knapper Form beschreiben, was in einem Bild zu sehen ist. Das klingt logisch, wird in der Praxis aber oft nicht eingehalten – und zwar in vielerlei Hinsicht.
Bei den Websites unserer Kunden sehen wir zwei Extreme: Entweder werden ALT-Texte komplett vernachlässigt – oder sie sind viel zu ausführlich. Es gibt zwar keine Maximallänge, aber ALT-Texte mit mehr als 150 Zeichen sind meist unnötig und wenig hilfreich. Falls dies einmal nicht ausreicht – beispielsweise wenn ein komplexes Diagramm beschrieben werden muss –, dann gibt es alternative Methoden, um diese Informationen unterzubringen (vgl. Kasten).
Wie lange muss bzw. darf ein ALT-Text sein?
Rein technisch gibt es weder eine Unter- noch eine Obergrenze. Das ALT-Attribut darf leer sein, es darf aber auch umfangreiche Texte enthalten. Weder in der HTML-Spezifikation noch in den Web Content Accessibility Guidelines (WCAG) ist eine fixe Obergrenze definiert. Der W3C Markup Validation Service beurteilt eine Webpage selbst dann noch als valide, wenn sie einen ALT-Text mit 1’000 Zeichen enthält.
Aus Sicht der Barrierefreiheit (Accessibility) gilt die allgemeine Regel: ALT-Texte sollen so kurz wie möglich, aber so lang wie nötig sein. Wer auf einen Screenreader oder eine Braille-Zeile angewiesen ist, bevorzugt generell knappe Texte, weil das Lesen mit dem Ohr bzw. mit der Fingerkuppe langsamer geht als mit den Augen. Man könnte auch argumentieren, dass ein ALT-Text idealerweise auf eine Braille-Zeile passt – je nach Modell wären das 40 bis 80 Zeichen.
Auf der anderen Seite muss die Beschreibung so ausführlich sein, dass sie sehbehinderten Menschen alle relevanten Informationen vermittelt, die im Bild enthalten sind. Der ALT-Text für ein Logo ist mit «Mustermann AG Logo» sicher ausreichend. Das berühmte Foto jenes Mannes, der sich während der Proteste auf dem Tiananmen-Platz ganz allein einer Panzerkolonne entgegenstellte (Tank Man), braucht hingegen eine ausführlichere Beschreibung als nur «Mann vor Panzer». Und wenn es sich gar um eine komplexe Grafik handelt (z.B. eine Organisationsstruktur oder ein statistisches Diagramm), dann ist unter Umständen noch mehr Text nötig. Allerdings müssen derart lange Bildbeschreibungen nicht zwingend im ALT-Attribut des IMG-Tags stehen – die Web Accessibility Initiative (WAI) beschreibt in diesem Tutorial verschiedene Alternativmethoden.
Aus Sicht der Suchmaschinen-Optimierung gibt es ebenfalls keine minimale oder maximale Zeichenzahl. Bei rein dekorativen Bildern sollte das ALT-Attribut leer bleiben – allerdings aus Gründen der Barrierefreiheit, nicht aus Gründen der Suchmaschinen-Optimierung. Ansonsten ist es gängige SEO-Praxis, ALT-Texte für sämtliche Bilder zu erstellen und dabei passende Keywords einzuarbeiten.
Über die konkrete Länge dieser Texte sagt Google nichts. Gemäss dem offiziellen SEO-Leitfaden soll im ALT-Attribut einfach ein «kurzer, aber beschreibender Text» platziert werden. Andernorts in der Google-Dokumentation steht zudem: «Das wichtigste Ziel beim Verfassen deines Alt-Textes sind nützliche, informative Inhalte mit passenden Keywords, die sich auf den Seiteninhalt beziehen. Überlade alt-Attribute nicht mit Keywords […], da dies nicht nutzerfreundlich ist und schnell dazu führen kann, dass deine Website als Spam eingestuft wird.» (Quelle).
Fazit: Alle Zahlen, die über die Länge von ALT-Texten kursieren, sind als Faustregel bzw. Grössenordnung zu verstehen. Viel wichtiger als die Zeichenzahl ist, dass ALT-Texte knapp, aber hilfreich sind – darin stimmen die Empfehlungen von WAI und Google überein.
Zudem sind ALT-Texte oft unpräzise. Ein Foto, das Donald Trump im Oval Office zeigt, wird durch «Mann im Büro», «US-Präsident» oder «Trump bei der Arbeit» zwar richtig, aber unvollständig beschrieben. Ziel muss es immer sein, alle relevanten Informationen zu vermitteln, die in einem Bild stecken.
Allerdings gibt es auch das Gegenteil, nämlich übervollständige ALT-Texte. «Der US-Präsident Donald Trump sitzt in seinem Schreibtisch im Oval Office im Weissen Haus in Washington D.C.» ist zwar alles andere als unpräzise. Aber weder dass Trump US-Präsident ist noch dass sich das Oval Office im Weissen Haus und jenes in Washington D.C. befindet, ist aus dem Foto ersichtlich. Das sind zusätzliche Informationen, und diese gehören nicht in einen ALT-Text.
Der häufigste Fehler bei ALT-Texten besteht allerdings darin, sie wie Bildlegenden zu behandeln. Ein ALT-Text beschreibt ein Bild, eine Bildlegende ergänzt es.
Nehmen wir als Beispiel das Foto eines Sonnenuntergangs am Strand mit der folgenden Legende: «Ein Erlebnis, auf das viele Schweizer im Jahr 2020 wegen dem Corona-Virus verzichten müssen: Mehr als die Hälfte der Bevölkerung macht Ferien in der Heimat.». Ein ALT-Text wie «Keine Auslandsferien für Schweizer wegen Corona» wäre hier völlig sinnlos, weil wir immer noch nicht wüssten, ob das Bild nun den Markusplatz in Venedig, eine Safari in Kenia oder eben das Meer zeigt. Ein guter ALT-Text würde in diesem Fall schlicht und einfach lauten: «Sonnenuntergang am Strand».
Wenig hilfreich ist es auch, möglichst viele SEO-Keywords in einem ALT-Text unterbringen zu wollen. Falls der Bildinhalt zu einem einzelnen Keyword passt, dann ist dagegen nichts einzuwenden. Aber Keyword Stuffing in ALT-Texten wird von Google schnell durchschaut, und wenn Menschen solche Texte lesen müssen, haben sie auch keine Freude.
Grundsätzlich sollten Sie jedes Bild mit einem ALT-Text versehen – ausser Bilder, die entweder rein dekorative Zwecke erfüllen oder gar nicht sichtbar sind (wie die transparenten Spacer-GIFs). Hier sollte das ALT-Attribut aber nicht ganz weggelassen, sondern als leer gekennzeichnet werden:
<img src="spacer.gif" alt="">ALT-Texte testen
Wie können Sie überprüfen, ob Ihre ALT-Texte gelungen sind? Ganz einfach: Indem Sie die Bildanzeige im Browser deaktivieren und dann jemand anders bitten, anhand der ALT-Texte die fehlenden Bilder zu beschreiben. Auf diese Weise merken Sie sehr schnell, ob im ALT-Texte entscheidende Informationen fehlen.
Die Anzeige von Bildern kann man in den meisten Browsern direkt in den Einstellungen abschalten. Zudem gibt es Extensions wie beispielsweise die Web Developer Tools, welche das Ausblenden der Bilder nochmals ein bisschen einfacher machen.
Diese Methode ist übrigens auch hilfreich, um fehlenden ALT-Texte auf einzelnen Seiten zu erkennen. Um die ALT-Texte auf einer ganzen Website systematisch zu prüfen, sind dagegen SEO-Tools effizienter.
Unsere SEO-Dienstleistungen
Wird Ihre Website über die Google-Suche gefunden?
Wir analysieren Ihr Google Ranking basierend auf geeigneten SEO Keywords und erarbeiten einen Massnahmenplan für die Suchmaschinen-Optimierung Ihrer Website. Gerne unterstützen wir Sie auch bei der Umsetzung dieser Massnahmen.