{"id":623,"date":"2018-03-21T20:04:35","date_gmt":"2018-03-21T18:04:35","guid":{"rendered":"http:\/\/www.netz-barrierefrei.de\/wordpress\/?page_id=623"},"modified":"2019-06-18T17:30:38","modified_gmt":"2019-06-18T15:30:38","slug":"platzhalter-grafiken","status":"publish","type":"page","link":"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/konzeption\/farben-und-grafiken\/platzhalter-grafiken\/","title":{"rendered":"Platzhalter-Grafiken"},"content":{"rendered":"<p>Bilder spielen im Internet eine wachsende Rolle, auch wenn die Bildsprache nicht immer sinnvoll ist. Das Thema Bilder spielt bisher im Barrierefreiheitsdiskurs eine eher untergeordnete Rolle, weshalb ich das einmal angehen m\u00f6chte.<br \/>\nZun\u00e4chst einmal vorneweg: Barrierefreiheit wird nicht nur f\u00fcr Blinde und Sehbehinderte gemacht. Abgesehen davon, dass Sehbehinderung so ziemlich alles zwischen 10 und 100 Prozent Sehrest sein kann, man denke an eingeschr\u00e4nkte Gesichtsfelder, erfreuen sich alle an sinnvollen, den Gehalt einer Website erg\u00e4nzenden und auflockernden Bildern und Graphiken. Es ist nicht jeder Menschen Sache, sich durch <span class=\"removed_link\" title=\"http:\/\/hyperkontext.at\/weblog\/artikel\/web-abenteuer-textwueste-werkzeuge-und-strategie\/\">Textw\u00fcsten zu quellen<\/span>.<\/p>\n<div style=\"width:425px\" id=\"__ss_5837287\"><strong style=\"display:block;margin:12px 0 4px\"><span class=\"removed_link\" title=\"http:\/\/www.slideshare.net\/domingosdeoliveira\/bilder-barrierefrei-verwenden\">Bilder barrierefrei verwenden<\/span><\/strong><object id=\"__sse5837287\" width=\"425\" height=\"355\"><param name=\"movie\" value=\"http:\/\/static.slidesharecdn.com\/swf\/ssplayer2.swf?doc=bilderbarrierefreiverwenden-101119121627-phpapp01&#038;stripped_title=bilder-barrierefrei-verwenden&#038;userName=domingosdeoliveira\" \/><param name=\"allowFullScreen\" value=\"true\"\/><param name=\"allowScriptAccess\" value=\"always\"\/><embed name=\"__sse5837287\" src=\"http:\/\/static.slidesharecdn.com\/swf\/ssplayer2.swf?doc=bilderbarrierefreiverwenden-101119121627-phpapp01&#038;stripped_title=bilder-barrierefrei-verwenden&#038;userName=domingosdeoliveira\" type=\"application\/x-shockwave-flash\" allowscriptaccess=\"always\" allowfullscreen=\"true\" width=\"425\" height=\"355\"\/><\/object><\/p>\n<div style=\"padding:5px 0 12px\">View more <span class=\"removed_link\" title=\"http:\/\/www.slideshare.net\/\">presentations<\/span> from <a href=\"https:\/\/www.slideshare.net\/domingosdeoliveira\">Domingos de Oliveira<\/a>.<\/div>\n<\/div>\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\/platzhalter-grafiken\/#Zwei_Arten_von_Bildern\" >Zwei Arten von Bildern<\/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\/platzhalter-grafiken\/#Ueber_alts_und_long_descs\" >\u00dcber alts und long descs<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Zwei_Arten_von_Bildern\"><\/span>Zwei Arten von Bildern<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Es lassen sich zwei Arten von gestalterischen Bildern unterscheiden.<\/p>\n<ul>\n<li>Platzhalter<\/li>\n<li>dekorative Bilder<\/li>\n<\/ul>\n<p>Ich verwende hier die Begriffe Bilder und Graphiken synonym. Was verbirgt sich hinter diesen obskuren Bezeichnungen?<br \/>\nPlatzhaltergraphiken sind kleine unsichtbare Bilder. Sie sind zumeist 1 Pixel gro\u00df und dienen zur Stabilisierung einer Layout-Tabelle. Layout-Tabellen sind die Lieblinge schlechter Webdesigner &#8211; man muss es leider sagen &#8211; und sind noch lange nicht ausgestorben. F\u00fcr Blinde ist es eine reine Tortur, solche Seiten mit einem Screenreader zu erkunden, denn alles, was sie h\u00f6ren ist: &#8222;Tabelle mit 2 Spalten und 2 Reihen, Spalte 1, Reihe 1, Spalte 1, Reihe 2, Spalte 2&#8230;&#8220; und das tolle an Layout-Tabellen ist, dass sich in diesen f\u00fcr Sehende unsichtbaren Spalten gar nichts befinden muss &#8211; aber es k\u00f6nnte was drin sein. F\u00fcr eine komplexe Website braucht man eine ganze Reihe solcher Konstrukte, so dass ich daf\u00fcr garantieren kann, dass der Blinde Nutzer nach dem ersten Besuch nie wiederkommen wird.<br \/>\nWeil die Browser mit leeren Tabellen nichts anfangen k\u00f6nnen &#8211; wer k\u00e4me denn schon auf die Idee, leere Tabellen zu verwenden, m\u00fcssen hier oft Spacer-Gifs verwendet werden, damit das ganze Layout nicht kollabiert.<br \/>\nDekorative Graphiken sind dann schon n\u00fctzlicher. Das sind Bilder, die &#8211; wer h\u00e4tte es gedacht &#8211; dekorativ sind, also keine Aufgabe erf\u00fcllen, aber die seite oft aufh\u00fcbschen sollen. Es sind fast immer Graphiken, die auf jeder Seite eines Webauftritts vorkommen und sich dort immer auf der gleichen Position befinden: Banner, Logo, Hintergrundbilder.<br \/>\nDiese 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 &#8211; n\u00fctzlich f\u00fcr Menschen mit Lernschwierigkeiten. Au\u00dferdem verhindern sie nebenbei, dass auch der letzte Platz mit Funktionalit\u00e4t zugepflastert wird. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Ueber_alts_und_long_descs\"><\/span>\u00dcber alts und long descs<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Grunds\u00e4tzlich gibt es drei Attribute, mit denen das Image-Tag beschrieben werden kann: <code>alt = Alternativtext, long desc = long description, title = Titel<\/code>.<br \/>\nWer die letzte Macromedia-Version des Dreamweaver verwendet hat, kennt die lange Beschreibung vielleicht noch. Ansonsten wird die long desc kaum noch verwendet und wird in HTML5 abgeschafft. Sie sollte urspr\u00fcnglich dazu dienen, l\u00e4ngere Beschreibungen f\u00fcr Screenreader unterzubringen. Alternativ-Texte sind mittlerweile fast Standard und dienen vor allem blinden Screenreader-Nutzern. Was sie enthalten sollten, wird im n\u00e4chsten Beitrag behandelt. Der Titel erscheint, wenn man mit dem Maus-Cursor \u00fcber ein Bild f\u00e4hrt. Es gibt noch die Bildunterschrift, die aber als normaler Text unterhalb des Bildes untergebracht wird und f\u00fcr alle Nutzer ohne weiteres sichtbar ist.<br \/>\nSpacer-Gifs brauchen keinen Alternativ-Text. Allerdings wissen die Screenreader nicht, welche Graphiken n\u00fctzlich sind und welche nicht. Sie lesen daher den Dateinamen in der Hoffnung vor, er m\u00f6ge Sinn machen. Was sich hinter der Datei as131412112.gif verbirgt, erschlie\u00dft sich dem Blinden allerdings nicht. Ein einfacher und \u00fcbrigens auch HTML-valider Weg ist es, das Alt-Tag zu verwenden, es aber leer zu lassen:<code>img src=\"as131412112.gif\" alt=\"\"<\/code>. Der Screenreader ignoriert die Graphik in diesem Fall.<br \/>\nBei dekorativen Graphiken kann es nicht schaden, eine kurze Beschreibung zu verwenden. Das Minimum ist &#8222;Logo von XY&#8220;. Besser ist &#8222;Logo von XY, ein Schneemann mit einem schwarzen Hut&#8220;, viele Blinde kann das tats\u00e4chlich interessieren, die anderen ignorieren es einfach. Auch Sehbehinderte m\u00f6chten eventuell wissen, was auf dem Logo oder dem Banner zu sehen ist, so dass man einen dem Alt-Text \u00e4hnlichen title formulieren kann, Sehbehinderte nutzen oft lieber die Maus als die Tastatur.<br \/>\nDie Betonung liegt hier auf kurz: Kleine Romane in den Image-Tags unterzubringen wirkt unprofessionell. Im n\u00e4chsten Beitrag werde ich mich mit inhaltlichen und funktionalen Graphiken besch\u00e4ftigen. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Bilder spielen im Internet eine wachsende Rolle, auch wenn die Bildsprache nicht immer sinnvoll ist. Das Thema Bilder spielt bisher im Barrierefreiheitsdiskurs eine eher untergeordnete&#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\/platzhalter-grafiken\/\">Weiterlesen<span class=\"screen-reader-text\">Platzhalter-Grafiken<\/span><\/a><\/div>\n","protected":false},"author":1,"featured_media":0,"parent":619,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-623","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/623","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=623"}],"version-history":[{"count":5,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/623\/revisions"}],"predecessor-version":[{"id":2438,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/623\/revisions\/2438"}],"up":[{"embeddable":true,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/619"}],"wp:attachment":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/media?parent=623"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}