{"id":2546,"date":"2019-07-02T17:12:59","date_gmt":"2019-07-02T15:12:59","guid":{"rendered":"http:\/\/www.netz-barrierefrei.de\/wordpress\/?page_id=2546"},"modified":"2024-02-03T14:50:41","modified_gmt":"2024-02-03T12:50:41","slug":"bilder-und-grafiken-fuer-sehbehinderte-optimieren","status":"publish","type":"page","link":"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/barrierefreie-redaktion\/grafiken-und-bilder\/bilder-und-grafiken-fuer-sehbehinderte-optimieren\/","title":{"rendered":"Informationsgrafiken f\u00fcr Blinde und Sehbehinderte"},"content":{"rendered":"<p><iframe loading=\"lazy\" src=\"https:\/\/digitale-barrierefreiheit.podigee.io\/201-informationsgrafiken-fur-sehbehinderte-optimieren\/embed?context=external&#038;theme=default\" style=\"border: 0\" frameBorder=\"0\" height=\"100\" width=\"100%\"><\/iframe>Diagramme, Informations-Grafiken und Visualisierungen spielen eine zunehmende Rolle in der Kommunikation. In diesem Beitrag m\u00f6chte ich die Frage behandeln, wie diese Inhalte f\u00fcr Sehbehinderte und Blinde optimiert werden k\u00f6nnen. <\/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\/barrierefreie-redaktion\/grafiken-und-bilder\/bilder-und-grafiken-fuer-sehbehinderte-optimieren\/#Sehbehinderte_sind_die_groesste_Gruppe\" >Sehbehinderte sind die gr\u00f6sste Gruppe<\/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\/barrierefreie-redaktion\/grafiken-und-bilder\/bilder-und-grafiken-fuer-sehbehinderte-optimieren\/#Auswirkungen_von_Sehbehinderungen\" >Auswirkungen von Sehbehinderungen<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/barrierefreie-redaktion\/grafiken-und-bilder\/bilder-und-grafiken-fuer-sehbehinderte-optimieren\/#Verringerte_Sehschaerfe\" >Verringerte Sehsch\u00e4rfe<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/barrierefreie-redaktion\/grafiken-und-bilder\/bilder-und-grafiken-fuer-sehbehinderte-optimieren\/#Kontrast-Schwaeche_und_Farbenblindheit\" >Kontrast-Schw\u00e4che und Farbenblindheit<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/barrierefreie-redaktion\/grafiken-und-bilder\/bilder-und-grafiken-fuer-sehbehinderte-optimieren\/#Einschraenkungen_des_Gesichtsfeldes\" >Einschr\u00e4nkungen des Gesichtsfeldes<\/a><\/li><\/ul><\/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\/barrierefreie-redaktion\/grafiken-und-bilder\/bilder-und-grafiken-fuer-sehbehinderte-optimieren\/#Die_Rolle_von_Bildern_fuer_Sehbehinderte\" >Die Rolle von Bildern f\u00fcr Sehbehinderte<\/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\/barrierefreie-redaktion\/grafiken-und-bilder\/bilder-und-grafiken-fuer-sehbehinderte-optimieren\/#Problem-Bereiche\" >Problem-Bereiche<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/barrierefreie-redaktion\/grafiken-und-bilder\/bilder-und-grafiken-fuer-sehbehinderte-optimieren\/#Die_Bildgroesse\" >Die Bildgr\u00f6\u00dfe<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/barrierefreie-redaktion\/grafiken-und-bilder\/bilder-und-grafiken-fuer-sehbehinderte-optimieren\/#Die_Zahl_der_Elemente\" >Die Zahl der Elemente<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/barrierefreie-redaktion\/grafiken-und-bilder\/bilder-und-grafiken-fuer-sehbehinderte-optimieren\/#Text_in_Bildern\" >Text in Bildern<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/barrierefreie-redaktion\/grafiken-und-bilder\/bilder-und-grafiken-fuer-sehbehinderte-optimieren\/#Bestandteile_eines_Bildes\" >Bestandteile eines Bildes<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/barrierefreie-redaktion\/grafiken-und-bilder\/bilder-und-grafiken-fuer-sehbehinderte-optimieren\/#Position_des_Bild-Objekts\" >Position des Bild-Objekts<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/barrierefreie-redaktion\/grafiken-und-bilder\/bilder-und-grafiken-fuer-sehbehinderte-optimieren\/#Computer-generierte_Grafiken\" >Computer-generierte Grafiken<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/barrierefreie-redaktion\/grafiken-und-bilder\/bilder-und-grafiken-fuer-sehbehinderte-optimieren\/#Alternativ-Versionen_von_Informations-Grafiken\" >Alternativ-Versionen von Informations-Grafiken<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/barrierefreie-redaktion\/grafiken-und-bilder\/bilder-und-grafiken-fuer-sehbehinderte-optimieren\/#Funktionsgrafiken_und_Emojis\" >Funktionsgrafiken und Emojis<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/barrierefreie-redaktion\/grafiken-und-bilder\/bilder-und-grafiken-fuer-sehbehinderte-optimieren\/#Emojis_und_Emoticons_fuer_Sehbehinderte\" >Emojis und Emoticons f\u00fcr Sehbehinderte<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/barrierefreie-redaktion\/grafiken-und-bilder\/bilder-und-grafiken-fuer-sehbehinderte-optimieren\/#Bildbeschreibungen_fuer_Sehbehinderte\" >Bildbeschreibungen f\u00fcr Sehbehinderte<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/barrierefreie-redaktion\/grafiken-und-bilder\/bilder-und-grafiken-fuer-sehbehinderte-optimieren\/#Weiterlesen\" >Weiterlesen<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Sehbehinderte_sind_die_groesste_Gruppe\"><\/span>Sehbehinderte sind die gr\u00f6sste Gruppe<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Bilder und Fotos k\u00f6nnen so aufgenommen oder ausgew\u00e4hlt werden, dass sie von Sehbehinderten gut erkannt werden k\u00f6nnen. Kurioserweise spricht man in der Barrierefreiheits-Szene und au\u00dferhalb st\u00e4ndig \u00fcber alternative Bildbeschreibungen f\u00fcr Blinde, l\u00e4sst dabei aber die deutlich gr\u00f6\u00dfere Gruppe der Sehbehinderten au\u00dfen vor. Was Sehbehinderten in Bezug auf Bilder hilft, hilft in der Regel auch Sehenden, insbesondere wenn es um die Betrachtung von Bildern auf mittelm\u00e4\u00dfigen Smartphone-Displays geht. <a href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/formen-von-einschraenkungen\/sehbehinderte\/\">Barrierefreies Webdesign f\u00fcr Sehbehinderte<\/a>.<br \/>\nDer Einfachheit halber m\u00f6chte ich zwischen Fotos und Grafiken unterscheiden: Fotos und Bilder sind aufgenommen, Grafiken sind computer-generiert. Beide haben ihre Vor- und Nachteile.  F\u00fcr Informationsgrafiken sind code-basierte Formate wie SVG tats\u00e4chlich optimal, da sie sich problemlos wie Text in der Gr\u00f6\u00dfe ver\u00e4ndern lassen, ohne an Qualit\u00e4t einzub\u00fc\u00dfen.<br \/>\nGenerell gilt, dass die \u00c4sthetik und Attraktivit\u00e4t nicht leiden sollte. Barrierefreiheit soll den behinderten Menschen n\u00fctzen, aber die Nicht-Behinderten nicht abschrecken. Um ein gefl\u00fcgeltes Wort leicht abzuwandeln: Barrierefreiheit darf alles, nur nicht langweilen. ES ist also nat\u00fcrlich nicht verboten, Farbigkeit in Kinder- und Jugendpublikationen zu verwenden. Es sollten aber die Belange Sehbehinderter nicht unter den Tisch fallen.<br \/>\nBehalten Sie bitte im Hinterkopf: Es gibt zwar die M\u00f6glichkeit, Inhalte gr\u00f6\u00dfer zu zoomen. Das hei\u00dft aber nicht, dass die Nutzerinnen das auch immer tun wollen. Man muss ja wissen, dass da etwas ist, das sich zu zoomen lohnt. Und auch wenn man dies wei\u00df, hei\u00dft es nicht, dass man es auch tut. Denken Sie an Ihr eigenes Verhalten: Wenn Sie nicht unbedingt wollen oder m\u00fcssen, vermeiden Sie eher unn\u00f6tige Aktivit\u00e4ten. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Auswirkungen_von_Sehbehinderungen\"><\/span>Auswirkungen von Sehbehinderungen<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Generell lassen sich 3 Auswirkungen von Sehbehinderungen unterscheiden:<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Verringerte_Sehschaerfe\"><\/span>Verringerte Sehsch\u00e4rfe<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Das scharfe Erkennen von Objekten ist verringert. Komplexe Objekte wie etwa Buchstaben in Serifen-Schriften werden schlecht erkannt, weil die Details nicht unterschieden werden k\u00f6nnen. Stellt euch vor, ihr w\u00fcrdet die Funktion Weichzeichnen in der Fotobearbeitung verwenden und damit ein wenig \u00fcbertreiben. <\/p>\n<h3><span class=\"ez-toc-section\" id=\"Kontrast-Schwaeche_und_Farbenblindheit\"><\/span>Kontrast-Schw\u00e4che und Farbenblindheit<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Objekte mit geringen Kontrasten k\u00f6nnen schlecht erkannt bzw. vom Hintergrund unterschieden werden. Stellt euch einfach ein stark \u00fcber- oder unterbelichtetes Bild vor.<br \/>\nFarb-Fehlsichtigkeiten f\u00fchren dazu, dass Farben wie Rot und Gr\u00fcn nicht unterschieden werden k\u00f6nnen. Das l\u00e4sst sich in jeder Bildbearbeitung testen, wenn man das Bild in Graustufen anzeigt. Farben-Blindheit ist auch unter Nicht-Sehbehinderten weit verbreitet.<br \/>\nAu\u00dfen vor lassen m\u00f6chte ich das gro\u00dfe Feld von Farb-Fehlsichtigkeiten. Das ist so breit und individuell, dass es daf\u00fcr keine L\u00f6sung von der Stange geben kann. Hier sind individuelle Anpassungen notwendig. <\/p>\n<h3><span class=\"ez-toc-section\" id=\"Einschraenkungen_des_Gesichtsfeldes\"><\/span>Einschr\u00e4nkungen des Gesichtsfeldes<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Das Gesichtsfeld kann sehr klein oder nur punktuell scharf sein. Das f\u00fchrt dazu, dass Bildobjekte nur bruchst\u00fcckhaft erkannt werden k\u00f6nnen. Deswegen werden Objekte vergr\u00f6\u00dfert, um Details besser zu erkennen oder verkleinert, um das Objekt als Ganzes sehen zu k\u00f6nnen. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Die_Rolle_von_Bildern_fuer_Sehbehinderte\"><\/span>Die Rolle von Bildern f\u00fcr Sehbehinderte<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Sehbehinderte sind n\u00e4her an Sehenden als an Blinden, was den Umgang mit Bildern angeht. Hei\u00dft, sie zeigen \u00e4hnliche Reaktionen, fokussieren automatisch auf Bilder und reagieren emotional nicht anders, als es Sehende tun w\u00fcrden &#8211; vorausgesetzt, sie nehmen das Bild war und erkennen dessen Inhalt auf Anhieb. Bei starker Vergr\u00f6\u00dferung ist es m\u00f6glich, dass das Bild nicht gesehen wird bzw. nur ein nicht aussagekr\u00e4ftiger Ausschnitt davon. Stellt euch vor, ihr h\u00e4ttet ein Puzzle und w\u00fcrdet immer nur jeweils ein St\u00fcck des Puzzles anschauen k\u00f6nnen. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Problem-Bereiche\"><\/span>Problem-Bereiche<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Insgesamt kann man drei Problembereiche ausmachen: <\/p>\n<h3><span class=\"ez-toc-section\" id=\"Die_Bildgroesse\"><\/span>Die Bildgr\u00f6\u00dfe<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>In der Regel sind Bilder in Rasterformaten wie JPG f\u00fcr eine Mindestgr\u00f6\u00dfe optimiert. Geht man dar\u00fcber hinaus, werden die Bilder schnell unscharf.<br \/>\nBei der Bildgr\u00f6\u00dfe ist vor allem relevant, dass sich das Bild vergr\u00f6\u00dfern und verkleinern l\u00e4sst, wobei die wichtigen Bild-Elemente immer noch erkennbar sein sollten. Verkleinern, weil es auch Sehbehinderte mit geringem Gesichtsfeld gibt. Als Faustregel: Das Bild sollte bei 50 Prozent Verkleinerung und 200 Prozent Vergr\u00f6\u00dferung immer noch gut erkennbar sein.<br \/>\nIm Idealfall arbeiten Sie mit Vektorgrafiken, weil diese stufenlos ver\u00e4ndert werden k\u00f6nnen. <\/p>\n<h3><span class=\"ez-toc-section\" id=\"Die_Zahl_der_Elemente\"><\/span>Die Zahl der Elemente<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Werden zu viele Elemente auf einem Bild dargestellt, ist das Bildobjekt nur schwer auszumachen. Bei bestimmten Bildarten wie Wimmelbildern ist das stil-bedingt. Bei anderen Bildern f\u00fchrt es jedoch zur Verwirrung: Zeige ich eine gr\u00fcne Landschaft, ist dann die Landschaft der Bildinhalt oder gibt es in dem ganzen Gr\u00fcn noch etwas, was der Fotograf besonders hervorheben wollte? Wenn ich eine M\u00fcllkippe zeige, sehe ich Unmengen von M\u00fcll, aber der Sehbehinderte sieht vielleicht einzelne M\u00fcllst\u00fccke und fragt sich, was das Ganze soll. Wir setzen einfach mal voraus, dass der Sinn des Bildes nicht aus dem Kontext klar wird.<br \/>\nEin Bild ohne klaren Fokus erh\u00f6ht die kognitiven Anforderungen. Der Sehbehinderte sucht nach dem Bild-Inhalt, sieht aber viele Einzel-Elemente, deren Relevanz er nicht einsch\u00e4tzen kann, wenn er das Bild nicht als Gesamtobjekt erkennen kann.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-content\/uploads\/wimmelbild.jpg\" alt=\"Wimmelbild\" width=\"535\" height=\"340\" class=\"alignleft size-full wp-image-2547\" srcset=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-content\/uploads\/wimmelbild.jpg 535w, https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-content\/uploads\/wimmelbild-300x191.jpg 300w\" sizes=\"auto, (max-width: 535px) 100vw, 535px\" \/><br \/>\nEin Sehender sieht ein Bild als Ganzes auf einen Blick. Ein Sehbehinderter muss je nach Sehst\u00e4rke das Bild sequenzweise erschlie\u00dfen. Sind viele unterschiedliche Objekte enthalten, muss er jedes Objekt einzeln identifizieren und einsch\u00e4tzen, ob es das Bildobjekt ist. Gerade bei nicht-professionellen Fotos etwa auf Social-media-Kan\u00e4len finden wir h\u00e4ufig solche Bilder.<br \/>\nBei komplexen Infografiken mit eigener Bildsprache ist zus\u00e4tzlich das Ged\u00e4chtnis gefordert. Der Sehbehinderte muss sich einzelne Bild-Elemente und ihre Aufgabe merken, da er nicht st\u00e4ndig zwischen Objekt und Legende bzw. Erkl\u00e4rung wechseln kann. Man kann davon ausgehen, dass ein Sehbehinderter weniger Erfahrung mit Infografiken hat als ein Sehender. Auch deshalb wird ihm das Decodieren der Symbole schwerer fallen.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-content\/uploads\/logistic.png\" alt=\"\" width=\"960\" height=\"640\" class=\"alignleft size-full wp-image-2548\" srcset=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-content\/uploads\/logistic.png 960w, https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-content\/uploads\/logistic-300x200.png 300w, https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-content\/uploads\/logistic-768x512.png 768w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Text_in_Bildern\"><\/span>Text in Bildern<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Text in Bildern schlie\u00dflich ist immer eine schlechte Idee. Das finden wir tats\u00e4chlich auch bei professionellen Organisationen und selbst bei Behinderten-Organisationen kommt es h\u00e4ufig vor, dass sie Bilder von Veranstaltungs-Plakaten auf Twitter oder Facebook ohne Textkommentar und Beschreibung posten. Aus denen soll man dann die Veranstaltungsdaten ablesen. Blinde k\u00f6nnen das nicht, Sehbehinderte kann auch leicht entgehen, das da was steht. In jedem Fall ist es extrem unangenehm, Text aus Bildern auszulesen. Der Text oder die wesentlichen Daten sollten in der Beschreibung stehen. Das k\u00f6nnt ihr leicht selbst pr\u00fcfen: Ist der Text nicht mit dem Maus-Cursor markierbar, ist er Bestandteil des Bildes.<br \/>\nErlaubt ist hingegen, Text auf Bildern oder Hintergr\u00fcnden via CSS zu platzieren. Hier ist aber der Mindest-Kontrast von 4.5:1 bzw. 3:1 zu beachten.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Bestandteile_eines_Bildes\"><\/span>Bestandteile eines Bildes<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Ein Bild besteht grunds\u00e4tzlich aus zwei Teilen: Dem Bild-Objekt und dem Hintergrund. Das Bild-Objekt ist das, worauf sich der Blick eigentlich richten soll: Eine Person, ein Tier oder ein Objekt. Der Hintergrund ist dementsprechend das, was um das Objekt herum ist.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Position_des_Bild-Objekts\"><\/span>Position des Bild-Objekts<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Das Bild-Objekt befindet sich idealerweise oberhalb des eigentlichen Bild-Mittelpunktes. Dort schauen wir bei Aufnahmen von Personen oder Tieren als erstes hin.<br \/>\nDer Hintergrund sollte sich m\u00f6glichst deutlich vom Bildobjekt unterscheiden. Ist der Hintergrund dunkel, kann er zum Bild-Objekt hin heller werden oder umgekehrt. Das erleichtert Sehbehinderten das Auffinden des Bild-Objektes.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-content\/uploads\/milchstrasse.jpg\" alt=\"\" width=\"960\" height=\"640\" class=\"alignleft size-full wp-image-2549\" srcset=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-content\/uploads\/milchstrasse.jpg 960w, https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-content\/uploads\/milchstrasse-300x200.jpg 300w, https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-content\/uploads\/milchstrasse-768x512.jpg 768w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Computer-generierte_Grafiken\"><\/span>Computer-generierte Grafiken<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Grafiken sind wie erw\u00e4hnt computer-generiert. In der Regel werden sie selbst gezeichnet oder mit Programmen wie Excel generiert.<br \/>\nGrafiken haben gegen\u00fcber Bildern einen unschlagbaren Vorteil: Sie sind in aller Regel auch bei Farbumkehr und in anderen Farbkombinationen noch erkennbar. Das gilt zum Beispiel auch f\u00fcr stilisierte Figuren oder f\u00fcr die Grafiken, die in der Leichten Sprache eingesetzt werden. Wer also eine sehbehinderten-freundliche Publikation plant, sollte eher auf Grafiken setzen.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-content\/uploads\/logistik-diagramm-umgedreht.jpg\" alt=\"\" width=\"960\" height=\"640\" class=\"alignleft size-full wp-image-2550\" srcset=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-content\/uploads\/logistik-diagramm-umgedreht.jpg 960w, https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-content\/uploads\/logistik-diagramm-umgedreht-300x200.jpg 300w, https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-content\/uploads\/logistik-diagramm-umgedreht-768x512.jpg 768w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/><br \/>\nEs gibt auch eine intelligente Farbumkehr, bei der die Farben von Bildern und Grafiken nicht umgekehrt werden. Standardm\u00e4\u00dfig kenne ich das allerdings nur bei Ger\u00e4ten von Apple. Windows und Android k\u00f6nnen das bisher nicht von Haus aus. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Alternativ-Versionen_von_Informations-Grafiken\"><\/span>Alternativ-Versionen von Informations-Grafiken<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Dank moderner Grafik-Bibliotheken ist es heute kein Problem mehr, gleich mehrere Versionen einer Infografik anzubieten. Sie k\u00f6nnen zum Beispiel mehrere Tabs anbieten, in denen verschiedene Versionen der Grafik gezeigt werden. Folgende M\u00f6glichkeiten w\u00e4ren unter anderem denkbar:<\/p>\n<ul>\n<li>eine kontrastreichere Version bzw. eine Version, die in Graustufen funktioniert<\/li>\n<li>eine vereinfachte Version der Grafik mit weniger Elementen<\/li>\n<li>die Grafik als HTML-Tabelle &#8211; soweit das m\u00f6glich ist<\/li>\n<\/ul>\n<p>Zum ersten Aspekt: Hier sollte es reichen, wenn Sie zwei Farbpaletten anlegen: Eine f\u00fcr die urspr\u00fcngliche Version, eine f\u00fcr die kontrastreichere Version. Eigentlich halten wir es nicht f\u00fcr zielf\u00fchrend, mehrere Versionen ein und derselben Grafik anzubieten, aber manchmal geht es nicht anders.<br \/>\nZum zweiten Aspekt: Solch eine Grafik kann einfach erstellt werden, wenn Sie mit mehreren Ebenen arbeiten. Auf der ersten Ebene k\u00f6nnten Sie die Elemente f\u00fcr die vereinfachte Version ablegen, auf der zweiten Ebene die koplexen Elemente.<br \/>\nZum 3. Aspekt: Wenn Grafiken aus Tabellen erzeugt werden, ist es immer sinnvoll, die Tabelle zus\u00e4tzlich anzubieten. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Funktionsgrafiken_und_Emojis\"><\/span>Funktionsgrafiken und Emojis<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Eine spezielle Herausforderung sind Grafiken, mit denen eine Funktion verbunden ist. Dazu geh\u00f6ren etwa das Drucker-Symbol f\u00fcr &#8222;Drucken&#8220; oder das Brief-Symbol f\u00fcr &#8222;Mail versenden&#8220;. Fr\u00fcher h\u00e4tte man den HTML-Titel verwendet, um diese Objekte zu beschreiben. Heute ist der Titel wie oben erw\u00e4hnt f\u00fcr viele Personen nicht mehr wahrnehmbar, wenn sie die Website mobil ohne Maus nutzen. Eine visuelle Textbeschreibung wird aus Platzgr\u00fcnden h\u00e4ufig nicht verwendet.<br \/>\nHier bleibt die Empfehlung, eine m\u00f6glichst gut erkennbare und gelernte Icon-Sprache zu verwenden, hei\u00dft, die Designerin sollte sich hier nicht kreativ austoben. Achten Sie auch darauf, dass die Grafik in einem Kontrastmodus noch gut erkennbar ist. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Emojis_und_Emoticons_fuer_Sehbehinderte\"><\/span>Emojis und Emoticons f\u00fcr Sehbehinderte<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Ein spezielles Problem sind Emojis und Emoticons. Die Unterschiede etwa zwischen Gesichtern in Emojis sind zumindest f\u00fcr Sehbehinderte rudiment\u00e4r. Sie erkennen vielleicht die g\u00e4ngisten Emojis, alles weitere ist f\u00fcr sie nicht intuitiv erkennbar. Solche Grafiken sollten nicht geh\u00e4uft eingesetzt werden.<br \/>\nSie sollten immer im Hinterkopf haben, dass die Nutzer mit Smartphones oder kleinen Tablets auf die Seite gehen. Nur weil ein Icon auf einem 24-Zoll-Display exzellent erkennbar ist, muss das f\u00fcr ein 150-\u20ac-Smartphone nicht gelten. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Bildbeschreibungen_fuer_Sehbehinderte\"><\/span>Bildbeschreibungen f\u00fcr Sehbehinderte<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Der Titel ist ein HTML-Attribut, Der Text wird angezeigt, wenn man mit dem Mauscursor \u00fcber das Bild f\u00e4hrt. Da es bei Smartphones und Tablets in der Regel kein Maus-Over gibt, bleibt der Titel f\u00fcr solche Nutzer unsichtbar. Er kann trotzdem eingesetzt werden &#8211; er st\u00f6rt ja niemanden &#8211; es ist aber kein Verlass darauf, dass der Nutzer ihn wahrnimmt. Er sollte aber m\u00f6glichst nicht identisch mit der Bild-Unterschrift sein.<br \/>\nStatt dem Titel l\u00e4sst sich eine Bildunterschrift unterbringen. Sie ist f\u00fcr alle Nutzer, also auch f\u00fcr Blinde sichtbar.<br \/>\nSehbehinderte profitieren von einer Beschreibung, auch wenn sie ein relativ gutes Sehverm\u00f6gen haben. Sie erkennen etwas leichter, wenn sie wissen, was sie sehen sollten. Ist etwa ein Hund abgebildet, k\u00f6nnen sie nach der Hundeschnauze, den Augen und weiteren gut erkennbaren Objekten Ausschau halten.<br \/>\nEine Bildbeschreibung kann und sollte kurz und neutral gehalten werden. Mit ein paar Ausnahmen, dazu geh\u00f6ren etwa Kunstwerke oder wenn das Bild das eigentliche Thema des Textes ist, sind ausschweifende Beschreibungen f\u00fcr die meisten Leser eher st\u00f6rend.<br \/>\nInformationsgrafiken f\u00fcr Blinde<br \/>\nDieser Abschnitt kann relativ kurz gehalten werden. Es gibt Blinde mit einem nutzbaren Sehrest, sie werden \u00e4hnlich wie hochgradig Sehbehinderte arbeiten, k\u00f6nnen sich also Informationsgrafiken mit starkem Zoom anschauen.<br \/>\nBlinde ohne in diesem Zusammenhang nutzbaren Sehrest haben diese M\u00f6glichkeit nicht. Trotz allem technischen Fortschritt gibt es aktuell nur die beiden klassischen M\u00f6glichkeiten, Informationsgrafiken f\u00fcr sie zug\u00e4nglich zu machen:<\/p>\n<ul>\n<li>F\u00fcr Grafiken, die Zahlenwerte und quantitative Entwicklungen abbilden, ist die Datentabelle die beste Alternative.<\/li>\n<li>F\u00fcr Grafiken, die keine Zahlenwerte abbilden, gibt es lediglich die Bildbeschreibung.<\/li>\n<\/ul>\n<p>Es gibt weitere M\u00f6glichkeiten, die aber in den meisten F\u00e4llen sehr aufwendig sind. Mit 3D-Druck und verwandten Methoden k\u00f6nnen taktile Grafiken erstellt werden. Au\u00dferdem gibt es Displays, die Grafiken mittels ver\u00e4nderter Oberfl\u00e4chen darstellen k\u00f6nnen. Sie sind allerdings teuer und relativ selten bei Privatpersonen zu finden. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Weiterlesen\"><\/span>Weiterlesen<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li><a href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-web-2-0-ein-leitfaden-zu-social-media-und-behinderung\/emojis\/\">Barrierefreiheit bei Emojis und Emoticons<\/a><\/li>\n<li><a href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/verstaendlichkeit-von-informations-grafiken\/\">Barrierefreiheit von Infografiken<\/a><\/li>\n<li><a href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/visuelle-text-gestaltung\/\">Barrierefreie Gestaltung von Grafik und Print<\/a><\/li>\n<li><a href=\"https:\/\/netz-barrierefrei.de\/en\/infographics.html\">Making accessible Information Graphics for Blind and visually Impaired<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Diagramme, Informations-Grafiken und Visualisierungen spielen eine zunehmende Rolle in der Kommunikation. In diesem Beitrag m\u00f6chte ich die Frage behandeln, wie diese Inhalte f\u00fcr Sehbehinderte und&#8230;<\/p>\n<div class=\"more-link-wrapper\"><a class=\"more-link\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/barrierefreie-redaktion\/grafiken-und-bilder\/bilder-und-grafiken-fuer-sehbehinderte-optimieren\/\">Weiterlesen<span class=\"screen-reader-text\">Informationsgrafiken f\u00fcr Blinde und Sehbehinderte<\/span><\/a><\/div>\n","protected":false},"author":1,"featured_media":0,"parent":586,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2546","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/2546","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=2546"}],"version-history":[{"count":24,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/2546\/revisions"}],"predecessor-version":[{"id":9395,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/2546\/revisions\/9395"}],"up":[{"embeddable":true,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/586"}],"wp:attachment":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/media?parent=2546"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}