accessBlog

Grafiken barrierefrei einsetzen Teil 2 – inhaltliche Bilder und Informationsgrafiken

Inhaltliche Bilder ergänzen den Inhalt einer Website: Das Foto in einem journalistischen Artikel, das Diagramm der Umfrage-Statistik, das Organigramm der Firma. Ihr Einsatz ist sinnvoll, weil ein Bild die Aussage eines Textes unterstreichen kann und zu viel Text die Leser häufig abschreckt. Infografiken, wie sie im Datenjournalismus eingesetzt werden, können komplexe Sachverhalte und Zusammenhänge anschaulich vermitteln und sind daher eine gute Ergänzung zum klassischen Journalismus.

Weiterlesen …

Bilder in journalistischen und informativen Texten

Bei journalistischen Texten haben die Bilder eine begleitende Funktion. Sie unterstreichen den Inhalt des Textes, der Text bleibt aber auch verständlich, wenn das Bild aus irgendeinem Grund nicht angezeigt wird.

Hier reicht es aus, den Namen der abgebildeten Person, des Ortes oder Gegenstandes zu nennen. Genauer 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 kritisiert die Opposition« ist für Alternativtext oder Bildunterschrift vollkommen ausreichend. Es ist richtig, dass Bilder auch Emotionen oder Stimmungen vermitteln sollen. Allerdings wird dieser Zweck bereits mit dem eigentlichen Fließtext verfolgt. Wenn die Stimmung von Text und Bild nicht übereinstimmt, sollte die Bildauswahl überdacht werden.

Wenn Sie ein abgebildetes Gemälde oder Kunstwerk beschreiben wollen, sollten Sie das ebenfalls im Fließtext tun. Davon profitieren alle Besucher der Website, zumal bei der im Web üblichen Auflösung für Bilder Details nicht gut zu erkennen sind.

Eine besondere Form journalistischer Produkte sind Bilderstrecken oder Fotoreportagen. Die meisten Blinden werden sich wohl nicht mit Bilderstrecken beschäftigen. Dennoch sollten auch diese Bilder Alternativ- und Titeltexte erhalten. Wir empfehlen außerdem, in einem Begleittext den Inhalt der Bilder zu beschreiben. Sehbehinderte erkennen den Inhalt eines Bildes oft erst, wenn sie wissen, was darauf zu sehen ist.

Informationsgrafiken

Informationsgrafiken erleichtern die Aufnahme von Informationen. Welche Aspekte bei ihrer Erstellung zu beachten sind, wollen wir anhand von Diagrammen anschaulich machen.

Für Diagramme ist entscheidend, dass alle Bestandteile deutlich zu erkennen sind, das gilt auch für die Begleittexte, die zumeist auch als Pixelgrafik eingebunden werden. Bei den Wahlergebnissen stehen die Parteinamen und Prozentangaben oft im Tortendiagramm. Das ist suboptimal, da die Tortenstücke meist in den Parteifarben gestaltet sind und oft zu geringen Kontrast bieten. Wenn Farbe als einziges Unterscheidungsmerkmal verwendet wird, können Farbfehlsichtige einzelne Diagramm-Bestandteile nicht mehr unterscheiden.

Das gilt auch für Legenden-Texte. Wenn Farbe als einziges Erkennungsmerkmal eingesetzt wird, können Farbfehlsichtige den Bezug zwischen Element und erklärender Legende nicht herstellen. Hier gibt es grundsätzlich zwei Lösungswege:

1. Es gibt außer der Farbe ein weiteres Erkennungselement, zum Beispiel ein bestimmtes Muster.
2. Element und Beschreibung werden unmittelbar miteinander verbunden, wobei die Beschreibung nicht in das Element eingebettet wird, um die Lesbarkeit zu erleichtern.

Wie kommen die Besucher zu Einfach für Alle

Durch die Farbverläufe sind die Bestandteile des Diagramms auch für Farbfehlsichtige zu erkennen.

Alternativ können die Tortenstücke auch einen kleinen Abstand zueinander haben.

Wie kommen die Besucher zu Einfach für Alle

Durch den kleinen Abstand werden die Tortenstücke leichter unterscheidbar

In jedem Fall sollten die im Diagramm dargestellten Ergebnisse auch als normale HTML-Tabelle angeboten werden, damit auch Blinde die Ergebnisse erkennen können. In keinem Fall ist es sinnvoll, die Ergebnisse im Alternativ-- oder Titeltext unterzubringen, weil das unübersichtlich ist. In unserem Fall ist ein Alternativtext wie »Herkunft der Besucher von Einfach für Alle« als Tortendiagramm« ausreichend.

Weitere Umsetzungsbeispiele für Informationsgrafiken finden Sie in der Linkliste.

Emoticons

Emoticons werden in ihrer Bedeutung unterschätzt. Früher wurden sie über spezielle Zeichenfolgen generiert (;-) und ähnliches), heute geht man dazu über, entweder graphische Emoticons zur Einbindung in den Text anzubieten oder sie automatisch aus den Zeichenfolgen zu generieren. Einige aktuelle Screenreader erkennen die wichtigsten Zeichenketten und lesen sie zum Beispiel als »Smiley« vor. Mit den Grafiken geht das nicht, meistens haben die graphischen Emoticons auch keinen Alternativtext. Das kann durchaus problematisch sein, denn mit solchen Emoticons kann Ironie ausgedrückt werden, wer dies aber nicht erkennen kann, versteht auch nicht, dass jemand etwas ironisch gemeint hat, was zu einer endlosen Kette von Missverständnissen führen kann. Wünschenswert sind also alt-Texte für graphische Emoticons. Wenn man sie nicht all zu exzessiv einsetzt, können sie Menschen mit unterschiedlichen Behinderungen durchaus helfen, einen Text besser zu verstehen. Eine solche Funktion muss allerdings im Redaktionssystem angelegt sein, da Redakteure und Nutzer normalerweise keinen Einfluss auf die Ausgestaltung dieser Grafiken haben.

Grafiken in Gebrauchstexten

Bei Anleitungen zur Behebung von Software-Problemen oder Ähnlichem werden häufig Screenshots verwendet. Die erklärenden Texte dazu sind eher sparsam. Was der Sehende auf den ersten Blick erfasst – den Unterschied zwischen zwei Screenshots – muss der Sehbehinderte erst einmal mühsam erfassen und der Blinde hat dazu gar keine Chance. Vor allem für Sehbehinderte und Blinde ist eine exakte Beschreibung sinnvoll: Welches Menü oder welcher Dialog wird aufgerufen, welcher Karteireiter wird ausgewählt, welche Option soll aktiviert oder deaktiviert werden? Die Vorgänge sollten so detailliert beschrieben werden, dass die Aktion auch ohne den Screenshot nachvollzogen werden kann.

Alternativtexte und Bildunterschriften

Grundsätzlich sollte ein Alternativtext kurz sein. Er unterbricht meistens den Lesefluss und ist oft nicht so wichtig zum Verständnis des Textes. Längere Beschreibungen sollten in die Bildunterschrift, wo sie allen zugute kommen. Wie schon im ersten Teil erwähnt können für Alternativtext und Titel die gleichen Texte verwendet werden, die Bildunterschrift sollte sich hingegen von beiden unterscheiden.

Größe der Grafiken

Für Sehbehinderte ist es nützlich, wenn sie die Bilder vergrößern können. Zwar stellen die Browser einfache Vergrößerungsfunktionen bereit, aber wie schon im ersten Teil erwähnt verschlechtert sich die Qualität von Pixelgrafiken bei Vergrößerung. Eine Lösung besteht darin, das normale Bild mit einem Link zu einer größeren Version des Bildes zu unterlegen.

Die Erstellung und Einbindung inhaltlicher Bilder fällt in den Aufgabenbereich von Redakteuren. Sie sollten für diesen Bereich geschult und sensibilisiert werden. Auch Redaktionshandbücher und Leitfäden sollten um entsprechende Anleitungen ergänzt werden.