{"id":586,"date":"2018-03-21T19:34:02","date_gmt":"2018-03-21T17:34:02","guid":{"rendered":"http:\/\/www.netz-barrierefrei.de\/wordpress\/?page_id=586"},"modified":"2023-08-21T17:46:51","modified_gmt":"2023-08-21T15:46:51","slug":"grafiken-und-bilder","status":"publish","type":"page","link":"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/barrierefreie-redaktion\/grafiken-und-bilder\/","title":{"rendered":"Bilder im Content-Bereich &#8211; Auswahl und Beschreibung"},"content":{"rendered":"<p>Es ist immer sinnvoll, in einem Text Bilder einzusetzen. Sie lockern den Text auf und unterstreichen im besten Fall seine Kernaussage. In vielen F\u00e4llen erleichtern Grafiken das Verst\u00e4ndnis, wenn zum Beispiel in einem Diagramm eine Entwicklung zusammengefasst wird. Ein aktueller Trend sind interaktive Informationsgrafiken, die zum Beispiel gro\u00dfe Datenmengen anschaulich darstellen. F\u00fcr viele Menschen k\u00f6nnen solche Graphiken das Verst\u00e4ndnis komplexer Inhalte erleichtern. <\/p>\n<p>In diesem Abschnitt m\u00f6chte ich mich mit redaktionellen Bildern besch\u00e4ftigen, die vor allem als Erg\u00e4nzung textlicher Inhalte oder als Informationsgrafiken verwendet werden. Im Konzeptionsteil besch\u00e4ftige ich mich mit Farben und Grafiken, die im Design und als Funktionsgrafiken eingesetzt werden. <\/p>\n<p>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\u00fcr beide Darstellungsformen die Gleichen, sie haben aber unterschiedliche Einsatzzwecke und erfordern daher unterschiedliche herangehensweisen. <\/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\/#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\/barrierefreie-redaktion\/grafiken-und-bilder\/#Beschreibungen\" >Beschreibungen<\/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\/barrierefreie-redaktion\/grafiken-und-bilder\/#Bildauswahl\" >Bildauswahl<\/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\/barrierefreie-redaktion\/grafiken-und-bilder\/#Grafiken\" >Grafiken<\/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>In HTML gibt es drei M\u00f6glichkeiten, Bilder mit einem beschreibenden Text zu versehen:<\/p>\n<ul>\n<li>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.<\/li>\n<li>Der Titel oder title wird angezeigt, wenn der Nutzer mit dem Mauszeiger \u00fcber das Bild f\u00e4hrt, er ist also f\u00fcr alle Nutzer sichtbar.<\/li>\n<li>Die lange Beschreibung oder long desc ist f\u00fcr l\u00e4ngere Beschreibungen zum Bild gedacht. Sie wird in der Praxis kaum eingesetzt<\/li>\n<\/ul>\n<p>Die \u00dcbersetzung 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. <\/p>\n<p>Unabh\u00e4ngig von diesen Attributen gibt es die Bildunterschrift, die unmittelbar unter dem Bild angezeigt wird und f\u00fcr alle Nutzer ohne Weiteres sichtbar ist. Sie kann als Alternative zur langen Beschreibung genutzt werden. \t<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Beschreibungen\"><\/span>Beschreibungen<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>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<br \/>\nGegenstandes zu nennen. Beschreiben sollte man das Bildobjekt nur, wenn es zum Verst\u00e4ndnis des Textes beitr\u00e4gt. L\u00e4ngere Beschreibungen kann man im Bild-Untertitel<br \/>\nunterbringen: \u201cAngela Merkel \u00fcbt harte Kritik an der Opposition\u201d ist f\u00fcr Alt oder Bildunterschrift in den meisten F\u00e4llen vollkommen ausreichend. Stell dir einfach vor, welche Information du ben\u00f6tigen w\u00fcrdest, wenn das Bild nicht angezeigt w\u00fcrde oder nicht erkennbar w\u00e4re. Eine detailierte Beschreibung des Inhaltes ist selten sinnvoll. <\/p>\n<p>Titel und Alternativtext k\u00f6nnen 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\u00f6nnen. F\u00fcr sehbehinderte Nutzer ist es leichter, ein Objekt zu erkennen, wenn sie wissen, worum es sich handelt. <\/p>\n<p>Die Bildunterschrift sollte sich vom Alternativ- und Titeltext unterscheiden und weitere Informationen liefern. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Bildauswahl\"><\/span>Bildauswahl<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Bei der Bildauswahl ist wichtig, dass sich das Bildobjekt deutlich vom Hintergrund abhebt. Bei den zahlreichen Farbfehlsichtigkeiten und Sehbehinderungen<br \/>\nlassen 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. <\/p>\n<p>Nach M\u00f6glichkeit sollte auf starke Reize etwa durch grelle Farben verzichtet werden, da Menschen mit Lernbehinderung darauf empfindlich reagieren k\u00f6nnen. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Grafiken\"><\/span>Grafiken<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>F\u00fcr selbsterstellte Grafiken wie Diagramme ist entscheidend, dass alle Bestandteile deutlich zu erkennen sind, das gilt auch f\u00fcr die Begleittexte, die zumeist auch als Pixelgraphik<br \/>\neingebunden werden. Bei den Wahlergebnissen stehen die Parteinamen und Prozentangaben oft in der Tortengraphik. Das ist suboptimal, da die Tortenst\u00fccke<br \/>\nmeist in den Parteifarben gestaltet sind und oft zu geringen Kontrast bieten. Fehlen die Parteinamen ganz, kann eine Rot-Gr\u00fcn-Schw\u00e4che voll durchschlagen.<\/p>\n<p>Ein Kompromi\u00df besteht darin, eine kleine Graphik in den Artikel einzubetten und mit einem Klick darauf die Graphik in einer besseren Aufl\u00f6sung anzubieten. Die eingebetteten Texte sollten bei leichter Vergr\u00f6\u00dferung nicht pixelig werden. Der einfachste Weg, das zu erreichen ist \u00fcbrigens, Vektorgrafik-Formate wie SVG oder Flash einzusetzen. Diese werden auch bei Vergr\u00f6\u00dferung nicht unscharf. <\/p>\n<p>Die Alternative zu einem graphischen Diagramm ist nat\u00fcrlich die Tabelle, aus der das Diagramm erstellt wurde. F\u00fcr Blinde sind Tabellen nicht unbedingt \u00fcbersichtlich, 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.<br \/>\n<h2was steht im Begleittext?<\/h2>\n<p>Grunds\u00e4tzlich sollte ein Alternativtext kurz sein. Er unterbricht meistens den Leseflu\u00df und ist oft nicht wichtig zum Verst\u00e4ndnis des Textes. L\u00e4ngere Texte sollten<br \/>\nin die Bildunterschrift, denn sofern sie wichtig sind, kommen sie hier allen zugute. Und alles andere sollte in den Flie\u00dftext.<\/p>\n<h2>Lekt\u00fcreempfehlungen<\/h2>\n<ul>\n<li><a href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreiheit-bei-audio-und-video-multimedia-fuer-alle\/\">Barrierefreies Multimedia<\/a><\/li>\n<li><a href=\"https:\/\/www.ballstaedt-kommunikation.de\/wp-content\/uploads\/Skript_Bilder_Technischen-Kommunikation.pdf\">Bilder in der technischen Kommunikation &#8211; PDF<\/a><\/li>\n<li>&#8222;Visual Thinking. Probleme l\u00f6sen mit der Faktorenfeldmethode&#8220; Werner Prei\u00dfing 2008<\/li>\n<li><a href=\"https:\/\/netz-barrierefrei.de\/en\/different-images.html\">Selection and Description of Content Images<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Es ist immer sinnvoll, in einem Text Bilder einzusetzen. Sie lockern den Text auf und unterstreichen im besten Fall seine Kernaussage. In vielen F\u00e4llen erleichtern&#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\/\">Weiterlesen<span class=\"screen-reader-text\">Bilder im Content-Bereich &#8211; Auswahl und Beschreibung<\/span><\/a><\/div>\n","protected":false},"author":1,"featured_media":0,"parent":575,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-586","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/586","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=586"}],"version-history":[{"count":11,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/586\/revisions"}],"predecessor-version":[{"id":9682,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/586\/revisions\/9682"}],"up":[{"embeddable":true,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/575"}],"wp:attachment":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/media?parent=586"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}