{"id":4540,"date":"2020-08-09T17:15:28","date_gmt":"2020-08-09T15:15:28","guid":{"rendered":"https:\/\/www.netz-barrierefrei.de\/wordpress\/?page_id=4540"},"modified":"2025-06-19T16:25:52","modified_gmt":"2025-06-19T14:25:52","slug":"leitfaden-zum-schreiben-guter-alternativtexte","status":"publish","type":"page","link":"https:\/\/www.netz-barrierefrei.de\/wordpress\/leitfaden-zum-schreiben-guter-alternativtexte\/","title":{"rendered":"Leitfaden zum Schreiben sinnvoller Alternativtexte"},"content":{"rendered":"<p><iframe loading=\"lazy\" src=\"https:\/\/digitale-barrierefreiheit.podigee.io\/312-alternativtexte-schreiben-darauf-solltet-ihr-achten\/embed?context=external&#038;theme=default\" style=\"border: 0\" frameBorder=\"0\" height=\"100\" width=\"100%\"><\/iframe><br \/>\nDieser Leitfaden soll Sie in das Verfassen sinnvoller Alternativtexte einf\u00fchren. Er geht schrittweise vor. Anlass f\u00fcr diesen Leitfaden ist, dass diese Frage immer wieder gestellt wird.<br \/>\nDer Leitfaden basiert auf meinen Erfahrungen als blinde Person und als 13 Jahre aktiver Online-Redakteur. Ich habe tausende Bildbeschreibungen gelesen und geschrieben, aber mich auch mit vielen anderen blinden Menschen ausgetauscht. <\/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\/leitfaden-zum-schreiben-guter-alternativtexte\/#Generelles_zu_Alternativtexten\" >Generelles zu Alternativtexten<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/leitfaden-zum-schreiben-guter-alternativtexte\/#Output-Oekonomie_als_Prinzip_von_Alternativtexten\" >Output-\u00d6konomie als Prinzip von Alternativtexten<\/a><\/li><\/ul><\/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\/leitfaden-zum-schreiben-guter-alternativtexte\/#1_Ist_die_Grafik_verlinkt_oder_hat_sie_eine_Funktion\" >1. Ist die Grafik verlinkt oder hat sie eine Funktion?<\/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\/leitfaden-zum-schreiben-guter-alternativtexte\/#2_Wie_wichtig_ist_die_Grafik\" >2. Wie wichtig ist die Grafik?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/leitfaden-zum-schreiben-guter-alternativtexte\/#Relevanz_und_Kontext\" >Relevanz und Kontext<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/leitfaden-zum-schreiben-guter-alternativtexte\/#31_Kommen_die_enthaltenen_Informationen_im_Text_oder_in_einer_Tabelle_vor\" >3.1. Kommen die enthaltenen Informationen im Text oder in einer Tabelle vor?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/leitfaden-zum-schreiben-guter-alternativtexte\/#32_Die_Informationen_kommen_nicht_im_Content_vor\" >3.2. Die Informationen kommen nicht im Content vor<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/leitfaden-zum-schreiben-guter-alternativtexte\/#33_Aus_Tabellen_erzeugte_Grafiken\" >3.3 Aus Tabellen erzeugte Grafiken<\/a><\/li><\/ul><\/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\/leitfaden-zum-schreiben-guter-alternativtexte\/#Bildergalerien\" >Bildergalerien<\/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\/leitfaden-zum-schreiben-guter-alternativtexte\/#Icons_und_Emoticons\" >Icons und Emoticons<\/a><\/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\/leitfaden-zum-schreiben-guter-alternativtexte\/#Sollte_man_in_Alt-Texten_das_Aussehen_von_Personen_beschreiben\" >Sollte man in Alt-Texten das Aussehen von Personen beschreiben??<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/leitfaden-zum-schreiben-guter-alternativtexte\/#Gibt_es_unbeschreibbare_Bilder\" >Gibt es unbeschreibbare Bilder?<\/a><\/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\/leitfaden-zum-schreiben-guter-alternativtexte\/#Rollen-Verteilung\" >Rollen-Verteilung<\/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\/leitfaden-zum-schreiben-guter-alternativtexte\/#Franeworks_zur_Grafik-Generierung\" >Franeworks zur Grafik-Generierung<\/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\/leitfaden-zum-schreiben-guter-alternativtexte\/#Beschreibungen_per_Kuenstlicher_Intelligenz_erstellen\" >Beschreibungen per K\u00fcnstlicher Intelligenz erstellen<\/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\/leitfaden-zum-schreiben-guter-alternativtexte\/#Weitere_Infos\" >Weitere Infos<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Generelles_zu_Alternativtexten\"><\/span>Generelles zu Alternativtexten<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Der Begriff Alternativtext wird h\u00e4ufig synonym mit Bild-Beschreibung verwendet. Tats\u00e4chlich gibt es viele Wege, eine Bild-Beschreibung zu vermitteln, der Alternativtext ist der g\u00e4ngigste, aber nicht immer geeignet. M\u00f6gliche Alternativen sind ARIA Label, ARIA Labeled by oder das Title-Attribut. F\u00fcr l\u00e4ngere Beschreibungen k\u00f6nnte ein per Tastatur erreichbarer Tooltipp, ein Link auf eine neue Seite mit der Beschreibung oder ein aufklappbares Akkordeon verwendet werden. Eine weitere M\u00f6glichkeit ist das Detail-Tag aus HTML: Dieses Tag erlaubt das Anbieten einer ausklappbaren Beschreibung. Das Long Desc-Atribut aus HTML 4 gilt als veraltet und sollte nicht mehr eingesetzt werden.<br \/>\nAlternativtexte werden nur von Screenreadern vorgelesen. Meines Wissens k\u00f6nnen die Vorlese-Tools von Lese- oder Sehbehinderten keine Alternativtexte vorlesen. Ich lasse mich aber gerne eines Besseren belehren. Wenn Sie ausf\u00fchrliche Beschreibungen bereitstellen, w\u00fcrde ich empfehlen, diese allen Leserinnen anzubieten, also nicht im Alttext unterzubringen. Wenn Sie sich so viel M\u00fche mit einer Beschreibung machen, sollte sie doch m\u00f6glichst vielen Interessierten angeboten werden. Wie oben beschrieben kann man sie einfach als Popup oder ausklappbar anbieten, so dass sie in geschlossenen Zustand keinen zus\u00e4tzlichen Platz wegnimmt.<br \/>\nDie Information, dass es sich um eine Grafik oder um einen Link handelt, muss nicht im Alternativtext stehen. Der Screenreader gibt stets die Information &#8222;Grafik&#8220; oder &#8222;Grafik Link&#8220; und folgend den hinterlegten Alternativtext aus.<br \/>\nCopyright-Informationen oder der Name des Fotografen bzw. Urheberrechte am Foto haben nichts im Alternativtext zu suchen. Diese Informationen sind f\u00fcr den Blinden irrelevant und ein Zeichen f\u00fcr mangelnde Sorgfalt. Wenn es sich um Pflicht-Infos handelt, w\u00e4ren sie im Alttext ohnehin falsch, da dieser wie erw\u00e4hnt nur Blinden angezeigt wird &#8211; wenn sie das Bild nicht sehen k\u00f6nnen, d\u00fcrften Ihnen auch Urheber-Infos recht egal sein.<br \/>\nEine Doppelung der Informationen im Alternativtext und einer Bild-Unterschrift sind zu vermeiden. Enth\u00e4lt eine Bildunterschrift eine Beschreibung und folgt diese logisch auf das Bild, kann der Alternativtext leer gelassen werden (img alt=&#8220;&#8220;). In diesem Fall muss der Blinde wissen, dass der Text zum Bild geh\u00f6rt. Die Bild-Unterschrift sollte sich also direkt unter dem Bild befinden und einen eigenen Absatz bilden. Technisch kann das \u00fcber das Attribut &#8222;Aria described by&#8220; sichergestellt werden.<br \/>\nSind alle relevanten Informationen zum Bild im Flie\u00dftext enthalten, in der Regel bei Informationsgrafiken oder Kunst-Objekten, kann der Alternativtext kurz gehalten werden. Praktisch kann ein Blinder sich alle Bilder und Alternativtexte eines Dokuments anzeigen lassen. Dies w\u00fcrde aber mit ein paar Ausnahmen auch kein Sehender tun, deshalb sollte das selten vorkommen. <\/p>\n<h3><span class=\"ez-toc-section\" id=\"Output-Oekonomie_als_Prinzip_von_Alternativtexten\"><\/span>Output-\u00d6konomie als Prinzip von Alternativtexten<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>H\u00e4ufig kommt die Frage, warum Alttexte kurz gehalten werden sollten. Analog der Erz\u00e4hl-\u00d6konomie k\u00f6nnen wir hier von der Ausgaben-\u00d6konomie sprechen: Blinde Personen m\u00fcssen vor allem <a href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/hilfstechnik-und-mensch-maschine-interaktion\/assistive-technologien-und-barrierefreiheit\/warum-ist-die-sprachausgabe-von-blinden-so-schnell\/#Bekannte_Infos_ausblenden\">\u00fcberfl\u00fcssige Informationen filtern k\u00f6nnen<\/a>. Je mehr Informationen ihnen vermittelt werden, die im aktuellen Kontext nicht relevant sind, desto st\u00e4rker werden sie vom eigentlichen Inhalt abgelenkt.<br \/>\nMir ist kein Screenreader bekannt, der Alternativtexte sequenz-weise verarbeiten kann. \u00dcblicherweise werden Alternativtexte, unabh\u00e4ngig von ihrer L\u00e4nge, in einem St\u00fcck vorgelesen. Deswegen rate ich von zu langen Alternativtexten ab. Insbesondere das Aufz\u00e4hlen von Einzel-Werten etwa aus Diagrammen ist selten sinnvoll.<br \/>\nDas Argument ist korrekt, dass kein Blinder den Alttext komplett lesen muss. Mit diesem Argument k\u00f6nnen Sie auch ewig lange Texte ins Web stellen. Unabh\u00e4ngig davon kann ja tats\u00e4chlich etwas Wichtiges in einem Alttext enthalten sein und dann wird dem Blinden diese wichtige Information entgehen. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"1_Ist_die_Grafik_verlinkt_oder_hat_sie_eine_Funktion\"><\/span>1. Ist die Grafik verlinkt oder hat sie eine Funktion?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Wenn die Grafik verlinkt ist, stellt sich die Frage, wo der Link hinf\u00fchrt. Bei einer verlinkten Grafik ist also das Ziel des Links wichtiger als das, was in der Grafik zu sehen ist. Es gibt mehrere denkbare F\u00e4lle:<\/p>\n<ul>\n<li>Der Link \u00f6ffnet eine gr\u00f6\u00dfere Ansicht des Bildes. Dann reicht die Info Bildbeschreibung + &#8222;\u00f6ffnet gr\u00f6\u00dfere Ansicht&#8220;. Die gr\u00f6\u00dfere Ansicht ist f\u00fcr den Blinden in der Regel irrelevant, aber er muss trotzdem wissen, was der Link tut.<\/li>\n<li>Der Link startet einen Download, z.B. einer Brosch\u00fcre. Dann kann die Beschreibung zum Beispiel &#8222;Laden Sie die Brosch\u00fcre XY herunter&#8220; lauten.<\/li>\n<li>\u00d6ffnet der Link einfach nur eine neue Webseite, k\u00f6nnen Sie vorgehen wie bei jedem anderen Link. Schreiben Sie aber in jedem Fall dazu, wenn der Nutzer durch das \u00d6ffnen des Links Ihre Website verl\u00e4sst, denn das bekommt man als blinde Person nicht immer mit.<\/li>\n<\/ul>\n<p>L\u00f6st die Grafik eine Funktion aus, etwa bei einem grafischen Button, ist die Beschreibung der ausgel\u00f6sten Funktion relevant. &#8222;Nach rechts zeigender Pfeil&#8220; ist also keine gute Beschriftung, &#8222;Weiterbl\u00e4ttern&#8220; oder &#8222;zur n\u00e4chsten Seite bl\u00e4ttern&#8220; schon eher.<br \/>\nIm Alternativtext sollte also das Ziel des Links oder die ausgel\u00f6ste Aktion stehen. Auf eine Beschreibung der Grafik kann in diesem Fall komplett verzichtet werden. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"2_Wie_wichtig_ist_die_Grafik\"><\/span>2. Wie wichtig ist die Grafik?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Der n\u00e4chste Fall tritt ein, wenn die Grafik nicht verlinkt ist oder keine Funktion hat.<br \/>\nDie Frage ist: Was w\u00fcrde passieren, wenn die Grafik nicht geladen wird? W\u00fcrden wichtige Informationen f\u00fcr den Nutzer verloren gehen?<br \/>\nIst das nicht der Fall, reicht eine schlichte Beschreibung der Grafik. Empfohlen werden 80 Zeichen oder weniger, technisch gibt es keine Begrenzung.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Relevanz_und_Kontext\"><\/span>Relevanz und Kontext<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Die Ausf\u00fchrlichkeit einer Bild-Beschreibung ist stets von der Relevanz der Grafik abh\u00e4ngig. Wie relevant eine Grafik ist, h\u00e4ngt aber immer vom Kontext ab.<br \/>\nDie folgenden Beispiele sollen das veranschaulichen. Bitte denken Sie aber stets daran: Informationen, die im Flie\u00dftext enthalten sind, brauchen in der Bild-Beschreibung nicht vorzukommen.<br \/>\nBeispiel I: Ein Artikel der Deutschen Bahn mit einem Bild von einem Zug<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-content\/uploads\/zug.jpg\" alt=\"Stilisierter Zug\" width=\"960\" height=\"480\" class=\"alignleft size-full wp-image-4576\" srcset=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-content\/uploads\/zug.jpg 960w, https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-content\/uploads\/zug-300x150.jpg 300w, https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-content\/uploads\/zug-768x384.jpg 768w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/><br \/>\nBeispiel II: Segelboot auf offenem Meer<br \/>\nEin Segelboot dient h\u00e4ufig als Aufh\u00e4nger in einem Urlaubs-Katalog. In diesem Fall w\u00fcrden Sie das Bild kurz beschreiben, denn es dient dekorativen Zwecken.<br \/>\nW\u00e4re das Bild in einem Segel-Magazin enthalten, w\u00e4ren nat\u00fcrlich mehr Infos interessant: Was ist es f\u00fcr ein Boot, aus welcher Epoche stammt es, wie viele Segel hat es und so weiter.<br \/>\n<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-content\/uploads\/segelschiff.jpg\" alt=\"Segelschifff\" width=\"960\" height=\"637\" class=\"alignleft size-full wp-image-4977\" srcset=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-content\/uploads\/segelschiff.jpg 960w, https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-content\/uploads\/segelschiff-300x199.jpg 300w, https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-content\/uploads\/segelschiff-768x510.jpg 768w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/><br \/>\nBeispiel III: Ein Elefant wirft einen Basketball in einen Korb<br \/>\nAuch das w\u00e4re ein typisches Motiv in einem Urlaubs-Katalog. Ein Tierschutz-Verband w\u00fcrde aber ganz andere Informationen kommunizieren und entsprechend auch die Bild-Beschreibung anders fassen.<br \/>\n<h2Symbole und Icons<\/h2>\n<p>Bei Symbolen oder Icons, die keine eigene Information enthalten sollte der Alternativtext leer gelassen werden.<br \/>\nZum Beispiel werden in Linklisten gerne Icons vorangestellt. Dazu geh\u00f6rt die nach rechts zeigende Hand oder ein Pfeil. Diese Icons haben f\u00fcr Blinde keinen Mehrwert und hier sollte der Alternativtext leer gelassen werden. Eine kurze Beschreibung w\u00fcrde den Lesefluss st\u00f6ren. Technisch gesehen wird das Alt-Attribut gesetzt, aber nicht bef\u00fchlt. Sind die Grafiken wie heute \u00fcblich als SVG (also nicht mit dem Image-Tag) eingebunden, k\u00f6nnen sie f\u00fcr den Screenreader ausgeblendet werden, etwa mit ARIA hidden.<br \/>\nF\u00fcr diesen Zweck werden h\u00e4ufig auch CSS-generierte Icons verwendet. Diese werden ohnehin vom Screenreader ignoriert und bed\u00fcrfen keiner weiteren Behandlung. <\/p>\n<h2>3. Die Grafik enth\u00e4lt eigene Informationen<\/h2>\n<p>Was h\u00e4ufig vorkommt sind Grafiken, die selbst Informationen enthalten: Diagramme, Organigramme, Schaubilder und so weiter.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"31_Kommen_die_enthaltenen_Informationen_im_Text_oder_in_einer_Tabelle_vor\"><\/span>3.1. Kommen die enthaltenen Informationen im Text oder in einer Tabelle vor?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Wenn ja, kann der Alternativtext kurz gehalten werden. Dem Alternativtext kann die Information &#8222;Detailierte Informationen finden sie im Text&#8220; bzw. &#8222;&#8230; in der Tabelle&#8220; angeh\u00e4ngt werden. Handelt es sich um einen langen Text, ist ein Verweis auf den konkreten Abschnitt sinnvoll, wo diese Information gefunden wird. <\/p>\n<h3><span class=\"ez-toc-section\" id=\"32_Die_Informationen_kommen_nicht_im_Content_vor\"><\/span>3.2. Die Informationen kommen nicht im Content vor<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Wenn nein, empfehlen wir den Einsatz einer einfachen Tabelle f\u00fcr Zahlenwerte.<br \/>\nF\u00fcr komplexe Grafiken, etwa Organigramme, sportliche \u00dcbungen oder Kunstwerke empfiehlt sich eine l\u00e4ngere, systematische Beschreibung. Sie kann auf der selben Seite oder per Link auf eine Extra-Seite bereit gestellt werden. Eine technisch einfach umsetzbare M\u00f6glichkeit ist auch, die Beschreibung als Tooltipp oder in einem Akkordeon unter dem Bild bereitzustellen. Ein Akkordeon hat den Vorteil, dass es technisch einfach barrierefrei umsetzbar ist. Der Vorteil dieser Ma\u00dfnahmen besteht darin, dass die Beschreibung per Akkordeon, Tooltipp oder \u00fcber andere Wege auch Personen zur Verf\u00fcgung stehen, die keinen Screenreader benutzen und die Grafik nicht oder nicht gut erkennen k\u00f6nnen.<br \/>\nAusf\u00fchrliche Infos gibt es im Artikel <a href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/bilder-fuer-blinde-beschreiben\/\">Wie beschreibe ich etwas f\u00fcr Blinde<\/a>.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"33_Aus_Tabellen_erzeugte_Grafiken\"><\/span>3.3 Aus Tabellen erzeugte Grafiken<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Wurden Grafiken aus einer Tabelle erzeugt, sollte immer auch die Tabelle dazu angeboten werden. Es ist schlichtweg Zeitverschwendung, Linien-, S\u00e4ulen- oder Balkendiagramme ausf\u00fchrlich zu beschreiben. Beschreiben Sie im Alt-Text kurz die Entwicklung, wie sie einem Sehenden auf den ersten Blick auffallen w\u00fcrde und verweisen Sie ansonsten leicht erkennbar auf die zugeh\u00f6rige Tabelle.<br \/>\nTechnisch kann so etwas platzsparend etwa \u00fcber Tabs bereitgestellt werden: Der linke Tab zeigt die Grafik, der rechte die Tabelle oder \u00e4hnlich. Die heute verwendeten Bibliotheken zur dynamischen Grafik-Erzeugung bzw. Darstellung sollten solche M\u00f6glichkeit bieten. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Bildergalerien\"><\/span>Bildergalerien<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Eine spezielle Herausforderung sind Bilder-Galerien. An sich ist eine Beschreibung jedes einzelnen Bildes nicht sinnvoll, weil hier tats\u00e4chlich die Bilder an sich wirken, nicht aber die Beschreibung. Hier reicht meines Erachtens ein vorangestellter Satz, der darauf verweist, dass sich hier eine Bilder-Galerie befindet. Das Alt-Attribut kann leer gelassen werden, damit die Bilder als dekorativ erkannt werden.<br \/>\nEs sind F\u00e4lle denkbar, in denen die Beschreibung einzelner Bilder aus einer Galerie sinnvoll ist. Das sind zum Beispiel Artikel-Galerien, bei denen das Bild der einzige Hinweis auf das Angebot\/Produkt ist. Hier gilt das, was f\u00fcr anklickbare\/verlinkte Grafiken immer gilt: Entweder wird das Ziel oder der Zweck des Links beschrieben. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Icons_und_Emoticons\"><\/span>Icons und Emoticons<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Icons, die im Flie\u00dftext verwendet werden, ben\u00f6tigen grunds\u00e4tzlich keinen Alternativtext. Ein Beispiel sind spezielle Icons, die anstelle von Listensymbolen verwendet werden. Hier sollte einfach das HTML-Markup f\u00fcr Listen verwendet werden, die Listensymbole werden dann mit CSS erzeugt und werden Blinden korrekterweise nicht vorgelesen.<br \/>\nWerden Icons verwendet, um Textstellen hervorzuheben, ben\u00f6tigen diese ebenfalls keine Beschreibung. Ein Beispiel w\u00e4re ein vorangestelltes Ausrufezeichen. Die Hervorhebung als solche sollte semantisch korrekt, etwa \u00fcber die HTML-Elemente em oder strong kommuniziert werden.<br \/>\nEin Sonderfall sind grafische Emoticons, die f\u00fcr das Verst\u00e4ndnis des Textes relevant sind, zum Beispiel ein Smiley, um zu zeigen, das eine Aussage ironisch gemeint war. Solche Grafiken m\u00fcssen eine Beschreibung haben, da hier klar Informationen grafisch kommuniziert werden. Emojis aus dem Unicode-Standard werden Blinden standardm\u00e4\u00dfig mit Text-Beschreibung vorgelesen und ben\u00f6tigen keinen Alternativtext. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Sollte_man_in_Alt-Texten_das_Aussehen_von_Personen_beschreiben\"><\/span>Sollte man in Alt-Texten das Aussehen von Personen beschreiben??<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>In den letzten Monaten und Jahren kam bei mir h\u00e4ufig die Frage an, ob man Personen in Alt-Texten beschreiben sollte. Auch hier ist die Frage immer abh\u00e4ngig vom Kontext, ich tendiere aber eher zum Nein, die Gr\u00fcnde habe ich <a href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/sollte-man-sich-selbst-in-veranstaltungen-fuer-blinde-beschreiben\/\">anderswo beschrieben<\/a>. Ein weiterer Grund ist die oben erw\u00e4hnte Ausgaben-\u00d6konomie.<br \/>\nEin Pro-Argument kann sein, dass Diversit\u00e4t dargestellt werden soll. Das gilt etwa, wenn man Personen unterschiedlicher Hintergr\u00fcnde auf den Bildern zeigt.<br \/>\nEs kann nat\u00fcrlich auch immer sein, dass die Eigenschaften einer Person auch eine Person beschreiben sollen: Ein \u00e4lterer Mann, der Sport macht sagt etwas anderes aus als eine junge Frau, die Sport macht. Tauschen wir jung und alt mit schlank und \u00fcbergewichtig, wird das noch ein wenig klarer.<br \/>\nAllerdings sieht man hier das Problem: Sobald man mit Adjektiven arbeitet, bewertet man. Bewertungen bzw. Interpretationen sollen aber in der Regel vermieden werden.<br \/>\nEin Problem sind auch unsichtbare Behinderungen bzw. Models. Bei unsichtbaren Behinderungen sind die Behinderungen nicht zu sehen, geh\u00f6ren also nicht in die Bild-Beschreibung. Wenn die Personen auf den Fotos &#8222;nicht echt&#8220; sind, also irgendwelche Models, die Diversit\u00e4t der Belegschaft nur vort\u00e4uschen, wird es endg\u00fcltig schwierig.<br \/>\nZu diesem Thema gibt eskeine abschlie\u00dfende Einsch\u00e4tzung. Wenn Sie meinen, dass das Aussehen, Alter, der Hintergrund oder eine andere Eigenschaft der Person f\u00fcr den Sehenden\/Blinden relevant ist, halten Sie sich auf jeden Fall kurz, interpretieren Sie nicht zu viel und gehen Sie sparsam mit Adjektiven um. Begriffe wie attraktiv, offensichtlich,, wei\u00df\/schwarz (bezogen auf Hautfarbe) sollten nach meiner Einsch\u00e4tzung komplett vermieden werden. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Gibt_es_unbeschreibbare_Bilder\"><\/span>Gibt es unbeschreibbare Bilder?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Ja und nein: Theoretisch l\u00e4sst sich jedes auch noch so komplexe Bild beschreiben. In der Praxis sind aber viele Grafiken so komplex, dass sie nicht sinnvoll beschrieben werden k\u00f6nnen. Beispiel sind umfangreiche Landkarten, elektronische Schaltpl\u00e4ne, Bauzeichnungen und vieles mehr.<br \/>\nViele dieser Grafiken werden in erster Linie in sehr speziellen Kontexten eingesetzt. Nat\u00fcrlich ist Inklusion immer anzustreben. Allerdings ist f\u00fcr mich kaum vorstellbar, warum man z.B. einen elektronischen Schaltplan oder eine Bauzeichnung f\u00fcr Blinde beschreiben machen sollte. Sie richten sich an Fachleute, das hei\u00dft, auch Sehende ohne diese Qualifikation w\u00e4ren \u00fcberfordert.<br \/>\nEs gibt grunds\u00e4tzlich mehrere M\u00f6glichkeiten, sie dennoch zu beschreiben. Eine M\u00f6glichkeit ist, Ebenen herauszunehmen und nur Grundrisse zu beschreiben.<br \/>\nEine weitere M\u00f6glichkeit w\u00e4re, tats\u00e4chlich die Grafik systematisch zu beschreiben. Hier ist allerdings das Problem, dass bei einigen Blinden das visuelle Vorstellungsverm\u00f6gen nicht gut genug ausgepr\u00e4gt ist. Ich zum Beispiel kann mir keine komplexen Grafik-Beschreibungen einpr\u00e4gen, wobei mein Verm\u00f6gen an dieser Stelle generell \u00fcberschaubar ist, es mag sein, dass andere Blinde das besser k\u00f6nnen.<br \/>\nEine weitere M\u00f6glichkeit sind tastbare Modelle, etwa aus dem 3D-Drucker oder eine echte elektronische Schalttafel, die sich anfassen l\u00e4sst. Taktile Grafiken k\u00f6nnen auch relativ einfach mit Lego oder \u00e4hnlichen Prinzipien nachgebaut werden. Im Endeffekt ist es allerdings so, dass taktile Grafiken eine wesentlich geringere Aufl\u00f6sung haben als visuelle Grafiken. Das hei\u00dft, entweder muss man weniger Details darstellen oder man ben\u00f6tigt deutlich mehr Platz.<br \/>\nTats\u00e4chlich haben wir aber noch keine saubere Methodik entwickelt, um solch komplexe Grafiken ad\u00e4quat zu beschreiben. Derzeit kommen wir meines Erachtens nicht an pers\u00f6nlichen Beschreibungen vorbei, also an einer Beschreibung durch eine richtige Person, bei der man dann auch R\u00fcckfragen stellen kann. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Rollen-Verteilung\"><\/span>Rollen-Verteilung<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Aus meiner Sicht ist es die Aufgabe des Content-Erstellenden, Bild-Beschreibungen zu erstellen. Die vor- oder nachgelagerten Personen wie Desktop Publisherinnen oder Designerinnen verf\u00fcgen in der Regel nicht \u00fcber das n\u00f6tige Know How bzw. wissen nicht, was die Aussage des Bildes sein soll. In jedem Fall sollten Sie vorher kl\u00e4ren, wer diese Aufgabe \u00fcbernimmt, damit die zust\u00e4ndige Person die Aufw\u00e4nde vern\u00fcnftig kalkulieren kann und die Qualit\u00e4t ausreichend ist. Gerade bei PDF-Brosch\u00fcren ist das Erstellen von Beschreibungen ein teils enormer Mehr-Aufwand. Bei Website-Templates muss man sauber zwischen Rahmen unterscheiden &#8211; also Logos, Banner-Grafiken und \u00e4hnliches &#8211; und Content. Bei Ersterem ist die Konzeption, bei Letzterem die Redaktion zust\u00e4ndig. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Franeworks_zur_Grafik-Generierung\"><\/span>Franeworks zur Grafik-Generierung<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Generell gilt die Anforderung f\u00fcr Bildbeschreibungen auch f\u00fcr automatisch generierte Grafiken wie bei Frameworks f\u00fcr Infografiken wie HighCharts. Hier muss &#8211; wie oben beschrieben &#8211; die Beschreibung durch das Angebot einer Tabelle erg\u00e4nzt werden.<br \/>\nWie oben beschrieben ist die Beschreibung des visuellen Aufbaus eines Diagrammes in der Regel nicht sinnvoll. Drei hellblaue S\u00e4ulen auf grauem Grund und \u00c4hnliches ist ein Overload an unn\u00f6tigen und teils auch unverst\u00e4ndlichen Infos. Die Kern-Aussage ist interessant. L\u00e4sst sich diese nicht automatisch generieren oder gibt es nicht die M\u00f6glichkeit, den Text manuell anzupassen, verweisen Sie im Alttext auf die Tabelle.<br \/>\nAnders sieht die Sache nat\u00fcrlich bei nicht aus Tabellen generierten Grafiken aus. Hier muss die zust\u00e4ndige Redakteurin die Beschreibung manuell erstellen. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Beschreibungen_per_Kuenstlicher_Intelligenz_erstellen\"><\/span>Beschreibungen per K\u00fcnstlicher Intelligenz erstellen<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Mittlerweile ist es auch m\u00f6glich, Beschreibungen per KI erstellen zu lassen. Zu beachten ist dabei, dass es schlechte Algorithmen gibt, die schlimmer als nichts sind. Die Beschreibungen sind entweder vollst\u00e4ndig falsch oder nicht hilfreich wie die Anh\u00e4ufung einzelner Begriffe ohne Zusammenhang. Solche Algorithmen werden in Browsern oder von Meta auf seinen Plattformen verwendet. Sie k\u00f6nnen sich diese Tools komplett sparen, da sie keinerlei Vorteil f\u00fcr Sie und die Nutzenden bieten.<br \/>\nChatGPT, Gemini und so weiter k\u00f6nnen durchaus gute Beschreibungen erstellen. Aber auch hier besteht das Problem, dass die Beschreibungen teilweise falsch oder einfach unvollst\u00e4ndig sein k\u00f6nnen. Als blinde Person l\u00e4sst sich das nicht pr\u00fcfen. Deswegen sollten KIs mit Bedacht eingesetzt und m\u00f6glichst durch einen Menschen gepr\u00fcft werden.<br \/>\nGenerative KIs sind dort stark, wo viele Bilder beschrieben oder stark standardisiert sind. Schauen Sie vor der Anschaffung nach, ob 1. es f\u00fcr Ihren Bereich speziell trainierte Modelle f\u00fcr die Beschreibung gibt oder 2. ob es m\u00f6glich ist, Modelle f\u00fcr Ihren Einsatzzweck zu trainieren. Ich denke etwa an eCommerce oder Bildung, wo teils tausende Bilder beschrieben werden m\u00fcssen. <\/p>\n<h2><span class=\"ez-toc-section\" id=\"Weitere_Infos\"><\/span>Weitere Infos<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li><a href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/barrierefreie-redaktion\/grafiken-und-bilder\/alternativtexte-auf-webseiten-anzeigen-lassen\/\">Alternativtexte auf Webseiten anzeigen lassen<\/a><\/li>\n<li><a href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-internet\/barrierefreie-redaktion\/grafiken-und-bilder\/bilder-und-grafiken-fuer-sehbehinderte-optimieren\/\">Infografiken f\u00fcr Blinde und Sehbehinderte optimieren<\/a><\/li>\n<li><a href=\"https:\/\/www.netz-barrierefrei.de\/en\/image-desc.html\">A Guide to write good Alternative Alt Texts and Image Descriptions<\/a><\/li>\n<li><a href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/barrierefreies-publizieren\/barrierefreie-pdfs\/pdfs-auf-barrierefreiheit-pruefen\/alternativtexte-in-pdf-dokumenten-anzeigen-lassen\/\">Alternativtexte in PDF anzeigen lassen<\/a><\/li>\n<li><a href=\"https:\/\/merkst.de\/orcam-myeye2-schein\/\">Was taugt die Orcam als Hilfsmittel f\u00fcr Blinde<\/a><\/li>\n<li><a href=\"https:\/\/total-diskriminiert.blogspot.com\/2023\/10\/how-paciello-group-aka-tpgi-demages.html\">How Paciello Group aka TPGI is demaging digital accessibility<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Dieser Leitfaden soll Sie in das Verfassen sinnvoller Alternativtexte einf\u00fchren. Er geht schrittweise vor. Anlass f\u00fcr diesen Leitfaden ist, dass diese Frage immer wieder gestellt&#8230;<\/p>\n<div class=\"more-link-wrapper\"><a class=\"more-link\" href=\"https:\/\/www.netz-barrierefrei.de\/wordpress\/leitfaden-zum-schreiben-guter-alternativtexte\/\">Weiterlesen<span class=\"screen-reader-text\">Leitfaden zum Schreiben sinnvoller Alternativtexte<\/span><\/a><\/div>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-4540","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/4540","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=4540"}],"version-history":[{"count":34,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/4540\/revisions"}],"predecessor-version":[{"id":10086,"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/pages\/4540\/revisions\/10086"}],"wp:attachment":[{"href":"https:\/\/www.netz-barrierefrei.de\/wordpress\/wp-json\/wp\/v2\/media?parent=4540"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}