{"id":619,"date":"2018-03-21T20:02:50","date_gmt":"2018-03-21T18:02:50","guid":{"rendered":"http:\/\/www.netz-barrierefrei.de\/wordpress\/?page_id=619"},"modified":"2024-07-12T14:55:27","modified_gmt":"2024-07-12T12:55:27","slug":"farben-und-grafiken","status":"publish","type":"page","link":"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/konzeption\/farben-und-grafiken\/","title":{"rendered":"Farben und Grafiken"},"content":{"rendered":"<p><iframe loading=\"lazy\" src=\"https:\/\/digitale-barrierefreiheit.podigee.io\/21-farben-kontraste\/embed?context=external&#038;theme=default\" style=\"border: 0\" frameBorder=\"0\" height=\"100\" width=\"100%\"><\/iframe><br \/>\nDie Farbgestaltung geh\u00f6rt ebenso zur Zug\u00e4nglichkeit wie die Alternativtexte f\u00fcr Bilder. Auch wenn viele Sehbehinderte und Blinde Farben nur schlecht oder gar nicht wahrnehmen, sollte man nicht darauf verzichten, Farben f\u00fcr die Informationsarchitektur zu verwenden. Im Gegenteil: Richtig eingesetzt erh\u00f6hen Farben die Benutzerfreundlichkeit und Barrierefreiheit.<\/p>\n<p>Der Knackpunkt ist: Farben d\u00fcrfen nicht als einziges Merkmal eingesetzt werden. Wir erinnern uns an das Mehr-Kanal-Prinzip, jede Information soll auf mindestens zwei Wegen vermittelt werden. <\/p>\n<p>Was hei\u00dft das? Alle Funktionen der Webseite sollten auch benutzbar sein, wenn der Nutzer die Webseite in Schwarz-Wei\u00df bzw. Graustufen sieht. Stell dir ein Formular vor, das client- oder serverseitig gepr\u00fcft wurde und indem einige Fehler aufgetreten sind. Als Fehlermeldung erscheint: &#8222;Bitte korrigieren Sie Eintragungen in den roten Feldern&#8220;, die korrekten Felder sind gr\u00fcn unterlegt. Der Blinde scheitert hier komplett und der Farbenblinde ebenfalls. Eine M\u00f6glichkeit w\u00e4re zum Beispiel, korrekte Felder mit einem gr\u00fcnen Haken und falsche Felder mit einem roten X zu versehen, wobei die Symbole \u00fcber HTML mit korrekten Alt-Text eingebettet werden. <\/p>\n<p>Einige Menschen reagieren empfindlich auf grelle Farben, sie sollten deshalb sparsam eingesetzt werden. Das gilt auch f\u00fcr Inhalte, die aus anderen Webseiten eingebunden wurden und auch f\u00fcr Werbebanner. <\/p>\n<p>Grafiken und Bilder geh\u00f6ren zur Gestaltung einer Webseite dazu. Grafiken erleichtern das Verst\u00e4ndnis der Webseiten-Funktionen, Bilder lockern den Text auf und k\u00f6nnen die Verst\u00e4ndlichkeit verbessern. <\/p>\n<p>Auch das Verst\u00e4ndnis von Grafiken &#8211; das hei\u00dft, schematischen Darstellungen oder Schaubildern &#8211; 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 \u00e4hnlich professionell an die Aufgabe herangehen wie ein Texteschreiber. Grafiken m\u00fcssen aus der Perspektive des potentiellen Betrachters verst\u00e4ndlich sein. Das hei\u00dft zum Beispiel, dass die Verst\u00e4ndlichkeit wichtiger ist als die \u00c4sthetik, Farben oder dreidimennsionale Darstellungen sollten sparsam eingesetzt werden und dort weggelassen werden, wo sie das Verst\u00e4ndnis erschweren oder in die Irre f\u00fchren. <\/p>\n<p>Unter Grafiken wollen wir alles verstehen, was mit dem Computer erzeugt wurde: zum Beispiel mit Zeichenprogrammen. Bilder hingegen werden von externen Ger\u00e4ten in den Computer geholt: meistens mit einer Digitalkamera oder einem Scanner. <\/p>\n<p>Unabh\u00e4ngig 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\u00f6nnen sie ohne Qualit\u00e4tsverlust vergr\u00f6\u00dfert werden. Rastergrafiken bestehen aus Pixeln, weshalb sie auch als Pixelgrafiken bezeichnet werden. Pixelgrafiken sind alle Inhalte, die \u00fcber externe Ger\u00e4te in den Computer kommen, also vor allem Fotos oder Scans. Sie bestehen aus einzelnen Bildpunkten, den Pixeln. Pixelgrafiken werden unscharf, sobald sie stark vergr\u00f6\u00dfert werden.<\/p>\n<p>Wer jetzt ein wenig verwirrt ist, der Grafiktyp l\u00e4sst sich am Dateiformat unterscheiden. Ich kann ein Diagramm in Excel erstellen. Solange ich in Excel bin, kann ich das Diagramm beliebig ver\u00e4ndern, 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\u00f6nnte ich auch eine Rastergrafik vektorisieren, etwa mit Inkscape. Das sieht zwar nicht so super aus, ist aber nichtsdestotrotz eine Vektorgrafik. <\/p>\n<p>Auf Webseiten werden \u00fcberwiegend 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). <\/p>\n<p>Au\u00dferdem gibt es nat\u00fcrlich Inhalte, die clientseitig &#8211; also vom Browser &#8211; \u00fcber HTML, CSS oder JavaScript erzeugt werden. Mit CSS3 kann man zum Beispiel Farbverl\u00e4ufe erstellen, HTML5 hat das Canvas-Element, mit dem zweidimensionale Zeichnungen erstellt werden k\u00f6nnen. Auch das sind Vektorgrafiken, sie werden vom Computer erzeugt und k\u00f6nnen \u00fcber die Parameter ge\u00e4ndert werden. <\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-white ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Inhalt<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/konzeption\/farben-und-grafiken\/#Ausgezeichnete_Grafiken\" >Ausgezeichnete Grafiken<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/konzeption\/farben-und-grafiken\/#Vier_Einsatzzwecke_von_Bildern\" >Vier Einsatzzwecke  von Bildern<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/konzeption\/farben-und-grafiken\/#Platzhalter-Grafiken\" >Platzhalter-Grafiken<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/konzeption\/farben-und-grafiken\/#Dekorative_Grafiken\" >Dekorative Grafiken<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/konzeption\/farben-und-grafiken\/#Funktionale_Grafiken\" >Funktionale Grafiken<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/konzeption\/farben-und-grafiken\/#Wahl_der_Symbole\" >Wahl der Symbole<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/konzeption\/farben-und-grafiken\/#Die_groesse_der_Funktionsgraphiken\" >Die gr\u00f6\u00dfe der Funktionsgraphiken<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/konzeption\/farben-und-grafiken\/#Auszeichnung\" >Auszeichnung<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/konzeption\/farben-und-grafiken\/#Weniger_%E2%80%93_dafuer_besser\" >Weniger \u2013 daf\u00fcr besser<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/konzeption\/farben-und-grafiken\/#Weiterlesen\" >Weiterlesen<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Ausgezeichnete_Grafiken\"><\/span>Ausgezeichnete Grafiken<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Grunds\u00e4tzlich gibt es drei Attribute, mit denen das Image-Tag beschrieben werden kann: <\/p>\n<ul>\n<li>alt = Alternativtext<\/li>\n<li>, long desc = long description<\/li>\n<li>title = Titel<\/li>\n<\/ul>\n<p>Es gibt noch die Bildunterschrift, die aber als normaler Text unterhalb des Bildes untergebracht wird und f\u00fcr alle Nutzer ohne weiteres sichtbar ist.<\/p>\n<p>Alternativtexte sind mittlerweile fast Standard und dienen vor allem blinden Screenreader-Nutzern. Der Alt-Text wird au\u00dferdem 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. <\/p>\n<p>Der Titel erscheint, wenn man mit dem Maus-Cursor \u00fcber ein Bild f\u00e4hrt. Er kann vor allem Sehbehinderten helfen, die nicht erkennen k\u00f6nnen, was auf dem Bild zu sehen ist. Es mag verwunderlich sein, aber es stimmt tats\u00e4chlich: wenn man wei\u00df, um welches Objekt es sich handelt, erkennt man es leichter. <\/p>\n<p>Die lange Beschreibung wird in der Praxis kaum eingesetzt. Sie wird in HTML5 wahrscheinlich abgeschafft. Mir f\u00e4llt auch kein Fall ein, in welchem eine lange Beschreibung von Bildern nur f\u00fcr Blinde sinnvoll sein k\u00f6nnte. Alle Informationen, die hilfreich zum verst\u00e4ndnis sein k\u00f6nnten, sollten im Flie\u00dftext oder als Bildunterschrift vermittelt werden, damit sie allen Nutzern zugute kommen. Komplexe Schaubilder wie Kausaldiagramme werden auch f\u00fcr Laien verst\u00e4ndlicher, wenn sie ausf\u00fchrlich erl\u00e4utert werden. <\/p>\n<p>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\u00e4re f\u00fcr Blinde barrierefrei, wenn sie auch ohne diese Screenshots verst\u00e4ndlich ist. Der Alternativtext f\u00fcr den Screenshot m\u00fcsste also beschreiben, welche Funktion aufgerufen wird, bzw. wie man zu dieser Funktion kommt. <\/p>\n<p>Alt- und Titel-Text k\u00f6nnen 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\u00fcr Copyright-Verweise genutzt werden. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Vier_Einsatzzwecke_von_Bildern\"><\/span>Vier Einsatzzwecke  von Bildern<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Es lassen sich vier Einsatzzwecke von Grafiken\/Bildern auf Webseiten unterscheiden:<\/p>\n<ul>\n<li>&#x25aa;Platzhalter<\/li>\n<li>&#x25aa;dekorative Bilder<\/li>\n<li>Inhaltliche Bilder<\/li>\n<li>Funktionale Grafiken<\/li>\n<\/ul>\n<p>Inhaltliche Bilder sind Teil der redaktionellen Arbeit und wurden in einem anderen Abschnitt bereits behandelt. Um den Rest k\u00fcmmern sich Webdesigner und -entwickler. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Platzhalter-Grafiken\"><\/span>Platzhalter-Grafiken<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Platzhaltergraphiken sind kleine unsichtbare Bilder. Sie sind zumeist 1 Pixel gro\u00df und dienen zur Stabilisierung einer Layout-Tabelle. Tabellen wurden und werden teilweise noch heute zur Positionierung von Elementen verwendet. Leere Tabellenzellen sind f\u00fcr einige Browser problematisch, deshalb werden sie mit unsichtbaren Minigrafiken stabilisiert. F\u00fcr Blinde sind sie oft anstrengend, weil ihre Software den Dateinamen vorliest, der oft nichtssagend ist. Das st\u00f6rt die Orientierung auf der Seite. Platzhalter-Grafiken k\u00f6nnen ein leeres Alt-Attribut erhalten, dann werden sie von den Screenreadern ignoriert. In keinem Fall ist ein Alternativtext wie &#8222;Platzhalter&#8220; sinnvoll. <\/p>\n<p>Insgesamt gelten Platzhalter-Grafiken als schlechter Stil und sollten ebenso verbannt werden wie Layouttabellen. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Dekorative_Grafiken\"><\/span>Dekorative Grafiken<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>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&#8230;<\/p>\n<p>Diese Graphiken sind \u00e4u\u00dferst n\u00fctzlich: sie sollten auf einen Blick verraten, auf wessen Webauftritt man sich gerade befindet, erh\u00f6hen den Wiederkennungswert ungemein und vermitteln deshalb Sicherheit und Orientierung \u2013 n\u00fctzlich f\u00fcr Menschen mit Lernschwierigkeiten oder auch \u00e4ltere Menschen. Es ist zum Beispiel selten sinnvoll, eine knallbunte Webseite zu haben, wenn man ein Arzt ist, eine Ausnahme gilt h\u00f6chstens f\u00fcr Kinder\u00e4rzte. 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. <\/p>\n<p>Grafiken sollten sich erwartungskonform verhalten. Logo und Banner sind meistens mit der Startseite verkn\u00fcpft, andere Grafiken sind nicht weiter verkn\u00fcpft. F\u00fcr 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\u00e4t der Webseite beitragen. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Funktionale_Grafiken\"><\/span>Funktionale Grafiken<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Funktionale Graphiken sind Graphiken, mit denen eine Funktion verbunden ist. Sie werden auf praktisch allen Webseiten eingesetzt, bekannt ist das Druckersymbol f\u00fcr Druckfunktionen und das RSS-Symbol.<\/p>\n<p>Diese Symbole sind \u00e4u\u00dferst eing\u00e4ngig, weil wir sie teilweise schon aus anderen Kontexten kennen: den Desktop-Anwendungen, wo sie von Normal-Sehenden und Maus-Nutzern ausgiebig verwendet werden.<\/p>\n<p>Abgesehen von Blinden und stark sehbehinderten Menschen kommen diese Graphiken praktisch allen Menschen zu Gute, wenn sie gut gew\u00e4hlt und eing\u00e4ngig sind. Sie machen aus einer komplexen Interaktion mit der Website einen einfachen und intuitiven Prozess. Ansonsten m\u00fcsste jede Funktion als Wort ausgeschrieben werden, was wirklich un\u00fcbersichtlich ist. F\u00fcr Menschen mit Lernschwierigkeiten erleichtern Funktionsgrafiken ungemein die Bedienung der Seite. <\/p>\n<p>Weil immer mehr Programme auch im Internet angeboten werden, stellen sich an die Webanwendungen \u00e4hnliche 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 \u00e4hneln. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Wahl_der_Symbole\"><\/span>Wahl der Symbole<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Um ein Symbol verwenden zu k\u00f6nnen, sollte es hinreichend bekannt sein. Webdesigner m\u00f6gen viel Energie in eine h\u00fcbschere Metapher zum Einkaufswagen investieren. Das bringt aber nur etwas, wenn die Funktion \u201cWare in eine Zwischenablage speichern, um sie beim Abschlie\u00dfen des Bestellvorgangs mit weiteren Waren zu bestellen\u201d dem NUTZER deutlich wird. Diese ausschweifende Funktionsbeschreibung macht den Sinn dieser simplen Metapher vom Warenkorb deutlich. Statt langatmige Erkl\u00e4rungen abzugeben, versteht jeder Mensch mit ein wenig eShopping-Erfahrung, was mir der Erschaffer der Seiten mit dem Warenkorb-Symbol mitteilen m\u00f6chte.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Die_groesse_der_Funktionsgraphiken\"><\/span>Die gr\u00f6\u00dfe der Funktionsgraphiken<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Es leuchtet auf Anhieb ein, dass jede Graphik so gro\u00df sein muss, dass sie mit der Maus gut anzuklicken ist. Die Graphiken m\u00fcssen einen gewissen Abstand zueinander haben und sie sollten bei normaler Aufl\u00f6sung auf einem mittelgro\u00dfen Bildschirm gut zu erkennen und gut anzuklicken sein. Das sie mit der Tastatur per Tab-Taste erreichbar sein sollten, ist ebenso selbstverst\u00e4ndlich. F\u00fcr Menschen mit motorischen Schwierigkeiten, die mit einer Maus oder einem speziellen Eingabeger\u00e4t arbeiten, sind kleine Grafiken mit geringer Klickfl\u00e4che \u00e4rgerlich. Entweder muss die Maus exakt gef\u00fchrt werden oder es wird eine falsche Aktion ausgef\u00fchrt. Frustrationen dieser Art f\u00fchren mit Sicherheit dazu, dass selbst der geduldigste Nutzer der Site den R\u00fccken zukehren . <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Auszeichnung\"><\/span>Auszeichnung<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Hier gilt das, was ich bereits in \u00e4lteren Beitr\u00e4gen ausgef\u00fchrt habe. Blinde ben\u00f6tigen 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\u00f6nnte eine Kommentarfunktion, ein Leserbrief-Angebot oder ein E-Mail-Formular sein. F\u00fcr Funktionstexte gilt immer das Gleiche: m\u00f6glichst kurz, m\u00f6glichst pr\u00e4gnant, m\u00f6glichst eindeutig. <\/p>\n<p>Der Beschreibungstext einer Funktionsgrafik beschreibt ihre Funktion, in keinem Fall das Aussehen der Grafik. Eine Beschreibung wie  &#8222;Schwarzes, nach rechts zeigendes Dreieck&#8220; wie bei der Webanalyse-Software eTracker l\u00e4sst sich mit M\u00fche noch entschl\u00fcsseln, aber es ist trotzdem unn\u00f6tiger Aufwand. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Weniger_%E2%80%93_dafuer_besser\"><\/span>Weniger \u2013 daf\u00fcr besser<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Nicht jede Grafik ist auch eine Bereicherung f\u00fcr 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\u00fcr waren die Icons so klein, dass sie schwierig anzuklicken waren. <\/p>\n<p>Vor allem bei Funktionsgrafiken sollte immer \u00fcberlegt werden, ob sie an dieser Stelle in dieser Form tats\u00e4chlich gebraucht werden. Ist es zum Beispiel sinnvoll, einen Like- oder Twitter-Button direkt unterhalb der \u00dcberschrift eines Textes anzubieten? Der Betroffene m\u00fcsste den Text erst einmal gelesen haben, um ihn f\u00fcr empfehlenswert zu halten. Entgegen anderer Meinungen steigert eine hohe Like-Zahl nicht die Qualit\u00e4t eines Artikels. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Weiterlesen\"><\/span>Weiterlesen<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li>Eine <span class=\"removed_link\" title=\"http:\/\/www.einfach-fuer-alle.de\/blog\/id\/2745\/\">ausf\u00fchrliche Artikelserie<\/span> erschien bei &#8222;Einfach f\u00fcr Alle&#8220;. Dort gibt es auch noch mehr Links<\/li>\n<li>Bilder in der technischen Kommunikation &#8211; PDF<\/li>\n<li>&#8222;Visual Thinking. Probleme l\u00f6sen mit der Faktorenfeldmethode&#8220; Werner Prei\u00dfing 2008<\/li>\n<li><a href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/barrierefreie-redaktion\/grafiken-und-bilder\/\">Bilder und Grafiken<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Die Farbgestaltung geh\u00f6rt ebenso zur Zug\u00e4nglichkeit wie die Alternativtexte f\u00fcr Bilder. Auch wenn viele Sehbehinderte und Blinde Farben nur schlecht oder gar nicht wahrnehmen, sollte&#8230;<\/p>\n<div class=\"more-link-wrapper\"><a class=\"more-link\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/konzeption\/farben-und-grafiken\/\">Weiterlesen<span class=\"screen-reader-text\">Farben und Grafiken<\/span><\/a><\/div>\n","protected":false},"author":1,"featured_media":0,"parent":611,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-619","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/619","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/comments?post=619"}],"version-history":[{"count":10,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/619\/revisions"}],"predecessor-version":[{"id":9248,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/619\/revisions\/9248"}],"up":[{"embeddable":true,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/611"}],"wp:attachment":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/media?parent=619"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}