Alt-Text: so schreiben Sie gute Alternativtexte für Ihre Bilder

Kurz zusammengefasst

• Der Alt-Text steht im Attribut alt eines Bildes und ersetzt das Bild, wenn es nicht gesehen werden kann.
• Er beschreibt knapp, was auf dem Bild für die Seite wichtig ist, und kommt ohne Einleitung wie „Bild von“ aus.
• Rein dekorative Bilder bekommen ein leeres Attribut alt="". Das Attribut ganz wegzulassen ist ein Fehler.
• Gute Alternativtexte nützen der Bildersuche und der Barrierefreiheit. Schlagwortlisten schaden beidem.

Wofür der Alternativtext da ist

Im Quelltext hat jedes Bild ein Attribut mit dem Namen alt. Sein Text wird angezeigt, wenn das Bild nicht lädt, und er wird von Screenreadern vorgelesen, die blinde und sehbehinderte Menschen nutzen. Auch Suchmaschinen lesen ihn, um zu verstehen, was auf dem Bild zu sehen ist. Das Ziel ist einfach: Wer das Bild nicht sieht, soll dieselbe Information erhalten wie jemand, der es sieht.

In den Web Content Accessibility Guidelines (WCAG) gehört der Alternativtext zu den Grundanforderungen der Stufe A (Erfolgskriterium 1.1.1, Nicht-Text-Inhalt). Das Barrierefreiheitsstärkungsgesetz gilt seit dem 28. Juni 2025 für bestimmte Produkte und Dienstleistungen, darunter Angebote im elektronischen Geschäftsverkehr. Für Kleinstunternehmen, die Dienstleistungen anbieten, gibt es eine Ausnahme. Ob und wie weit eine bestimmte Website betroffen ist, hängt vom Einzelfall ab. Die Hinweise auf dieser Seite ersetzen keine Rechtsberatung. Sinnvoll sind gute Alternativtexte unabhängig davon.

So schreiben Sie einen guten Alt-Text

• Beschreiben Sie, was zu sehen ist und warum das Bild auf der Seite steht. Entscheidend ist die Aufgabe des Bildes im Zusammenhang.
• Fassen Sie sich kurz. Ein knapper Satz oder eine Wortgruppe genügt meist. Längere Erklärungen gehören in den sichtbaren Text.
• Verzichten Sie auf „Bild von“ oder „Foto zeigt“. Der Screenreader meldet ohnehin, dass es sich um ein Bild handelt.
• Steht Text im Bild, geben Sie ihn wieder. Besser ist es, den Text als echten Text auf die Seite zu setzen.
• Schreiben Sie natürlich. Ein Suchbegriff darf vorkommen, wenn er zur Beschreibung passt, aber nicht mehrfach hintereinander.

Beispiele aus Betrieben

Die Beispiele sind frei erfunden und stellen jeweils einen schwachen und einen besseren Text gegenüber.

Zahnarztpraxis

Ein Foto des Behandlungszimmers mit dem Alt-Text „Praxis Zahnarzt Zahnarztpraxis Behandlung“ ist eine bloße Wortkette. Besser: „Heller Behandlungsraum mit Behandlungsstuhl und Monitor“. Ein Teamfoto bekommt „Das Praxisteam vor dem Empfang“, wenn die Personen für die Seite wichtig sind.

Handwerksbetrieb

Das Foto eines fertigen Dachs mit dem Alt-Text „Dach“ sagt zu wenig. Besser: „Frisch gedecktes Satteldach mit zwei Gauben“. So erfährt auch jemand, der das Bild nicht sieht, was auf der Referenzseite gezeigt wird.

Friseursalon

Statt „Frisur“ beschreibt „Schulterlange Haare mit warmem Blond nach dem Färben“ konkret, was die Arbeit zeigt. Ein Foto der Schaufensterfront erhält „Eingang des Salons mit Schriftzug über der Tür“, wenn die Auffindbarkeit des Betriebs ein Thema der Seite ist.

Restaurant

Ein Gericht heißt nicht „Essen“, sondern „Teller mit gebratenem Fisch, Kartoffeln und Salat“. Schwieriger ist die Speisekarte als Bild. Der Alternativtext müsste dann die ganze Karte wiedergeben. Deshalb gehört sie besser als echter Text auf die Seite, der sich auch kopieren und vergrößern lässt.

Dekorative Bilder: alt="" statt weglassen

Nicht jedes Bild trägt Information. Eine Zierlinie, ein Muster oder ein Foto, das nur Stimmung schafft, muss ein Screenreader nicht vorlesen. Für solche Bilder setzen Sie ein leeres Attribut: alt="". Screenreader überspringen sie dann. Fehlt das Attribut ganz, lesen manche Programme stattdessen den Dateinamen vor, etwa IMG_4821.jpg. Der Unterschied zwischen leer und fehlend ist deshalb wichtig: Leer ist eine bewusste Entscheidung, fehlend ist ein Fehler.

Als Entscheidungshilfe hilft die Frage, ob dem Besucher etwas fehlen würde, wenn das Bild nicht da wäre. Lautet die Antwort nein, bleibt der Alternativtext leer.

Anders ist es bei Bildern mit Funktion. Ein Logo, das auf die Startseite verlinkt, braucht einen Alternativtext, der das Ziel nennt, etwa „Praxis Beispiel, zur Startseite“. Ein Telefonsymbol, das als Knopf dient, bekommt „Anrufen“. Hier beschreibt der Text die Funktion und nicht das Aussehen.

Alt-Text, SEO und Bildersuche

Google erklärt in den Hinweisen zu Bildern, dass nützlicher, informativer Alternativtext hilft, den Inhalt eines Bildes zu verstehen. Bei Bildern, die als Link dienen, ersetzt er den Linktext. Eine Abkürzung zu besseren Platzierungen ist er nicht. Wer in den Alternativtext Suchbegriffe stopft, betreibt Keyword-Stuffing. Google nennt das in seinen Spam-Richtlinien und rät bei Bildern ausdrücklich davon ab. Neben dem Alternativtext zählen auch der Dateiname, der umgebende Text und die Qualität des Bildes.

Besonders profitieren können Betriebe, die viele eigene Fotos zeigen, etwa Handwerker mit Referenzbildern oder Restaurants mit Speisen. Ob Ihre Bilder tatsächlich in der Bildersuche erscheinen, entscheidet Google. Zusagen kann dazu niemand etwas. Die Pflege der Alternativtexte kostet dagegen wenig, und sie lohnt sich wegen der Zugänglichkeit auf jeden Fall.

Typische Fehler bei Alternativtexten

• Der Dateiname steht als Alternativtext, etwa „DSC_0042“ oder „Bild1“. Er sagt weder Besuchern noch Suchmaschinen etwas.
• Alle Bilder einer Seite haben denselben Text, weil ein Plugin oder ein Baukasten ihn automatisch einfügt.
• Der Text wiederholt nur die Bildunterschrift. Dann liest ein Screenreader denselben Satz zweimal vor.
• Wichtige Bilder bleiben leer, weil das Feld beim Hochladen übersehen wurde.
• Der Text ist so lang, dass er wie ein Absatz klingt. Was erklärt werden muss, gehört in den sichtbaren Text neben dem Bild.

Alt-Texte eintragen und prüfen

Wo das Feld liegt, hängt vom System ab. In WordPress heißt es „Alternativer Text“ und steht in der Mediathek bei jedem Bild, viele Baukästen zeigen es im Seiteneditor, sobald Sie das Bild anklicken. Bei einer selbst programmierten Website wird das Attribut direkt im HTML gesetzt. Haben Sie viele Bilder, beginnen Sie mit denen, die Ihre Arbeit oder Ihr Angebot zeigen, etwa Referenzfotos und Bilder von Speisen oder Räumen. Ein einfacher Test: Lesen Sie nur die Alternativtexte einer Seite hintereinander. Entsteht eine Vorstellung davon, was die Seite zeigt, haben Sie gute Arbeit geleistet.

Der kostenlose Barrierefreiheits-Check ist ein Schnelltest. Er liest den ausgelieferten Quelltext Ihrer Seite und zählt die img-Elemente, bei denen das Attribut alt fehlt. Ein leeres alt="" gilt dabei als vorhanden, weil es bei Schmuckbildern richtig ist. Bilder, die erst per JavaScript nachgeladen werden, und Hintergrundbilder aus dem CSS erfasst der Test nicht. Ob ein vorhandener Text gut ist, kann nur ein Mensch beurteilen. Das Ergebnis ist ein technischer Hinweis, kein Gutachten und keine Rechtsberatung.

Bei einer neuen Website von Bemuar Technology können Sie die Bildtexte auf Wunsch zusammen mit den übrigen Seitentexten erstellen lassen und geben sie frei, mehr dazu unter Webdesign.