Drücke "Enter", um den Text zu überspringen.

Bilder im Content-Bereich – Auswahl und Beschreibung

Es ist immer sinnvoll, in einem Text Bilder einzusetzen. Sie lockern den Text auf und unterstreichen im besten Fall seine Kernaussage. In vielen Fällen erleichtern Grafiken das Verständnis, wenn zum Beispiel in einem Diagramm eine Entwicklung zusammengefasst wird. Ein aktueller Trend sind interaktive Informationsgrafiken, die zum Beispiel große Datenmengen anschaulich darstellen. Für viele Menschen können solche Graphiken das Verständnis komplexer Inhalte erleichtern.

In diesem Abschnitt möchte ich mich mit redaktionellen Bildern beschäftigen, die vor allem als Ergänzung textlicher Inhalte oder als Informationsgrafiken verwendet werden. Im Konzeptionsteil beschäftige ich mich mit Farben und Grafiken, die im Design und als Funktionsgrafiken eingesetzt werden.

Im folgenden spreche ich von Bildern, wenn es um Abbildungen von Menschen, Tieren oder Objekten geht. Sie werden meist mit Digitalkameras erstellt. Grafiken hingegen sind schematische Darstellungen, die normalerweise mit einem Programm erzeugt werden. Die Dateiformate sind für beide Darstellungsformen die Gleichen, sie haben aber unterschiedliche Einsatzzwecke und erfordern daher unterschiedliche herangehensweisen.

Ausgezeichnete Grafiken

In HTML gibt es drei Möglichkeiten, Bilder mit einem beschreibenden Text zu versehen:

  • Mit dem Alt-Attribut wird dem Bild ein Alternativtext beigegeben. Der Alternativtext wird angezeigt, wenn das Bild aus irgendeinem Grund nicht geladen werden kann und dient Blinden als textliche Beschreibung des Bildes.
  • Der Titel oder title wird angezeigt, wenn der Nutzer mit dem Mauszeiger über das Bild fährt, er ist also für alle Nutzer sichtbar.
  • Die lange Beschreibung oder long desc ist für längere Beschreibungen zum Bild gedacht. Sie wird in der Praxis kaum eingesetzt

Die Übersetzung dieser englischen Begriffe ist leider nicht einheitlich, so dass sie in jedem Redaktionssystem anders benannt sind. Wie sie in deinem System benannt sind, musst du deshalb selbst herausfinden.

Unabhängig von diesen Attributen gibt es die Bildunterschrift, die unmittelbar unter dem Bild angezeigt wird und für alle Nutzer ohne Weiteres sichtbar ist. Sie kann als Alternative zur langen Beschreibung genutzt werden.

Beschreibungen

Bei journalistischen oder redaktionellen Texten haben die Bilder selten eine wirklich relevante Aussage. Hier reicht es aus, den Namen der abgebildeten Person, des Ortes oder
Gegenstandes zu nennen. Beschreiben sollte man das Bildobjekt nur, wenn es zum Verständnis des Textes beiträgt. Längere Beschreibungen kann man im Bild-Untertitel
unterbringen: “Angela Merkel übt harte Kritik an der Opposition” ist für Alt oder Bildunterschrift in den meisten Fällen vollkommen ausreichend. Stell dir einfach vor, welche Information du benötigen würdest, wenn das Bild nicht angezeigt würde oder nicht erkennbar wäre. Eine detailierte Beschreibung des Inhaltes ist selten sinnvoll.

Titel und Alternativtext können identisch sein: der Screenreader liest nur eine der beiden Beschreibungen und sehende Nutzer bekommen den Alternativtext normalerweise nicht zu Gesicht. Auch der Titel sollte mit einem beschreibenden Text belegt werden, weil auch sehende Nutzer von einer Beschreibung profitieren können. Für sehbehinderte Nutzer ist es leichter, ein Objekt zu erkennen, wenn sie wissen, worum es sich handelt.

Die Bildunterschrift sollte sich vom Alternativ- und Titeltext unterscheiden und weitere Informationen liefern.

Bildauswahl

Bei der Bildauswahl ist wichtig, dass sich das Bildobjekt deutlich vom Hintergrund abhebt. Bei den zahlreichen Farbfehlsichtigkeiten und Sehbehinderungen
lassen sich aber ansonsten kaum konkrete Empfehlungen abgeben. Das Bildobjekt ist das, was den Nutzer eigentlich interessiert, fast immer die Abbildung einer Person, eines Gegnstandes oder eines Tieres.

Nach Möglichkeit sollte auf starke Reize etwa durch grelle Farben verzichtet werden, da Menschen mit Lernbehinderung darauf empfindlich reagieren können.

Grafiken

Für selbsterstellte Grafiken wie Diagramme ist entscheidend, dass alle Bestandteile deutlich zu erkennen sind, das gilt auch für die Begleittexte, die zumeist auch als Pixelgraphik
eingebunden werden. Bei den Wahlergebnissen stehen die Parteinamen und Prozentangaben oft in der Tortengraphik. Das ist suboptimal, da die Tortenstücke
meist in den Parteifarben gestaltet sind und oft zu geringen Kontrast bieten. Fehlen die Parteinamen ganz, kann eine Rot-Grün-Schwäche voll durchschlagen.

Ein Kompromiß besteht darin, eine kleine Graphik in den Artikel einzubetten und mit einem Klick darauf die Graphik in einer besseren Auflösung anzubieten. Die eingebetteten Texte sollten bei leichter Vergrößerung nicht pixelig werden. Der einfachste Weg, das zu erreichen ist übrigens, Vektorgrafik-Formate wie SVG oder Flash einzusetzen. Diese werden auch bei Vergrößerung nicht unscharf.

Die Alternative zu einem graphischen Diagramm ist natürlich die Tabelle, aus der das Diagramm erstellt wurde. Für Blinde sind Tabellen nicht unbedingt übersichtlich, sie sind aber leichter zu verstehen als in den Text eingestreute Zahlen. Meistens ist es nicht sinnvoll, diese Werte in den Begleittext oder die Bildunterschrift zu schreiben.

Grundsätzlich sollte ein Alternativtext kurz sein. Er unterbricht meistens den Lesefluß und ist oft nicht wichtig zum Verständnis des Textes. Längere Texte sollten
in die Bildunterschrift, denn sofern sie wichtig sind, kommen sie hier allen zugute. Und alles andere sollte in den Fließtext.

Lektüreempfehlungen