Bilder beschriften – Bilder beschreiben

Bildbeschriftungen und -beschreibungen gehören zu den meist diskutierten Anforderungen der WAI-Richtlinien und die Meinungen darüber sind ebenso zahlreich wie vielfältig.

Sonnenuntergang
BilderBox.com

Das ist nicht weiter verwunderlich: Die Korrektheit eines Dokuments, die Funktionalität von Sprungmarken oder die ausreichende Flexibilität eines Designs lassen sich mit Werkzeugen einigermaßen zuverlässig prüfen. Mit Bildern ist das anders.

Beschriftung und/oder Beschreibung

Die „Grundformel“ ist eigentlich ganz einfach: Die Bildbeschriftung (Alt-Atribut) soll kurz und aussagekräftig sein, eine Bildbeschreibung (früher Longdesc, heute eher ein speziell formatierter Absatz oder eigener Link) kann ausführlicher sein.

Was so einfach klingt, ist aber nicht nur für ungeübte Redakteure eine ziemliche Herausforderung. Es ist keineswegs klar, was an einem Bild wichtig ist und welche Aussage es transportiert. Möglicherweise ist es ja inhaltlich völlig verzichtbar, nicht jedoch, was das „Look and Feel“ der Seite angeht.

Ich habe bereits weiter oben zwischen Bildbeschriftung und Bildbeschreibung unterschieden. Aber auch Bildbeschreibungen können unterschiedliche Aufgaben erfüllen.

Das Bild im Kontext

Hier geht es nicht um Hintergrundbilder, die ja ins CSS gehören, oder um Schmuckgrafiken, die mit alt=“““ gekennzeichnet werden, sondern um Bilder, deren Inhalte für die Besucher von Bedeutung sind. Diese Bilder können ganz unterschiedliche Aufgaben haben. Während bei dem einen ein kurzer Alt-Text genügt, um das Motiv auf dem Bild zu benennen (nicht zu beschreiben), kann ein Bild auch eine wichtige Information oder Stimmung transportieren. Je nach Umfang und Genauigkeit des dazugehörigen Textes kann ein einzelner Satz als Bildbeschreibung ausreichen oder eine genaue verbale Beschreibung erforderlich sein. Selbstverständlich sind den Bemühungen um möglichst präzise Umsetzung bildlicher Darstellung in Text Grenzen gesetzt. Komplexe Diagramme oder Stadtplanausschnitte können einfach nicht ohne Informationsverlust transponiert werden.

Der Nutzen theoretischer Ausführungen hält sich in Grenzen. Darum folgen hier drei Beispiele, wie man mit Bildern umgehen kann. Bei allen drei Beispielen ist die Aufgabe der Bilder eine andere und genau darum habe ich sie ausgewählt.

Hilfe zur Kaufentscheidung

So wie ein scharfes Bild einen guten Eindruck von einem zum Kauf angebotenen Artikel vermittelt, tut es auch eine gute verbale Beschreibung. In diesem Beispiel geht es um Textilien. Vergleichen Sie selbst, inwieweit die bildliche Darstellung und die Bildbeschreibung übereinstimmen: 
Beschreibung eines Seiden-Saris.

Wer sich zum Kauf dieses oder eines ähnlichen Saris entschließt, sollte auch lernen, wie man diese Gewandung wickelt. Darum wird auch eine mehrteilige Wickelanleitung angeboten, die in Skizzen und ebenso in Worten die Kundschaft unterweist:
 Wickelanleitung für einen Sari.

Persönlicher Bezug

Eine ganz andere Aufgabe können Bilder dort haben, wo es um die Mitteilung der persönlichen Wahrnehmung des Betrachters geht. Am besten, wir lassen den Autor selbst zu Wort kommen: 
Bilder einer Ausstellung.

Auch ein praktisches Beispiel vom selben Autor möchte ich Ihnen nicht vorenthalten, wie er Bildbeschreibungen – oder vielleicht eher Bildinformationen – verfassen kann. Sehen Sie sich um. Es fällt mir schwer, mich für ein Motiv zu entscheiden:
 Fotos.

Details beschreiben

Im dritten Beispiel geht es um das Thema Behinderung und um eine nicht ganz alltägliche Perspektive auf dieses Thema. Die Bilder stellen sozusagen eine Einheit dar; der Rahmen und die grundsätzliche Aussage der Bilder sind klar umrissen. Um das Stimmungsbild zu vervollständigen, bedarf es daher noch der Beschreibung etlicher Details.

Ich lade Sie daher zu einem kleinen Rundgang ein. Machen Sie sich selbst ein Bild über die Bilder und deren Beschreibungen: 
trau dich – zeig dich.

Vielfalt und Kreativität

In der Praxis zeigt sich, dass die auf Webseiten verwendeten Bilder meist nur illustrativen oder ergänzenden Charakter haben und mit einer kurzen Bildbeschriftung (alt=““) hinreichend auch für jene Menschen gekennzeichnet sind, die Bilder nicht wahrnehmen können. Wenn dies nicht der Fall ist, könnten die drei obigen Beispiele als Anregung dienen, wie man an diese von vielen Web-Schaffenden gefürchtete Aufgabe herangehen könnte.

Für die Praxis

Wenn Sie in den WAI-Richtlinien gestöbert haben und dennoch grübelnd vor einem Bild einer Webseite sitzen und nicht wissen, was und wie Sie beschriften und beschreiben sollen, dann stellen Sie sich vor, Sie würden das Bild und dessen Funktion einem Freund am Telefon beschreiben. Sie werden sehen: Nach dem dritten fiktiven (oder vielleicht sogar echten) Telefonat beginnt die Aufgabe Spaß zu machen.

Zum Nachlesen

Theorie und Praxis sind untrennbar miteinander verbunden. Darum füge ich den praktischen Beispielen zwei Seiten zum Nachschlagen hinzu:

Hier beginnt der Werbebereich Hier endet der Werbebereich
Hier beginnt der Werbebereich Hier endet der Werbebereich

Hinterlassen Sie einen Kommentar

Pflichtfelder sind mit * markiert

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

0 Kommentare

  • OK, Tags schreiben geht leider nicht. Gemeint war folgendes:

    Leider nicht zulässig: [img src=“xxx“]Bildunterschrift[/img]
    Lösungsansatz in HTML5 mit [caption]?

  • Was jeder gute Redakteur für Printmedien gelernt hat, sollte auch fürs Web gelten: Kein Foto ohne Bildunterschrift. Diese sollte das Gezeigte bezeichnen und zum Bezug zum Artikel setzen. Der Klassiker: Eine Person ist zu sehen und darunter steht: „Bürgermeister Erwin Strotenkötter (Partei) grautlierte dem örtlichen Kaninchenzüchterverein zum 100. Jubiläum“. Foto und Bildunterschrift sind (ggf. zusammen mit der Titelzeile) fast schon die ganze Story.

    Diese ausführliche Bildunterschrift gehört aber nicht in den Alt-Text, denn sie soll auch den sehenden Nutzern präsentiert werden. Allerdings: Wie können in HTML Bild einerseits und dazugehörige Bildunterschrift am besten in Bezug zueinander gesetzt werden? Leider ist Bildunterschrift ja nicht zulässig. Eventuell mit dem Tag aus HTML5? Lösungsansätze hierzu würden mich interessieren.

    Und welche Bedeutung kommt in solchen Fällen dem Alt-Text zu? Redundanzen sollten vermieden werden. Er sollte näher beschreiben, was auf dem Bild exakt zu sehen ist („Der Bürgermeister lacht und hält eine Urkunde hoch“). Wenn es dazu nicht mehr zu sagen gibt, als in der Bildunterschrift bereits stehet, kann meines Erachtens der Alt-Text auch getrost leer bleiben.

    Gruß, Heribert

  • Liebe Eva, danke für diesen ausgezeichneten Artikel. Die Beispiele zeigen wirklich schön, wie man das Thema mit den Bildbeschreibungen richtig angeht. Grüße, Nina