Sie tauschen ein Foto auf Ihrer Website aus und sehen im Editor das Feld „Alternativtext“. Was gehört dort hinein: der Dateiname, eine genaue Beschreibung oder der gewünschte Suchbegriff? Entscheidend ist, welche Information das Bild an dieser Stelle vermittelt. Derselbe Bildinhalt kann auf zwei Seiten unterschiedliche Aufgaben haben.

Ein Alt-Text macht die Bedeutung eines Bildes als Text zugänglich, etwa für Menschen, die einen Screenreader verwenden. Er ist nicht dasselbe wie eine sichtbare Bildunterschrift. Das W3C erläutert informative Bilder anhand ihrer Aussage im jeweiligen Zusammenhang. Die folgende Hilfe übersetzt diese Unterscheidung in Entscheidungen für Ihre Firmenwebsite.

Welche Aufgabe hat das Bild auf dieser Seite?

Sehen Sie zuerst auf die gesamte Stelle: Bild, Überschrift, benachbarter Text und mögliche Verlinkung. Fragen Sie nicht nur „Was ist auf dem Foto?“, sondern auch „Was würde jemand ohne dieses Bild nicht erfahren oder nicht bedienen können?“ Bei der Auswahl geeigneter Motive hilft zuvor die Planung von Fotos für Ihre Firmenwebsite.

Fünf Fälle für die Entscheidung über den Alternativtext
Situation auf der Website	Passende Entscheidung
Ein Projektfoto zeigt ein wichtiges Detail, das der Text nicht beschreibt.	Die für das Verständnis nötige Bildinformation knapp benennen.
Das Bild dient nur der Gestaltung oder wiederholt vollständig die benachbarte Aussage.	Eine leere Textalternative vorsehen, sofern das Bild keine eigene Funktion erfüllt.
Ein Bild ist der einzige Inhalt eines Links.	Das Ziel oder die Aktion verständlich benennen; die reine Motivbeschreibung reicht dafür möglicherweise nicht.
Bild und aussagekräftiger Text bilden gemeinsam denselben Link.	Prüfen, ob der Linktext bereits alles Nötige erklärt. Dann kann das Bild eine leere Textalternative erhalten.
Eine Grafik enthält viele Schritte, Werte oder Zusammenhänge.	Eine kurze Einordnung am Bild und eine erreichbare ausführliche Erklärung als Text oder Tabelle vorbereiten.

Die Unterscheidung zwischen einem allein verlinkten Bild und einem Bild im beschrifteten Link zeigt das W3C-Tutorial zu funktionalen Bildern. Ein Text, der nur optisch neben dem Bild steht, ist nicht automatisch Teil desselben Links.

Ein Foto, drei unterschiedliche Verwendungen

Das folgende Beispiel ist erfunden und keine PEMKO-Kundenreferenz. Ein Foto zeigt einen weißen Einbauschrank unter einer Dachschräge, mit offenen Fächern links und Türen rechts.

Auf einer Projektseite: Der Text erklärt den Auftrag, beschreibt aber nicht die Aufteilung. Als Alt-Text passt beispielsweise „Weißer Einbauschrank unter der Dachschräge, links offene Fächer und rechts geschlossene Türen“. Angaben zu Materialqualität oder Haltbarkeit lassen sich aus dem Foto nicht ableiten.
Als allein verlinktes Vorschaubild: Das Bild führt zum ausführlichen Projekt. Ein möglicher Alt-Text ist „Projekt: Einbauschrank unter einer Dachschräge“. Damit wird das Ziel verständlich. Gibt es im selben Link bereits diese sichtbare Überschrift, kann eine zusätzliche Wiederholung entfallen.
Als rein schmückender Hintergrund einer bereits vollständigen Beschreibung: Vermittelt die Aufnahme dort keine zusätzliche Information und ist sie nicht bedienbar, braucht sie keine weitere gesprochene Beschreibung. Wie dies technisch umgesetzt wird, hängt von der Einbindung ab.

Eine Bildunterschrift könnte dagegen erklären, welche Arbeit ausgeführt wurde und was unverändert blieb. Solche Projektangaben müssen vom Betrieb bestätigt sein. Übertragen Sie nicht einfach eine werbliche Bildunterschrift in jedes Alt-Feld.

Leer ist nicht dasselbe wie vergessen

Bei einem dekorativen Bild als HTML-Bildelement bedeutet eine leere Textalternative alt="". Das Attribut fehlt dabei nicht; sein Wert ist bewusst leer. Fehlt es ganz, können Vorleseprogramme stattdessen etwa einen Dateinamen ausgeben. Die W3C-Hinweise zu dekorativen Bildern erklären diesen Unterschied.

Schreiben Sie dafür weder „dekoratives Bild“ noch ein Leerzeichen in das Feld; auch diesen Unterschied erläutern die W3C-Tipps zu Textalternativen. Lassen Sie Ihren Webdesigner prüfen, wie der verwendete Editor diese Entscheidung ausgibt. Ein allein verlinktes Logo darf durch das Leeren seines Alt-Textes nicht zu einem unbenannten Link werden. Dasselbe gilt für ein Symbol, das allein als Link oder Schaltfläche dient: Seine Funktion braucht einen zugänglichen Namen.

Was bei Schaubildern und Text im Bild zusätzlich nötig ist

Ein Ablaufdiagramm mit sechs Arbeitsschritten lässt sich nicht durch „Unser Ablauf“ gleichwertig erklären. Stellen Sie die Schritte und ihre Beziehungen auch als lesbaren Text bereit. Das Bild bekommt eine kurze Einordnung und gegebenenfalls einen Hinweis auf diese Erklärung. Das W3C beschreibt dafür kurze und ausführliche Textalternativen.

Stehen Öffnungszeiten, Leistungsbedingungen oder Kontaktangaben nur in einer Grafik, fehlt außerdem ein gut pflegbarer Text auf der Seite. Für solche Angaben ist ein gewöhnlicher Textbereich häufig die praktischere Lösung. Er lässt sich ändern, ohne jedes Mal eine neue Bilddatei zu gestalten. Prüfen Sie anschließend, dass Text und Grafik nicht unterschiedliche Angaben zeigen.

In WordPress die konkrete Verwendung bearbeiten

Im WordPress-Bildblock finden Sie eine Einstellung für den Alternativtext. Die aktuelle WordPress-Dokumentation unterscheidet zwischen dem Alt-Text am einzelnen Bildblock und dem Vorgabewert in der Mediathek: Die Blockänderung gilt für diese Verwendung; der Mediathek-Wert dient beim weiteren Einfügen als Vorgabe. Setzen Sie nicht voraus, dass eine spätere Änderung in der Mediathek bereits eingefügte Bildblöcke oder individuelle Vorlagen nachträglich aktualisiert. Prüfen Sie die betroffenen veröffentlichten Seiten.

Bei einer Galerie, einem Seitenbaukasten oder individuellen Verwaltungsfeldern kann der Weg anders aussehen. Geben Sie bei einer beauftragten Änderung die genaue Seite, das Bild und den vorgesehenen Text an. Soll ein Bild bewusst dekorativ sein, schreiben Sie dies in den Auftrag. So bleibt ein absichtlich leeres Feld von einer noch offenen Aufgabe unterscheidbar.

Eine kleine Prüfung vor der Freigabe

Beginnen Sie mit wenigen repräsentativen Stellen: einem Leistungsbild, einer Projektvorschau und einer Grafik mit erklärendem Inhalt. Nutzen Sie dafür diese Prüfliste; sie ist keine bereits durchgeführte Prüfung Ihrer Website.

Aussage: Vermittelt der Text die relevante Information, ohne Eigenschaften oder Ergebnisse zu erfinden?
Zusammenhang: Ergänzt er den benachbarten Text sinnvoll, statt denselben Inhalt unnötig zu wiederholen?
Funktion: Ist bei einem Bildlink das tatsächliche Ziel verständlich benannt?
Ausgabe: Ist die Entscheidung nach dem Speichern auch auf der veröffentlichten Seite angekommen? Lassen Sie bei Bedarf das tatsächlich ausgegebene Bild und die Screenreader-Ausgabe prüfen.
Pflege: Weiß die zuständige Person, dass ein neuer Bildausschnitt oder Verwendungszweck eine neue Textentscheidung verlangen kann?

Eine automatische Meldung zu fehlenden Alt-Texten ersetzt diese inhaltliche Prüfung nicht. Auch ein ausgefülltes Feld kann unpassend sein. Umgekehrt ist ein bewusst leerer Wert bei einem dekorativen Bild kein Anlass, dort Suchbegriffe einzutragen. Google empfiehlt hilfreiche, zum Bild und Seiteninhalt passende Alt-Texte und warnt vor überflüssigen Keywords. Bestimmte Suchpositionen lassen sich damit nicht zusagen.

Gute Textalternativen sind ein Teil zugänglicher Inhalte, kein vollständiger Nachweis der Barrierefreiheit. Wenn Sie Ihre Website gestalten oder überarbeiten lassen möchten, können Sie bei der Projektanfrage an PEMKO einige betroffene Seiten nennen. Damit lässt sich der Auftrag konkret abgrenzen: Bilder und ihre Aufgaben sichten, Texte abstimmen und die tatsächliche Einbindung prüfen.

Alt-Texte für Website-Bilder: Was gehört hinein – und wann bleiben sie leer?