{"id":25,"date":"2014-08-25T12:25:14","date_gmt":"2014-08-25T10:25:14","guid":{"rendered":"http:\/\/xmaz.de\/barrierefrei\/?page_id=25"},"modified":"2014-08-25T12:25:14","modified_gmt":"2014-08-25T10:25:14","slug":"accessible-images","status":"publish","type":"page","link":"https:\/\/immocado.com\/barrierefrei\/accessible-images\/","title":{"rendered":"Barrierefreie Bilder"},"content":{"rendered":"<p>[Dies ist eine \u00dcbersetzung des englischsprachigen Artikels &#8222;<a href=\"http:\/\/webaim.org\/techniques\/images\/\" rel=\"nofollow\">Accessible Images<\/a>&#8222;. Copyright \u00a9 by www.Webaim.org]<\/p>\n<nav>\n<h2>Artikelinhalt<\/h2>\n<ol>\n<li><a href=\"#introduction\">Einleitung<\/a><\/li>\n<li><a href=\"#comprehension\">Bilder k\u00f6nnen das Verst\u00e4ndnis f\u00f6rdern<\/a><\/li>\n<li><a href=\"#color\">Farbe und Kontrast<\/a><\/li>\n<li><a href=\"#enlarging\">Verpixelung von vergr\u00f6\u00dferten Bildern<\/a><\/li>\n<li><a href=\"#seizures\">Grafiken, die zu Anf\u00e4llen f\u00fchren<\/a><\/li>\n<\/ol>\n<\/nav>\n<div id=\"introduction\" class=\"section\">\n<p>Die meisten Menschen wissen, dass man alternativen Text f\u00fcr Bilder liefern muss. Es gibt jedoch viel mehr f\u00fcr die Barrierefreiheit eines Bildes als nur den Alternativtext. Es gibt viele zus\u00e4tzliche Prinzipien und Techniken f\u00fcr die Barrierefreiheit in Bezug auf Bilder.<\/p>\n<div class=\"important\">\n<div class=\"title\">Wichtig:<\/div>\n<p>Sehen Sie sich den unteren <a href=\"http:\/\/webaim.org\/techniques\/alttext\"rel=\"nofollow\">Artikel \u00fcber alternative Texte <\/a> an, f\u00fcr weitere Informationen zu Alternativen f\u00fcr Bilder und langen Beschreibungen.<\/p>\n<\/div>\n<\/div>\n<div id=\"comprehension\" class=\"section\">\n<h2>Bilder k\u00f6nnen das Verst\u00e4ndnis f\u00f6rdern<\/h2>\n<p>Manche Menschen nehmen f\u00e4lschlicherweise an, dass Bilder schlecht f\u00fcr die Barrierefreiheit sind, da Alternativtexte das Bild mit einer reinen Text-Version des Bildes ersetzen. Die logische Folgerung dieses Gedankens ist, dass Seiten die nur Text enthalten ideal f\u00fcr die Barrierefreiheit sind. Das Problem mit dieser Logik ist jedoch, dass es nur auf den Bed\u00fcrfnissen von Menschen mit einer Art von Behinderung basiert: Blindheit. Diejenigen, die eine andere Behinderung oder gar keine Behinderung haben, k\u00f6nnen von Bildern profitieren, w\u00e4hrend Screenreader-Benutzern der Alternativtext angezeigt wird.<\/p>\n<div id=\"illustrations\" class=\"section\">\n<h3>Illustrationen, Karten, etc.<\/h3>\n<p>Viele Konzepte sind effektiver in Verbindung mit Illustrationen, Karten, Tabellen usw. Stellen Sie sich vor, die menschliche Anatomie ohne Abbildungen aus einem Buch (oder einer Website) zu lernen. Wie effektiv w\u00e4re das? Hier ist ein Beispiel einer Darstellung der Muskeln in der Hand.<\/p>\n<p class=\"center\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/webaim.org\/techniques\/images\/media\/hand_muscles.jpg\" alt=\"Medizinische Darstellungen von den Muskeln in der Hand\" width=\"410\" height=\"465\" \/><\/p>\n<p>Sie werden es wahrscheinlich schwer finden, sich vorzustellen, dass eine Textbeschreibung alleine so verst\u00e4ndlich sein kann, wie ein Text der durch Abbildungen erg\u00e4nzt wurde. In diesem Fall ist das Bild mindestens 10.000 W\u00f6rter wert. Abbildungen, Karten, Tabellen etc. k\u00f6nnen das Verst\u00e4ndnis, vor allem f\u00fcr Menschen mit Lernschwierigkeiten oder Lesest\u00f6rungen, f\u00f6rdern.<\/p>\n<\/div>\n<div id=\"animations\" class=\"section\">\n<h3>Animationen<\/h3>\n<p>Animationen werden selten verwendet, um die Barrierefreiheit von Webinhalten zu verbessern. Meistens sind sie nur l\u00e4stig und st\u00f6rend. Banner-Anzeigen sind oft animiert, um und von dem Hauptzweck der Website abzulenken.<\/p>\n<p>Gut gestaltete Animationen k\u00f6nnen jedoch verwendet werden, um den Inhalt, durch darbieten von Medien, oder indem die Aufmerksamkeit auf wichtige Inhalte gelenkekt, zu verbessern. Eine animierte Grafik kann eine Reihe von Bildern anzeigen, die Inhalt enthalten, der nicht angemessen durch ein statisches Bild dargestellt werden kann. Highlights oder andere Animationen k\u00f6nnen den Fokus des Benutzers auf wichtige Informationen, wie Fehlermeldungen oder erforderliche Eingaben, lenken. Wenn Sie einen der \u201eArtikelinhalte\u201c-Links zu Beginn dieser Seite anw\u00e4hlen, werden Sie feststellen, dass eine Animation hilft, den Fokus auf den Inhaltsbereich des Ziels zu legen.<\/p>\n<div class=\"note\">\n<div class=\"title\">Hinweis<\/div>\n<p>Animationen sollten immer durch die <strong>Benutzer gesteuert<\/strong> werden, oder nur v<strong>on sehr kurzer Dauer<\/strong> sein. Bilder, die st\u00e4ndig animiert sind, k\u00f6nnen dazu f\u00fchren, dass der Rest der Seite schwieriger ist, oder f\u00fcr Benutzer die leicht Ablenkbar sind, v\u00f6llig unzug\u00e4nglich ist.<\/p>\n<p><a href=\"http:\/\/webaim.org\/standards\/wcag\/checklist#sc2.2.2\"rel=\"nofollow\">WCAG 2.0 Erfolgskriterium 2.2.2 (Stufe A) <\/a> verlangt, dass sich automatisch bewegender, blinkender oder scrollender Inhalt, der l\u00e4nger als 5 Sekunden dauert, durch den Nutzer angehalten, gestoppt, oder verborgen werden kann.<\/p>\n<\/div>\n<\/div>\n<div id=\"icons\" class=\"section\">\n<h3>Icons<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"border floatright\" src=\"http:\/\/webaim.org\/techniques\/images\/media\/ietoolbar.jpg\" alt=\"Icons f\u00fcr 'zur\u00fcck', 'vorw\u00e4rts', 'Laden abbrechen', 'Seite aktualisieren', und 'Home' in Internet Explorer\" width=\"210\" height=\"38\" \/>Viele Webseiten und insbesondere Webanwendungen verwenden Icons, um den Text zu erg\u00e4nzen oder zu ersetzen. Komplexe Inhalte und Funktionen, wie auf das Home-Icon in einem Browser zu klicken, um zu der Startseite zu gelangen, k\u00f6nnen leicht durch ein kleines Icon wiedergegeben werden. Icons m\u00fcssen einfach und leicht verst\u00e4ndlich sein. Icons erfordern fast immer Vertrautheit mit ihrer Bedeutung, um n\u00fctzlich zu sein. \u00dcber Kulturen und Sprachen hinweg, k\u00f6nnen Icons leicht fehlinterpretiert werden.<\/p>\n<p>Wenn Sie Icons verwenden, achten Sie darauf, dass die Icons gut gestaltet und leicht verst\u00e4ndlich sind und konsequent genutzt werden. In vielen F\u00e4llen kann Text statt, oder zus\u00e4tzlich zu m\u00f6glicherweise mehrdeutigen Icons erforderlich sein.<\/p>\n<\/div>\n<\/div>\n<div id=\"color\" class=\"section\">\n<h2>Farbe und Kontrast<\/h2>\n<p>Wie der Text, muss die Farbe nicht als alleiniges Mittel zur F\u00f6rderung von Bedeutung oder Inhalt verwendet werden. Was ist gemeint mit Bedeutung mit Farbe allein in Bildern zu vermitteln? Werden wir einen Blick auf diese Karte der Londoner U-Bahn:<\/p>\n<div class=\"center\"><img decoding=\"async\" loading=\"lazy\" class=\"border\" src=\"http:\/\/webaim.org\/techniques\/images\/media\/color_map.jpg\" alt=\"Farbige Karte der U-Bahn-Strecken.\" width=\"250\" height=\"250\" \/><\/div>\n<p>Eine Person die Farben sehen kann, wird keine Probleme damit haben, zwischen der roten, der dunkelblauen, der hellblauen und den andersfarbigen Linien zu unterscheiden. Eine Person, die aufgrund von Farbblindheit, oder einer Sehschw\u00e4che die Farben nicht gut sehen kann, wird wahrscheinlich nicht in der Lage sein, die verschiedenen Routen so leicht zu unterscheiden. Denken Sie daran, dass einige Benutzer ihre Farben zu einer Farbkombination mit hohem Kontrast ver\u00e4ndern k\u00f6nnen, wenn sie diese ben\u00f6tigen. Jemand, der blind ist, wird nicht in der Lage sein, sie \u00fcberhaupt zu sehen. Nehmen wir die Farben von diesem Bild weg:<\/p>\n<div class=\"center\"><img decoding=\"async\" loading=\"lazy\" class=\"border\" src=\"http:\/\/webaim.org\/techniques\/images\/media\/bandw_map.jpg\" alt=\"Schwarz-wei\u00df Version der Karte der U-Bahn-Strecken\" width=\"250\" height=\"250\" \/><\/div>\n<p>Wenn die Farbe entfernt wird, wird die Karte fast unbrauchbar. Testen Sie ihre Webseiten um sicherzustellen, dass der Sinn nicht verloren geht, wenn Sie die Farben entfernen, auch in Bildern. Sie k\u00f6nnen dies durch den Ausdruck der Seite mit einem Schwarz-Wei\u00df-Drucker tun. Stellen Sie sicher, dass ihre Druckeinstellungen so eingestellt sind, dass Hintergrundfarben gedruckt werden. Es gibt auch einige Tools, wie <a href=\"http:\/\/www.vischeck.com\/\"rel=\"nofollow\">Vischeck<\/a>, die alle Farben einer Seite entfernen, oder eine Farbblindheit simulieren.<\/p>\n<p>Neben der Sicherheit mit der Farbe, m\u00fcssen Bilder, die Texte vermitteln, mit ausreichendem Kontrast pr\u00e4sentiert werden. Der Kontrast des Textes innerhalb von Bildern ist besonders wichtig, wenn das Bild eine schlechte Qualit\u00e4t hat oder vergr\u00f6\u00dfert ist.<\/p>\n<div class=\"note\">\n<div class=\"title\">Hinweis<\/div>\n<p>WCAG 2.0 setzt <a href=\"http:\/\/webaim.org\/standards\/wcag\/checklist#sc1.4.3\"rel=\"nofollow\">die Kontrastwerte f\u00fcr Text und Bildern von Text<\/a>. Die Kontrastwerte innerhalb von Bildern zu pr\u00fcfen kann schwieriger sein (es gibt eigentlich keinen definierten RGB-Farbwert f\u00fcr Barrierefreiheit), aber der gesunde Menschenverstand kann in der Regel sagen, ob ein Bild ausreichend Kontrast besitzt oder nicht.<\/p>\n<\/div>\n<\/div>\n<div id=\"enlarging\" class=\"section\">\n<h2>Verpixelung von vergr\u00f6\u00dferten Bildern<\/h2>\n<p>Einige Benutzer mit geringem Sehverm\u00f6gen verwenden Programme, die die Elemente auf ihrem Bildschirm vergr\u00f6\u00dfern, damit sie die Elemente leichter sehen. Wenn Bilder vergr\u00f6\u00dfert werden, k\u00f6nnen sie verpixelt und schwerer zu lesen sein. Schauen wir uns ein Beispiel an:<\/p>\n<div class=\"center\"><img decoding=\"async\" loading=\"lazy\" src=\"http:\/\/webaim.org\/techniques\/images\/media\/university.jpg\" alt=\"Verpixeltes Bild auf dem 'Universit\u00e4t' steht, das aber schwer zu lesen ist\" width=\"367\" height=\"99\" \/><\/div>\n<p>Die Grafik wurde auf 500% seiner urspr\u00fcnglichen Gr\u00f6\u00dfe vergr\u00f6\u00dfert. Sie k\u00f6nnen sehen, dass der Text schwer zu lesen ist. Wenn richtiger Text verwendet w\u00fcrde, w\u00e4re es viel einfacher zu lesen, wie in dem folgenden Beispiel:<\/p>\n<p class=\"center\" style=\"line-height: 1em; margin: 0px; font-size: 500%; color: #333399; font-family: 'Times New Roman',serif;\">Universit\u00e4t<\/p>\n<p>Bedeutet das also, dass Sie in ihrem Text ihre Grafiken nicht verwenden sollten? Nicht unbedingt, aber richtiger Text sollte, sofern m\u00f6glich, verwendet werden.<\/p>\n<div class=\"note\">\n<div class=\"title\">Hinweis<\/div>\n<p><a href=\"http:\/\/webaim.org\/standards\/wcag\/checklist#sc1.4.5\"rel=\"nofollow\">Das WCAG 2.0 Erfolgskriterium 1.4.5 (Stufe AA) <\/a> verlangt, dass wenn die selbe visuelle Pr\u00e4sentation mit Text allein gemacht werden kann, kein Bild verwendet wird, um den Text zu pr\u00e4sentieren. Es gibt viele Vorteile von der Verwendung von richtigem Text anstelle von Bildern (niedrigere Bandbreite, \u00dcbersetzung, einfacheres Authoring, etc.), aber der Hauptgrund ist, dass richtiger Text leicht und ohne Verpixelung, oder Verschlechterung der Bildqualit\u00e4t, vergr\u00f6\u00dfert werden kann. Zu beachten ist, dass Logos von der WCAG-Pflicht ausgenommen sind.<\/p>\n<\/div>\n<p>Gl\u00fccklicherweise machen moderne Browser einen besseren Job beim Vergr\u00f6\u00dfern von grafischen Inhalten als in den vergangenen Jahren. Und mit CSS (besonders mit CSS3), ist es einfacher, echten Text zu stylen, um die gew\u00fcnschte visuelle Pr\u00e4sentation zu erreichen. Pr\u00fcfen Sie die Lesbarkeit von Text im Bild und wenn m\u00f6glich, nutzen Sie besser richtigen Text.<\/p>\n<\/div>\n<div id=\"seizures\" class=\"section\">\n<h2>Grafiken, die zu Anf\u00e4llen f\u00fchren<\/h2>\n<div class=\"important\">\n<div class=\"title\">Wichtig<\/div>\n<p>Helle, blinkende Bilder oder Medien k\u00f6nnen zu fotoepileptischen Anf\u00e4llen f\u00fchren. Anf\u00e4lle k\u00f6nnen gef\u00e4hrlich sein, sogar lebensbedrohlich. Seien Sie nicht verantwortlich daf\u00fcr, diese verursacht zu haben.<\/p>\n<\/div>\n<p>Um m\u00f6glicherweise zu einen Anfall bei Nutzern mit fotosensitiver Epilepsie zu f\u00fchren, muss ein blinkendes Bild oder Element:<\/p>\n<ol>\n<li>Mehr als 3 mal pro Sekunde aufblinken (beachten Sie, dass die Sektion 508 2 mal pro Sekunde zugrunde legt)<\/li>\n<li>Ausreichend gro\u00df sein. Ein sehr kleines, blinkendes Bild, wie ein Mauszeiger, f\u00fchrt nicht zu einem Anfall.<\/li>\n<li>Hell sein. Es m\u00fcssen deutliche Kontraste zwischen dem Aufblitzen sein.<\/li>\n<\/ol>\n<p>Dar\u00fcber hinaus ist auch die Farbe Rot eher daf\u00fcr bekannt, einen Anfall zu verursachen. Gro\u00dfe, blinkende Bilder sind nicht allt\u00e4glich im Internet. Anf\u00e4lle-beinhaltende Medien sind allt\u00e4glicher in Internet-Videos, besonders in HD-Qualit\u00e4t, welche blinkende Spezialeffekte enthalten. Solche Medien sind zu vermeiden!<\/p>\n<div class=\"note\">\n<div class=\"title\">Hinweis<\/div>\n<p><a href=\"http:\/\/webaim.org\/standards\/wcag\/checklist#sc2.3.1\"rel=\"nofollow\">Das WCAG 2.0 Erfolgskriterium 2.3.1 (Stufe A) <\/a> stellt Schwellenwerte f\u00fcr Frequenz, Gr\u00f6\u00dfe, Kontrast und Farbe von blinkenden Bildern bereit.<\/p>\n<\/div>\n<\/div>\n<div id=\"related\">\n<h2>Related Resources<\/h2>\n<ul>\n<li><a href=\"http:\/\/webaim.org\/intro\/\"rel=\"nofollow\">Einf\u00fchrung in die Barrierefreiheit des Internets<\/a><\/li>\n<li><a href=\"http:\/\/webaim.org\/techniques\/alttext\"rel=\"nofollow\">Alternativer Text<\/a><\/li>\n<li><a href=\"http:\/\/webaim.org\/articles\/visual\"rel=\"nofollow\">Sehbehinderungen<\/a><\/li>\n<li><a href=\"http:\/\/webaim.org\/articles\/seizure\"rel=\"nofollow\">An\u00adf\u00e4l\u00adlig\u00adkeit<\/a><\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>[Dies ist eine \u00dcbersetzung des englischsprachigen Artikels &#8222;Accessible Images&#8222;. Copyright \u00a9 by www.Webaim.org] Artikelinhalt Einleitung Bilder k\u00f6nnen das Verst\u00e4ndnis f\u00f6rdern Farbe und Kontrast Verpixelung von vergr\u00f6\u00dferten Bildern Grafiken, die zu Anf\u00e4llen f\u00fchren Die meisten Menschen wissen, dass man alternativen Text f\u00fcr Bilder liefern muss. Es gibt jedoch viel mehr f\u00fcr die Barrierefreiheit eines Bildes als [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/immocado.com\/barrierefrei\/wp-json\/wp\/v2\/pages\/25"}],"collection":[{"href":"https:\/\/immocado.com\/barrierefrei\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/immocado.com\/barrierefrei\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/immocado.com\/barrierefrei\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/immocado.com\/barrierefrei\/wp-json\/wp\/v2\/comments?post=25"}],"version-history":[{"count":0,"href":"https:\/\/immocado.com\/barrierefrei\/wp-json\/wp\/v2\/pages\/25\/revisions"}],"wp:attachment":[{"href":"https:\/\/immocado.com\/barrierefrei\/wp-json\/wp\/v2\/media?parent=25"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}