Frau, deren Augen von einer zweiten Person mit den Händen verdeckt werden

ALT-Texte optimal nutzen – für Barrierefreiheit, Suchmaschinen-Optimierung und E-Mail Marketing

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?

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.

E-Mail Newsletter mit deaktivierten Bildern und ausführlichen ALT-Texten
Auch in E-Mail-Newsletters sind ALT-Texte wichtig. Derart ausführliche Texte wie in diesem SBB-Newsletter sind allerdings nicht unbedingt «Best Practice».

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.

Nach unserer Erfahrung sind ALT-Texte oft zu lang. Es gibt zwar keine klar definierte Maximallänge, aber viel mehr als 100 Zeichen sollten es nicht sein – das gilt sowohl für die Barrierefreiheit als auch für die Suchmaschinen-Optimierung. Falls dies einmal nicht ausreicht – beispielsweise wenn eine komplexe Grafik beschrieben werden muss –, dann kann man immer noch über das LONGDESC-Attribut auf eine ausführliche Bildbeschreibung verlinken.

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.

Dies ist der ALT-Text.
Dies ist die Bildlegende.

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.

Einstellungen von Google Chrome für die Anzeige von Bildern
In allen gängigen Browsern können Sie die Anzeige von Bildern zu Testzwecken deaktivieren.

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.

Screenshot von SE Ranking: Liste der Seiten mit fehlenden ALT-Texten
SEO-Tools wie beispielsweise SE Ranking zeigen fehlende ALT-Texte auf einer Website zuverlässig an.
Computer-Bildschirm mit der Website von SEOprofiler

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.