Farben und Grafiken

Die Farbgestaltung gehört ebenso zur Zugänglichkeit wie die Alternativtexte für Bilder. Auch wenn viele Sehbehinderte und Blinde Farben nur schlecht oder gar nicht wahrnehmen, sollte man nicht darauf verzichten, Farben für die Informationsarchitektur zu verwenden. Im Gegenteil: Richtig eingesetzt erhöhen Farben die Benutzerfreundlichkeit und Barrierefreiheit.

Der Knackpunkt ist: Farben dürfen nicht als einziges Merkmal eingesetzt werden. Wir erinnern uns an das Mehr-Kanal-Prinzip, jede Information soll auf mindestens zwei Wegen vermittelt werden.

Was heißt das? Alle Funktionen der Webseite sollten auch benutzbar sein, wenn der Nutzer die Webseite in Schwarz-Weiß bzw. Graustufen sieht. Stell dir ein Formular vor, das client- oder serverseitig geprüft wurde und indem einige Fehler aufgetreten sind. Als Fehlermeldung erscheint: „Bitte korrigieren Sie Eintragungen in den roten Feldern“, die korrekten Felder sind grün unterlegt. Der Blinde scheitert hier komplett und der Farbenblinde ebenfalls. Eine Möglichkeit wäre zum Beispiel, korrekte Felder mit einem grünen Haken und falsche Felder mit einem roten X zu versehen, wobei die Symbole über HTML mit korrekten Alt-Text eingebettet werden.

Einige Menschen reagieren empfindlich auf grelle Farben, sie sollten deshalb sparsam eingesetzt werden. Das gilt auch für Inhalte, die aus anderen Webseiten eingebunden wurden und auch für Werbebanner.

Grafiken und Bilder gehören zur Gestaltung einer Webseite dazu. Grafiken erleichtern das Verständnis der Webseiten-Funktionen, Bilder lockern den Text auf und können die Verständlichkeit verbessern.

Auch das Verständnis von Grafiken – das heißt, schematischen Darstellungen oder Schaubildern – muss erlernt werden. Dieser Prozess ist oft intuitiver als das Lesen lernen, erfordert aber dennoch eine gewisse kognitive Anstrengung, das wird auch als visual literacy bezeichnet. Wer sich an die Erstellung von Grafiken macht, sollte ähnlich professionell an die Aufgabe herangehen wie ein Texteschreiber. Grafiken müssen aus der Perspektive des potentiellen Betrachters verständlich sein. Das heißt zum Beispiel, dass die Verständlichkeit wichtiger ist als die Ästhetik, Farben oder dreidimennsionale Darstellungen sollten sparsam eingesetzt werden und dort weggelassen werden, wo sie das Verständnis erschweren oder in die Irre führen.

Unter Grafiken wollen wir alles verstehen, was mit dem Computer erzeugt wurde: zum Beispiel mit Zeichenprogrammen. Bilder hingegen werden von externen Geräten in den Computer geholt: meistens mit einer Digitalkamera oder einem Scanner.

Unabhängig davon gibt es im Computerbereich zwei Grafiktypen: die Rastergrafiken und die Vektorgrafiken. Vektorgrafiken sind alle Inhalte, die vom Computer selbst erzeugt werden: zum Beispiel Buchstaben, Icons und andere geometrische Formen. Sie basieren auf mathematischen Formeln, deshalb können sie ohne Qualitätsverlust vergrößert werden. Rastergrafiken bestehen aus Pixeln, weshalb sie auch als Pixelgrafiken bezeichnet werden. Pixelgrafiken sind alle Inhalte, die über externe Geräte in den Computer kommen, also vor allem Fotos oder Scans. Sie bestehen aus einzelnen Bildpunkten, den Pixeln. Pixelgrafiken werden unscharf, sobald sie stark vergrößert werden.

Wer jetzt ein wenig verwirrt ist, der Grafiktyp lässt sich am Dateiformat unterscheiden. Ich kann ein Diagramm in Excel erstellen. Solange ich in Excel bin, kann ich das Diagramm beliebig verändern, es ist also eine Vektorgrafik. Jetzt speichere ich die Grafik als PNG, um sie auf meiner Webseite einzubinden, schon ist es eine Pixelgrafik. Andererseits könnte ich auch eine Rastergrafik vektorisieren, etwa mit Inkscape. Das sieht zwar nicht so super aus, ist aber nichtsdestotrotz eine Vektorgrafik.

Auf Webseiten werden überwiegend Rastergrafiken verwendet, weil alle graphischen Browser sie anstandslos anzeigen. Beliebt sind vor allem GIF, JPG und PNG als Dateiformat. Vektorgrafiken werden vor allem in dynamischen Anwendungen wie Kartendiensten verwendet, zum Beispiel OpenStreetMap. Bekannte Formate sind Flash und das offene Scalable Vector Graphics (SVG).

Außerdem gibt es natürlich Inhalte, die clientseitig – also vom Browser – über HTML, CSS oder JavaScript erzeugt werden. Mit CSS3 kann man zum Beispiel Farbverläufe erstellen, HTML5 hat das Canvas-Element, mit dem zweidimensionale Zeichnungen erstellt werden können. Auch das sind Vektorgrafiken, sie werden vom Computer erzeugt und können über die Parameter geändert werden.

Ausgezeichnete Grafiken

Grundsätzlich gibt es drei Attribute, mit denen das Image-Tag beschrieben werden kann:

• alt = Alternativtext
• , long desc = long description
• title = Titel

Es gibt noch die Bildunterschrift, die aber als normaler Text unterhalb des Bildes untergebracht wird und für alle Nutzer ohne weiteres sichtbar ist.

Alternativtexte sind mittlerweile fast Standard und dienen vor allem blinden Screenreader-Nutzern. Der Alt-Text wird außerdem angezeigt, wenn aus irgendeinem Grund keine Bilder angezeigt werden. Einige Smartphone-Nutzer zum Beispiel schalten die Grafikanzeige ab, um die Ladezeit zu beschleunigen oder ihren Volumentarif nicht zu schnell aufzubrauchen.

Der Titel erscheint, wenn man mit dem Maus-Cursor über ein Bild fährt. Er kann vor allem Sehbehinderten helfen, die nicht erkennen können, was auf dem Bild zu sehen ist. Es mag verwunderlich sein, aber es stimmt tatsächlich: wenn man weiß, um welches Objekt es sich handelt, erkennt man es leichter.

Die lange Beschreibung wird in der Praxis kaum eingesetzt. Sie wird in HTML5 wahrscheinlich abgeschafft. Mir fällt auch kein Fall ein, in welchem eine lange Beschreibung von Bildern nur für Blinde sinnvoll sein könnte. Alle Informationen, die hilfreich zum verständnis sein könnten, sollten im Fließtext oder als Bildunterschrift vermittelt werden, damit sie allen Nutzern zugute kommen. Komplexe Schaubilder wie Kausaldiagramme werden auch für Laien verständlicher, wenn sie ausführlich erläutert werden.

Nehmen wir als Beispiel ein Tutorial, das beschreibt, wie in MS Word ein Inhaltsverzeichnis erstellt wird. In so einer Anleitung werden normalerweise Screenshots verwendet. Die Anleitung wäre für Blinde barrierefrei, wenn sie auch ohne diese Screenshots verständlich ist. Der Alternativtext für den Screenshot müsste also beschreiben, welche Funktion aufgerufen wird, bzw. wie man zu dieser Funktion kommt.

Alt- und Titel-Text können identisch sein, da der Screenreader nur eines der Attribute vorliest und die anderen Nutzer den Alt-Text nicht zu sehen bekommen. Die Bildunterschrift sollte hingegen andere, im besten Fall detailierte Informationen enthalten. Sie kann auch für Copyright-Verweise genutzt werden.

Vier Einsatzzwecke von Bildern

Es lassen sich vier Einsatzzwecke von Grafiken/Bildern auf Webseiten unterscheiden:

• ▪Platzhalter
• ▪dekorative Bilder
• Inhaltliche Bilder
• Funktionale Grafiken

Inhaltliche Bilder sind Teil der redaktionellen Arbeit und wurden in einem anderen Abschnitt bereits behandelt. Um den Rest kümmern sich Webdesigner und -entwickler.

Platzhalter-Grafiken

Platzhaltergraphiken sind kleine unsichtbare Bilder. Sie sind zumeist 1 Pixel groß und dienen zur Stabilisierung einer Layout-Tabelle. Tabellen wurden und werden teilweise noch heute zur Positionierung von Elementen verwendet. Leere Tabellenzellen sind für einige Browser problematisch, deshalb werden sie mit unsichtbaren Minigrafiken stabilisiert. Für Blinde sind sie oft anstrengend, weil ihre Software den Dateinamen vorliest, der oft nichtssagend ist. Das stört die Orientierung auf der Seite. Platzhalter-Grafiken können ein leeres Alt-Attribut erhalten, dann werden sie von den Screenreadern ignoriert. In keinem Fall ist ein Alternativtext wie „Platzhalter“ sinnvoll.

Insgesamt gelten Platzhalter-Grafiken als schlechter Stil und sollten ebenso verbannt werden wie Layouttabellen.

Dekorative Grafiken

Dekorative Grafiken dienen dazu, die Seite attraktiver zu gestalten. Es sind fast immer Graphiken, die auf jeder Seite eines Webauftritts vorkommen und sich dort immer auf der gleichen Position befinden: Banner, Logo, Hintergrundbilder…

Diese Graphiken sind äußerst nützlich: sie sollten auf einen Blick verraten, auf wessen Webauftritt man sich gerade befindet, erhöhen den Wiederkennungswert ungemein und vermitteln deshalb Sicherheit und Orientierung – nützlich für Menschen mit Lernschwierigkeiten oder auch ältere Menschen. Es ist zum Beispiel selten sinnvoll, eine knallbunte Webseite zu haben, wenn man ein Arzt ist, eine Ausnahme gilt höchstens für Kinderärzte. Wer schon einige Zeit im Web ist, kann oft auf Anhieb sagen, ob es sich eher um eine medizinische Seite handelt, eine Bankenseite oder um ein Nachrichtenangebot und das, ohne den Text gelesen zu haben.

Grafiken sollten sich erwartungskonform verhalten. Logo und Banner sind meistens mit der Startseite verknüpft, andere Grafiken sind nicht weiter verknüpft. Für dekorative Bilder sind kurze Alternativtexte und Titel sinnvoll, wenn sie verlinkt sind. Ansonsten sollten sie ein leeres Alt-Attribut erhalten, weil sie nicht zur Funktionalität der Webseite beitragen.

Funktionale Grafiken

Funktionale Graphiken sind Graphiken, mit denen eine Funktion verbunden ist. Sie werden auf praktisch allen Webseiten eingesetzt, bekannt ist das Druckersymbol für Druckfunktionen und das RSS-Symbol.

Diese Symbole sind äußerst eingängig, weil wir sie teilweise schon aus anderen Kontexten kennen: den Desktop-Anwendungen, wo sie von Normal-Sehenden und Maus-Nutzern ausgiebig verwendet werden.

Abgesehen von Blinden und stark sehbehinderten Menschen kommen diese Graphiken praktisch allen Menschen zu Gute, wenn sie gut gewählt und eingängig sind. Sie machen aus einer komplexen Interaktion mit der Website einen einfachen und intuitiven Prozess. Ansonsten müsste jede Funktion als Wort ausgeschrieben werden, was wirklich unübersichtlich ist. Für Menschen mit Lernschwierigkeiten erleichtern Funktionsgrafiken ungemein die Bedienung der Seite.

Weil immer mehr Programme auch im Internet angeboten werden, stellen sich an die Webanwendungen ähnliche Anforderungen wie an Desktop-Programme. Die Herausforderung besteht hier vor allem darin, sich nahe an die Desktop-Anwendungen anzulehnen, ohne eventuell bestehende Urheberrechte zu verletzen, weil die eigenen Icons zu sehr den Funktionsgraphiken eines anderen Programmes ähneln.

Wahl der Symbole

Um ein Symbol verwenden zu können, sollte es hinreichend bekannt sein. Webdesigner mögen viel Energie in eine hübschere Metapher zum Einkaufswagen investieren. Das bringt aber nur etwas, wenn die Funktion “Ware in eine Zwischenablage speichern, um sie beim Abschließen des Bestellvorgangs mit weiteren Waren zu bestellen” dem NUTZER deutlich wird. Diese ausschweifende Funktionsbeschreibung macht den Sinn dieser simplen Metapher vom Warenkorb deutlich. Statt langatmige Erklärungen abzugeben, versteht jeder Mensch mit ein wenig eShopping-Erfahrung, was mir der Erschaffer der Seiten mit dem Warenkorb-Symbol mitteilen möchte.

Die größe der Funktionsgraphiken

Es leuchtet auf Anhieb ein, dass jede Graphik so groß sein muss, dass sie mit der Maus gut anzuklicken ist. Die Graphiken müssen einen gewissen Abstand zueinander haben und sie sollten bei normaler Auflösung auf einem mittelgroßen Bildschirm gut zu erkennen und gut anzuklicken sein. Das sie mit der Tastatur per Tab-Taste erreichbar sein sollten, ist ebenso selbstverständlich. Für Menschen mit motorischen Schwierigkeiten, die mit einer Maus oder einem speziellen Eingabegerät arbeiten, sind kleine Grafiken mit geringer Klickfläche ärgerlich. Entweder muss die Maus exakt geführt werden oder es wird eine falsche Aktion ausgeführt. Frustrationen dieser Art führen mit Sicherheit dazu, dass selbst der geduldigste Nutzer der Site den Rücken zukehren .

Auszeichnung

Hier gilt das, was ich bereits in älteren Beiträgen ausgeführt habe. Blinde benötigen das Alt-Attribut, alle Nutzer brauchen den title, um bei Verwendung der Maus zu erfahren, welche Funktion sich hinter der Graphik verbirgt. Ein Briefsymbol könnte eine Kommentarfunktion, ein Leserbrief-Angebot oder ein E-Mail-Formular sein. Für Funktionstexte gilt immer das Gleiche: möglichst kurz, möglichst prägnant, möglichst eindeutig.

Der Beschreibungstext einer Funktionsgrafik beschreibt ihre Funktion, in keinem Fall das Aussehen der Grafik. Eine Beschreibung wie „Schwarzes, nach rechts zeigendes Dreieck“ wie bei der Webanalyse-Software eTracker lässt sich mit Mühe noch entschlüsseln, aber es ist trotzdem unnötiger Aufwand.

Weniger – dafür besser

Nicht jede Grafik ist auch eine Bereicherung für die Webseite. Vor einigen Jahren war es Mode, Dutzende von Social-Bookmark-Diensten zum Bookmarken anzubieten. Viele von ihnen waren in Deutschland praktisch bedeutungslos. Dafür waren die Icons so klein, dass sie schwierig anzuklicken waren.

Vor allem bei Funktionsgrafiken sollte immer überlegt werden, ob sie an dieser Stelle in dieser Form tatsächlich gebraucht werden. Ist es zum Beispiel sinnvoll, einen Like- oder Twitter-Button direkt unterhalb der Überschrift eines Textes anzubieten? Der Betroffene müsste den Text erst einmal gelesen haben, um ihn für empfehlenswert zu halten. Entgegen anderer Meinungen steigert eine hohe Like-Zahl nicht die Qualität eines Artikels.

Weiterlesen

• Eine ausführliche Artikelserie erschien bei „Einfach für Alle“. Dort gibt es auch noch mehr Links
• Bilder in der technischen Kommunikation – PDF
• „Visual Thinking. Probleme lösen mit der Faktorenfeldmethode“ Werner Preißing 2008
• Bilder und Grafiken