Layoutgeflüster: Warum unsere Bilder „Alt-Text“ brauchen  

„Alt-Text“ ist kein alter Text. Gemeint ist mit der Onliner-Fachvokabel nämlich Alternativ-Text, der anstelle eines Bildes erscheint. 3600 Fotos zeigt das Bildungsportal. Leider haben nur 930 davon, knapp ein Viertel also, einen Alt-Text. Und der ist nicht immer optimal.

Drei Gründe gibt es, wieso wir das verbessern sollten.

  • 1. Reserve-Info: Der Alt-Text erscheint, wenn die Grafikdatei nicht geladen werden kann – zum Beispiel, wenn der Browser muckt oder eine Verbindung mit zu kleiner Bandbreite besteht.
  • 2. Barrierefreiheit: Lese- und Sehbehinderte benutzen häufig Bildschirmleseprogramme, auch Screenreader genannt. Sie können Bilder aber nur „vorlesen“, wenn es Alt-Text gibt.
  • 3. Suchmaschinen: Google, Bing & Co. behandeln Bilder als hochwertigen Seiteninhalt. Nicht nur Text wird von ihren Crawlern erfasst, ausgelesen und indexiert – sondern auch alle Bilder und zugehöriger Alt-Text. Er unterstützt die Auffindbarkeit und Platzierung einer Seite in den Rangfolgen der Suchergebnislisten für Seitensuche und Bildersuche.

Was für ein Alt-Text soll es sein?

Ein Beispiel: Eine Redaktion wählte ein Pixabay-Foto einer Lötstation und fügte als Alt-Text ein: „Löten“. Das ist besser als nichts, aber allzu kurz. Informativer ist eine Beschreibung wie „Löten an der Lötstation: Mit Zinndraht und Lötkolben wird eine elektronische Platine bearbeitet.“

In der im Bilddatensatz hinterlegten Fundstelle („Link zum Werk“) ist zu sehen, welche Schlüsselbegriffe Pixabay beigefügt hatte: Löten, Lötstation, Zinn, Platine, Elektronik, Elektrotechnik, Technik, Stromkreis, Elektroniker, Leiterbahn.

Aber was ist mit dem Seiten-Kontext? Für sich genommen sagt eine präzise Bildbeschreibung nicht viel über die Seite, die das Bild verwendet. In diesem Fall drehte sich der Seitentext nicht ums Löten – sondern um den Technikunterricht. Eine Möglichkeit wäre: „Im Technikunterricht lernen Jugendliche das Löten einer Platine mit Zinndraht.“ (78 Zeichen). Ausführlicher: „Im Technikunterricht lernen Jugendliche an einer Lötstation, wie sie mit Zinndraht und Lötkolben Stromkreise auf einer elektronischen Platine herstellen.“ (153 Zeichen)

Das wäre auch eine ordentliche Bildunterschrift. Anders als ein Alt-Text wird eine BU jedoch immer angezeigt.

Dienen Fotos als Link, muss der Alt-Text das Linkziel angeben, also Seiten- oder Artikelname. „Hier klicken“ oder „Erfahren Sie mehr“ enthält keine Informationen, das ist also nicht zu empfehlen. Wenn ein Klick eine Aktion startet, etwa einen Download, muss der Alt-Text das ankündigen, zum Beispiel: „Laden Sie die Tabelle herunter.“

Anders als Fotos enthalten Schaubilder (Infografik, Diagramm, Organisationsplan, Karte) hoch verdichtete Detailinformationen. Der Alt-Text kann das nicht zusammenfassen. Die ausführliche Beschreibung der Grafik muss also in den Seitentext, vielleicht in ein Akkordeon zum Aufklappen.

Haben die Bilder unserer Seite schon Alt-Text?

Ohne ins Typo3-Backend zu steigen, lässt sich das mit kostenlosen Web-Werkzeugen überprüfen: URL eingeben und anzeigen lassen, wie die Alt-Texte lauten und wo sie fehlen. Ein Beispiel ist der Image Alt Text Checker von ContentForest: https://contentforest.com/tools/image-alt-checker

Was rät uns Google?

Über Google laufen in Deutschland 90 Prozent der Suchanfragen. Wer gefunden werden will, hört auf die Ansagen der Firma. Sie sagt, wofür sie den Alt-Text braucht: https://developers.google.com/search/docs/appearance/google-images?hl=de

„Google extrahiert Informationen zum Bildgegenstand aus dem Inhalt der Seite, einschließlich Bildbeschriftungen und ‑titeln“, heißt es da. „Das wichtigste Attribut bei der Bereitstellung weiterer Metadaten für ein Bild ist der Alt-Text (…) Google verwendet den Alt-Text zusammen mit Algorithmen für maschinelles Sehen und dem Inhalt der Seite, um das Thema des Bildes zu verstehen. Alt-Text in Bildern ist auch als Ankertext nützlich, wenn du ein Bild als Link verwendest.

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 (auch als überflüssige Keywords bezeichnet), da dies nicht nutzerfreundlich ist und schnell dazu führen kann, dass deine Website als Spam eingestuft wird.“

Wo gibt man Alt-Text ein?

In der Bilder-Eingabemaske, wo alle Metadaten eingefügt werden. Im Reiter „Allgemeines“ steht gleich unter der Bild-Voransicht ein Eingabeschlitz für „Alternativen Text“. Die Länge ist nicht begrenzt, aber schreiben Sie trotzdem kompakt und auf den Punkt. Die Maske erläutert: „Dieses Feld sollte nur für rein dekorative Bilder leer sein.“ Reine Schmuckfotos – ohne Informationsgehalt, ohne Zweck – gibt es im Bildungsportal jedoch kaum. Fast alle helfen beim Orientieren und Navigieren, sind ein Symbol für ein Thema, illustrieren Sachverhalte oder liefern visuellen Kontext zum Text.

Leer lassen sollten Sie den Alt-Text dann, wenn es schon eine gute „Beschreibung / Bildunterschrift“ gibt. Eine BU wird immer für alle angezeigt. Ein Alt-Text wäre doppelt, also unnütz.

, , , , , ,