Wie schreibe ich gute Alt-Texte?

Wozu Alt-Texte da sind

Ein Alt-Text ist der Text, der statt eines Bildes vorgelesen oder angezeigt wird. Ein blinder Besucher hört ihn über seinen Screenreader, ein Besucher mit schlechter Verbindung sieht ihn, wenn das Bild nicht lädt, und Suchmaschinen nutzen ihn, um zu verstehen, was auf dem Bild ist. Google nennt den Alt-Text das wichtigste Attribut, um einem Bild Informationen mitzugeben.

Für Betriebe, die unter das Barrierefreiheitsstärkungsgesetz fallen, sind passende Textalternativen außerdem Teil der Anforderungen. Ob das auf Sie zutrifft, erklärt der Ratgeber BFSG für Handwerker.

Die Grundregel: Was soll das Bild hier sagen?

Das W3C, das die Web-Standards herausgibt, hat einen Entscheidungsbaum für Alt-Texte veröffentlicht. Die wichtigsten Fälle:

Beispiele aus dem Handwerk

Referenzfoto

Schwach: „Bild1“ oder „Bad“. Besser: „Fertig saniertes Bad mit bodengleicher Dusche und grauen Großformatfliesen“. Steht direkt daneben schon „Badsanierung in Lübeck-St. Jürgen“, müssen Sie den Ort nicht wiederholen.

Teamfoto

Schwach: „Team“. Besser: „Meister Jan Beispiel mit zwei Gesellen vor dem Firmenwagen“. Namen gehören nur hinein, wenn sie für den Besucher eine Rolle spielen und die Personen einverstanden sind.

Logo in der Kopfzeile

Ist das Logo ein Link zur Startseite, beschreibt der Alt-Text das Ziel: „Elektro Beispiel – zur Startseite“. Das Wort „Logo“ hilft niemandem.

Telefon-Symbol neben der Nummer

Steht die Nummer als Text daneben, ist das Symbol dekorativ: alt bleibt leer. Ist das Symbol allein der Anruf-Button, braucht es einen Text wie „Jetzt anrufen“.

Die häufigsten Fehler

• Alt-Attribut fehlt ganz: Screenreader lesen dann oft den Dateinamen vor, etwa „IMG 4711 jpg“.
• Keyword-Listen wie „Dachdecker Dachdeckerei Dach Kiel Dachsanierung“ – Google nennt das ausdrücklich Keyword-Stuffing.
• „Bild von …“ oder „Foto von …“ am Anfang: Dass es ein Bild ist, sagt der Screenreader schon.
• Derselbe Alt-Text für alle Galeriebilder.
• Dekorative Bilder mit langem Text, die Screenreader-Nutzer durch Nebensächliches schicken.
• Wichtige Informationen nur im Bild, etwa Öffnungszeiten oder Preise als Grafik.

Sonderfälle auf Handwerker-Seiten

Vorher-nachher-Bilder

Hier ist der Vergleich die Information. Beschreiben Sie in beiden Bildern, was sich unterscheidet: „Vorher: Fassade mit abblätternder Farbe und Rissen“ und „Nachher: frisch gestrichene Fassade in Hellgrau mit neuen Fensterbänken“.

Galerien mit vielen ähnlichen Fotos

Nicht jedes Bild braucht einen Roman, aber jedes einen eigenen Text. Nennen Sie, was dieses Foto vom vorigen unterscheidet: Detail der Fuge, Blick in die Dusche, Armatur. Steht über der Galerie schon das Projekt, bleiben die einzelnen Texte kurz.

Eingebettete Karten und Videos

Eine Google-Karte ist kein Bild, sondern ein eingebetteter Rahmen (iframe). Er braucht ein title-Attribut wie „Anfahrt zu Elektro Beispiel auf Google Maps“. Schreiben Sie die Adresse außerdem als Text daneben, denn nicht jeder kann die Karte bedienen.

Länge und Stil

Es gibt keine feste Zeichengrenze. Bewährt hat sich ein knapper Satz oder Satzteil, meist unter 150 Zeichen; was länger erklärt werden muss, gehört in den sichtbaren Text oder eine Bildunterschrift. Schreiben Sie, wie Sie einem Kunden am Telefon das Bild beschreiben würden: konkret, ohne Werbesprache. Google gibt ein einfaches Beispiel: Statt „Welpe“ ist „Dalmatiner-Welpe spielt Apportieren“ der bessere Alt-Text.

Auch der Dateiname liefert laut Google leichte Hinweise. „bad-sanierung-dusche.jpg“ ist besser als „IMG00023.JPG“ – wichtiger bleibt aber der Alt-Text.

So gehen Sie vor

• Mit den Bildern auf Startseite und Leistungsseiten beginnen; dort sehen die meisten Besucher hin.
• Für jedes Bild entscheiden: informativ, funktional oder dekorativ?
• Im CMS das Feld „Alternativtext“ ausfüllen, nicht „Titel“ oder „Beschriftung“ – das sind andere Felder.
• Neue Bilder gleich beim Hochladen beschriften; nachträglich vergisst man es.
• Danach erneut prüfen lassen.

Was der Check findet – und was nicht

Bei 50 Bildern auf zehn Seiten fällt ein fehlender Alt-Text nicht auf. Der Barrierefreiheit prüfen-Bericht listet deshalb jedes Bild ohne alt-Attribut mit der betroffenen Seite auf und ergänzt die Ergebnisse von Google Lighthouse. Auch im SEO-Check zählen fehlende Alt-Texte, weil sie Suchmaschinen Informationen vorenthalten. Ob ein vorhandener Alt-Text inhaltlich passt, kann eine automatische Prüfung nicht beurteilen – das bleibt Handarbeit.

Wenn Sie Bilder und Texte überarbeiten lassen möchten, hilft die Webagentur Scherzinger (webagentur-scherzinger.com).