Alt-Text schreiben klingt nach einer technischen Kleinigkeit – dabei entscheidet dieser kurze Text, ob die Information eines Bildes überhaupt ankommt. Ein Bild auf Ihrer Website zeigt eine handgemachte Schale, ein Team bei der Arbeit oder eine Anfahrtsskizze. Wer das Bild nicht sehen kann – etwa mit einem Screenreader, bei langsamer Verbindung oder weil das Bild nicht lädt –, bekommt stattdessen den Alternativtext. Gleichzeitig nutzt Google ihn, um den Bildinhalt besser zu verstehen. In diesem Ratgeber erfahren Sie, wie Sie Alt-Texte zweckmäßig formulieren, wann ein Bild bewusst keinen Alt-Text braucht und wie Sie Ihre Website mit wenig Aufwand prüfen.
Inhaltsverzeichnis
Was ist ein Alt-Text?
Der Alt-Text ist das alt-Attribut eines Bildes im HTML-Code. In WordPress tragen Sie ihn in der Mediathek im Feld „Alternativer Text“ ein. Besucherinnen und Besucher sehen ihn normalerweise nicht – Screenreader lesen ihn jedoch vor, und Browser zeigen ihn an, wenn das Bild fehlt. Er ist damit etwas anderes als die Bildunterschrift, die für alle sichtbar unter dem Bild steht, und als der Bildtitel, der vor allem in der Mediathek zur Orientierung dient.
Google beschreibt den Alt-Text als das wichtigste Attribut, um zusätzliche Informationen über ein Bild bereitzustellen, und betont zugleich den Nutzen für Barrierefreiheit (Google Search Central: Bilder). Entscheidend ist dabei ein hilfreicher, zum Seiteninhalt passender Text – keine Aneinanderreihung von Suchbegriffen.
Erst die Funktion klären, dann formulieren
Ein guter Alt-Text beschreibt nicht jedes Detail, sondern das, wofür das Bild auf genau dieser Seite steht. Dasselbe Foto kann daher je nach Einsatz einen anderen Alt-Text brauchen. Bevor Sie einen Alt-Text schreiben, klären Sie deshalb die Rolle des Bildes. Die Entscheidungshilfe des W3C fragt genau danach (W3C WAI: Alt Decision Tree):
| Rolle des Bildes | Was in den Alt-Text gehört |
|---|---|
| Informativ (zeigt etwas, das der Text nicht sagt) | Die wesentliche Information in einem kurzen Satz |
| Funktional (Bild ist ein Link oder Button) | Das Ziel oder die Aktion, z. B. „Startseite“ oder „Warenkorb öffnen“ |
| Bild mit Text (z. B. Aktionsbanner) | Der Text im Bild, sofern er nicht daneben steht |
| Komplex (Diagramm, Ablaufgrafik) | Kurzer Alt-Text plus ausführliche Erklärung im Seitentext |
| Rein dekorativ | Leeres Attribut alt="", damit Screenreader es überspringen |
Wann der Alt-Text bewusst leer bleibt
Schmuckelemente, Hintergrundmuster oder ein Bild, dessen Inhalt bereits im danebenstehenden Text vollständig beschrieben ist, erhalten ein leeres Alt-Attribut (W3C WAI: Decorative Images). Wichtig ist der Unterschied: Ein leeres Attribut sagt „hier gibt es nichts zu erfahren“. Ein fehlendes Attribut führt dagegen dazu, dass manche Screenreader den Dateinamen vorlesen – etwa „IMG unterstrich 4711 punkt jpg“.
Beispiele aus dem Unternehmensalltag
Die folgenden Beispiele beziehen sich auf eine fiktive Keramikwerkstatt. Sie zeigen, wie sich der Zweck des Bildes auf die Formulierung auswirkt.
- Produktfoto im Onlineshop: Statt „Schale“ besser „Handgemachte Müslischale aus Steinzeug mit dunkelblauer, gesprenkelter Glasur, Durchmesser etwa 15 cm“. Hier zählen Merkmale, die für die Kaufentscheidung relevant sind.
- Teamfoto auf der Über-uns-Seite: „Drei Mitarbeiterinnen der Werkstatt an der Töpferscheibe und beim Glasieren“. Namen nennen Sie nur, wenn sie für Besucher relevant sind und die Personen zugestimmt haben.
- Logo als Link zur Startseite: „Keramikwerkstatt Muster – zur Startseite“. Bei funktionalen Bildern beschreibt der Alt-Text das Ziel, nicht das Aussehen.
- Anfahrtsskizze: Kurzer Alt-Text wie „Anfahrtsskizze zur Werkstatt“, die eigentliche Wegbeschreibung steht als Text auf der Seite.
- Dekorative Welle im Seitenkopf:
alt="".
Alt-Text schreiben: Fünf Regeln für verständliche Beschreibungen
- Kurz und konkret: Meist genügt ein Satz. Wichtige Information zuerst.
- Kein „Bild von …“: Screenreader kündigen Bilder bereits an. Ausnahme: Die Art des Bildes ist selbst relevant, etwa „Zeichnung“ oder „Screenshot“.
- Keine Wiederholung: Steht dieselbe Information schon direkt neben dem Bild, reicht ein kürzerer Alt-Text oder ein leeres Attribut.
- Suchbegriffe nur, wo sie natürlich passen: Ein treffend beschriebenes Produkt enthält ohnehin die richtigen Wörter. Keyword-Listen helfen weder Menschen noch Suchmaschinen.
- Dieselbe Sprache wie die Seite: Auf einer deutschsprachigen Seite formulieren Sie den Alt-Text auf Deutsch – in derselben Ansprache wie Ihre übrigen Texte.
Alt-Texte in WordPress pflegen
In WordPress hinterlegen Sie den Alternativtext direkt in der Mediathek. Er wird dann übernommen, wenn Sie das Bild neu in einen Beitrag einfügen. Beachten Sie: Bilder, die bereits in Seiten eingebaut sind, behalten je nach Editor und Theme ihren bisherigen Alt-Text. Prüfen Sie deshalb nach einer Überarbeitung stichprobenartig die veröffentlichte Seite. Hinweise zu Bildgröße, Format und Ladezeit finden Sie in unserem Ratgeber Bilder für WordPress optimieren; wie gute Produktbilder entstehen, zeigt der Beitrag Produktfotos selber machen.
Prüfliste: Ihre Website in 20 Minuten durchgehen
- Wählen Sie die fünf wichtigsten Seiten aus, zum Beispiel Startseite, eine Leistungsseite, zwei Produktseiten und die Kontaktseite.
- Notieren Sie für jedes Bild: informativ, funktional, mit Text, komplex oder dekorativ?
- Öffnen Sie in der Mediathek die Bilder ohne Alternativtext und ergänzen Sie diese nach der Tabelle oben.
- Kontrollieren Sie verlinkte Bilder und Logos: Beschreibt der Alt-Text das Ziel?
- Lesen Sie die Alt-Texte einer Seite einmal hintereinander laut. Ergeben sie ohne Bilder ein verständliches Bild der Seite?
- Legen Sie fest, wer bei neuen Bildern künftig den Alt-Text schreibt – idealerweise dieselbe Person, die das Bild hochlädt.
Unterstützung bei Bildern und Texten
Alt-Texte sind ein kleiner Baustein, der Ihre Website zugänglicher und verständlicher macht. Wenn Sie Ihre Website überarbeiten oder neu aufbauen, berücksichtigen wir Bildbeschreibungen von Anfang an – als Teil unserer Website-Entwicklung und unserer Texterstellung. Fragen Sie gerne ein unverbindliches Angebot an.