{"id":1083,"date":"2025-02-04T08:45:20","date_gmt":"2025-02-04T07:45:20","guid":{"rendered":"http:\/\/sat-govtech.pl\/blog\/alternativtext-und-der-wcag-standard-regeln-zum-hinzufuegen-von-alt-attributen\/"},"modified":"2025-02-04T08:45:20","modified_gmt":"2025-02-04T07:45:20","slug":"alternativtext-und-der-wcag-standard-regeln-zum-hinzufuegen-von-alt-attributen","status":"publish","type":"post","link":"https:\/\/sat-govtech.pl\/de\/blog\/alternativtext-und-der-wcag-standard-regeln-zum-hinzufuegen-von-alt-attributen\/","title":{"rendered":"Alternativtext und der WCAG-Standard \u2013 Regeln zum Hinzuf\u00fcgen von Alt-Attributen"},"content":{"rendered":"<p><b><span data-contrast=\"auto\">Das Fehlen von Alternativtexten f\u00fcr Bilder auf einer Website bedeutet nicht nur eine verpasste Chance auf bessere Suchmaschinenplatzierungen, sondern stellt vor allem ein ernsthaftes Problem f\u00fcr die Barrierefreiheit von Inhalten dar. Das Alt-Attribut spielt eine entscheidende Rolle f\u00fcr Nutzer von Bildschirmleseprogrammen. Es erm\u00f6glicht sehbehinderten Menschen, Informationen \u00fcber den Inhalt einzelner Grafiken und Fotos zu erhalten. Daher ist der Alternativtext eine der WCAG-Anforderungen, die \u00f6ffentliche Einrichtungen und Unternehmen erf\u00fcllen m\u00fcssen.   <\/span><\/b><span data-ccp-props=\"{\"335551550\":6,\"335551620\":6}\"> <\/span><\/p>\n<h2 aria-level=\"2\"><b><span data-contrast=\"none\">Alt-Text \u2013 was ist<\/span><\/b> <span data-contrast=\"none\">das?<\/span><span data-ccp-props=\"{\"134245418\":true,\"134245529\":true,\"335559738\":160,\"335559739\":80}\"> <\/span><\/h2>\n<p><span data-contrast=\"auto\">Alt-Text<\/span><span data-contrast=\"auto\">Die Kurzbeschreibung eines Bildes wird von Bildschirmleseprogrammen vorgelesen. Ihr Hauptzweck ist es, blinden oder sehbehinderten Menschen das Verst\u00e4ndnis der visuellen Inhalte einer Website zu erm\u00f6glichen. <\/span><span data-ccp-props=\"{\"335551550\":6,\"335551620\":6}\"> <\/span><\/p>\n<p>Alt-Text <span data-contrast=\"auto\">Alternativtexte werden auch verwendet, wenn ein Bild nicht geladen werden kann \u2013 der Nutzer sieht dann eine Bildbeschreibung anstelle einer leeren Seite. Dar\u00fcber hinaus verbessern Alternativtexte die Suchmaschinenoptimierung (SEO), indem sie Suchmaschinen helfen, den Seiteninhalt besser zu verstehen. <\/span><span data-ccp-props=\"{\"335551550\":6,\"335551620\":6}\"> <\/span><\/p>\n<p><span data-contrast=\"auto\">Aus Sicht der \u00f6ffentlichen Einrichtungen, die unter das Gesetz zur digitalen Barrierefreiheit fallen, sind alternative Beschreibungen von Fotos<\/span> <strong>und Bildern auf ihren Websites und mobilen Anwendungen<\/strong> ein grundlegendes Element <span data-contrast=\"auto\"><strong>einer barrierefreien Website. Fehlen diese, ist die Website digital nicht barrierefrei und entspricht somit nicht den WCAG-Richtlinien.<\/strong><\/span><span data-ccp-props=\"{\"335551550\":6,\"335551620\":6}\"> <\/span><\/p>\n<h2 aria-level=\"2\"><span data-contrast=\"none\"><b>WCAG-Richtlinien und<\/b><\/span> alternative Beschreibung<span data-ccp-props=\"{\"134245418\":true,\"134245529\":true,\"335559738\":160,\"335559739\":80}\"> <\/span><\/h2>\n<p><span data-contrast=\"auto\"><a href=\"http:\/\/sat-govtech.pl\/blog\/wcag-eaa-zbior-wytycznych-dostepnosci-stron\/\">Die Web Content Accessibility Guidelines<\/a> (WCAG) sind eine Reihe von Empfehlungen, die sicherstellen sollen, dass Webinhalte f\u00fcr m\u00f6glichst viele Nutzer zug\u00e4nglich sind, einschlie\u00dflich Menschen mit Behinderungen.  <\/span>Alternativtexte Die WCAG empfiehlt Folgendes:<span data-ccp-props=\"{\"134233117\":false,\"134233118\":false,\"335551550\":6,\"335551620\":6,\"335559738\":0,\"335559739\":240}\"> <\/span><\/p>\n<ul>\n<li data-leveltext=\"\uf0b7\" data-font=\"Symbol\" data-listid=\"2\" data-list-defn-props=\"{\"335552541\":1,\"335559685\":720,\"335559991\":360,\"469769226\":\"Symbol\",\"469769242\":[8226],\"469777803\":\"left\",\"469777804\":\"\uf0b7\",\"469777815\":\"hybridMultilevel\"}\" aria-setsize=\"-1\" data-aria-posinset=\"1\" data-aria-level=\"1\"><strong>Jedes Bild, das Informationen enthielt, hatte ein Alt-Attribut<\/strong> <span data-contrast=\"auto\">\u2013 die Beschreibung sollte klar angeben, was das Bild zeigt, sofern dies f\u00fcr das Verst\u00e4ndnis des Inhalts wichtig ist;<\/span><span data-ccp-props=\"{\"134233117\":false,\"134233118\":false,\"335551550\":6,\"335551620\":6,\"335559738\":0,\"335559739\":0}\"> <\/span><\/li>\n<\/ul>\n<ul>\n<li data-leveltext=\"\uf0b7\" data-font=\"Symbol\" data-listid=\"2\" data-list-defn-props=\"{\"335552541\":1,\"335559685\":720,\"335559991\":360,\"469769226\":\"Symbol\",\"469769242\":[8226],\"469777803\":\"left\",\"469777804\":\"\uf0b7\",\"469777815\":\"hybridMultilevel\"}\" aria-setsize=\"-1\" data-aria-posinset=\"2\" data-aria-level=\"1\"><strong>Dekorative Bilder wurden mit einem leeren alt-Attribut gekennzeichnet <\/strong>\u2013<span data-contrast=\"auto\"> wenn die Grafik keinen inhaltlichen Wert hat, z. B. nur zur Dekoration dient, sollten Sie<\/span> <span data-contrast=\"auto\">alt=&#8220;&#8220; <\/span><span data-contrast=\"auto\">einf\u00fcgen, damit Bildschirmleseprogramme sie \u00fcberspringen;<\/span><span data-ccp-props=\"{\"134233117\":false,\"134233118\":false,\"335551550\":6,\"335551620\":6,\"335559738\":0,\"335559739\":0}\"> <\/span><\/li>\n<\/ul>\n<ul>\n<li data-leveltext=\"\uf0b7\" data-font=\"Symbol\" data-listid=\"2\" data-list-defn-props=\"{\"335552541\":1,\"335559685\":720,\"335559991\":360,\"469769226\":\"Symbol\",\"469769242\":[8226],\"469777803\":\"left\",\"469777804\":\"\uf0b7\",\"469777815\":\"hybridMultilevel\"}\" aria-setsize=\"-1\" data-aria-posinset=\"3\" data-aria-level=\"1\"><span data-contrast=\"auto\">Vermeiden Sie zu lange und detaillierte Beschreibungen \u2013 die Beschreibung sollte kurz und pr\u00e4gnant sein, um den Benutzer nicht irrezuf\u00fchren.<\/span><span data-ccp-props=\"{\"134233117\":false,\"134233118\":false,\"335559738\":0,\"335559739\":0}\"> <\/span><\/li>\n<\/ul>\n<h2 aria-level=\"2\"><span data-contrast=\"none\">Wie erstellt man<\/span> <b><span data-contrast=\"none\">ein g\u00fcltiges<\/span><\/b> <span data-contrast=\"none\">Alt-Attribut f\u00fcr ein Bild?<\/span><span data-ccp-props=\"{\"134245418\":true,\"134245529\":true,\"335559738\":160,\"335559739\":80}\"> <\/span><\/h2>\n<p><span data-contrast=\"auto\">Eine gute Alternativbeschreibung erfordert die Ber\u00fccksichtigung mehrerer Regeln:<\/span><span data-ccp-props=\"{\"134233117\":false,\"134233118\":false,\"335559738\":0,\"335559739\":240}\"> <\/span><\/p>\n<h3><span data-contrast=\"auto\">1. Das Alt-Attribut sollte pr\u00e4zise und aussagekr\u00e4ftig sein. <\/span><\/h3>\n<p><span data-contrast=\"auto\">Es sollte das Wichtigste beschreiben, z. B. \u201eEine Frau, die im Garten Kaffee trinkt\u201c anstatt \u201eEin Bild mit einer Person\u201c. <\/span><span data-ccp-props=\"{\"134233117\":false,\"134233118\":false,\"335559738\":0,\"335559739\":0}\"> <\/span><\/p>\n<h3><span data-contrast=\"auto\">2. Es ist besser, nicht zu viele Details zu verwenden. <\/span><\/h3>\n<p><span data-contrast=\"auto\">Statt \u201eMann in einem marineblauen Anzug mit roter Krawatte vor einem Hintergrund gr\u00fcner B\u00e4ume\u201c gen\u00fcgt \u201eMann im Anzug vor einem Hintergrund von B\u00e4umen\u201c.<\/span><span data-ccp-props=\"{\"134233117\":false,\"134233118\":false,\"335559738\":0,\"335559739\":0}\"> <\/span><\/p>\n<h3><span data-contrast=\"auto\">3. Es empfiehlt sich, Formulierungen wie \u201edas Bild zeigt\u201c oder \u201eGrafiken\u201c zu vermeiden. <\/span><\/h3>\n<p><span data-contrast=\"auto\">Das ist offensichtlich und verl\u00e4ngert die Beschreibung unn\u00f6tig.<\/span><span data-ccp-props=\"{\"134233117\":false,\"134233118\":false,\"335559738\":0,\"335559739\":0}\"> <\/span><\/p>\n<h2 aria-level=\"2\">Alternativtext \u2013 wie f\u00fcgt man ihn hinzu?<br \/><span data-ccp-props=\"{\"134245418\":true,\"134245529\":true,\"335559738\":160,\"335559739\":80}\"> <\/span><\/h2>\n<p><span data-contrast=\"auto\">Das Hinzuf\u00fcgen <\/span>von Alternativtexten <span data-contrast=\"auto\">in CMS-Systemen wie WordPress ist intuitiv und erfordert keine Programmierkenntnisse.<\/span> <\/p>\n<p><span data-contrast=\"auto\">Um ein neues Bild zu Ihren Inhalten hinzuzuf\u00fcgen, gehen Sie einfach zum Bereich \u201eBild<\/span> einf\u00fcgen\/bearbeiten\u201c und geben Sie eine Beschreibung in das Feld \u201eAlternativtext\u201c ein. Wenn das Bild bereits in Ihre Mediathek hochgeladen wurde, k\u00f6nnen Sie darauf klicken und das Alternativattribut ausf\u00fcllen. <span data-contrast=\"auto\"> direkt im Bearbeitungsbereich. Um zu \u00fcberpr\u00fcfen, ob der Alternativtext korrekt hinzugef\u00fcgt wurde, bewegen Sie den Mauszeiger nach der Ver\u00f6ffentlichung des Inhalts \u00fcber das Bild \u2013 der Alternativtext sollte dann angezeigt werden. <\/span><span data-ccp-props=\"{\"335551550\":6,\"335551620\":6}\"> <\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-244 size-full\" src=\"http:\/\/sat-govtech.pl\/wp-content\/uploads\/2025\/02\/screen-1.png\" alt=\"Hinzuf\u00fcgen von Alternativtext in WordPress\" width=\"338\" height=\"518\" srcset=\"https:\/\/sat-govtech.pl\/wp-content\/uploads\/2025\/02\/screen-1.png 338w, https:\/\/sat-govtech.pl\/wp-content\/uploads\/2025\/02\/screen-1-196x300.png 196w\" sizes=\"auto, (max-width: 338px) 100vw, 338px\" \/><\/p>\n<p style=\"text-align: center;\"><em>Dodawanie tekstu alternatywnego w systemie WordPress<\/em><\/p>\n<p><strong>Bei Websites, die ohne CMS-Systeme erstellt wurden<\/strong>, ist eine alternative Beschreibung erforderlich.<span data-contrast=\"auto\"> wird im HTML-Code direkt innerhalb des Bild-Tags hinzugef\u00fcgt. Der Code sollte folgenderma\u00dfen aussehen:  <\/span><span data-contrast=\"auto\">&lt;img src=&#8220;Dateititel&#8220; alt=&#8220;Bildbeschreibung&#8220;&gt;<\/span><span data-ccp-props=\"{\"335551550\":6,\"335551620\":6}\"> <\/span><\/p>\n<h2 aria-level=\"2\"><span data-contrast=\"none\">Wie lassen sich<\/span> f<b><span data-contrast=\"none\">ehlende Alt-Attribute erkennen<\/span><\/b><span data-contrast=\"none\">?<\/span><span data-ccp-props=\"{\"134245418\":true,\"134245529\":true,\"335559738\":160,\"335559739\":80}\"> <\/span><\/h2>\n<p>Manuelle \u00dcberpr\u00fcfung jedes Alt-Attributs eines Bildes<span data-contrast=\"auto\"> Die Bearbeitung der Website kann zeitaufw\u00e4ndig sein. Das<a href=\"http:\/\/sat-govtech.pl\/de\/\"> SAT-Tool<\/a> schafft Abhilfe, indem es die Website \u00fcberwacht und fehlende Bilder erkennt.  <\/span>Alternativtext<span data-contrast=\"auto\">. SAT analysiert alle Fotos, Diagramme und Grafiken anhand der WCAG-Richtlinien. Werden Unregelm\u00e4\u00dfigkeiten festgestellt, benachrichtigt das Tool umgehend den Website-Administrator und erstellt einen Bericht. Dieser Bericht enth\u00e4lt eine detaillierte Fehlerbeschreibung, die Position des Fehlers und die rechtliche Grundlage f\u00fcr die Einhaltung der Richtlinien. So k\u00f6nnen Website-Betreiber das Problem schnell erkennen, beheben (wobei SAT ebenfalls Unterst\u00fctzung bietet, indem das Tool m\u00f6gliche Ma\u00dfnahmen vorschl\u00e4gt) und potenzielle Strafen vermeiden.  <\/span><span data-ccp-props=\"{\"335551550\":6,\"335551620\":6}\"> <\/span><\/p>\n<p>Keine alternativen Beschreibungen<span data-contrast=\"auto\"> Das Fehlen von Bildern ist ein h\u00e4ufiger Fehler auf vielen Websites. Beh\u00f6rden und andere \u00f6ffentliche Einrichtungen, die verpflichtet sind, digital zug\u00e4ngliche Inhalte bereitzustellen, sollten diesem Problem besondere Aufmerksamkeit widmen. <\/span><span data-ccp-props=\"{\"335551550\":6,\"335551620\":6}\"> <\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Das Fehlen von Alternativtexten f\u00fcr Bilder auf einer Website bedeutet nicht nur eine verpasste Chance auf bessere Suchmaschinenplatzierungen, sondern stellt vor allem ein ernsthaftes Problem f\u00fcr die Barrierefreiheit von Inhalten dar. Das Alt-Attribut spielt eine entscheidende Rolle f\u00fcr Nutzer von Bildschirmleseprogrammen. Es erm\u00f6glicht sehbehinderten Menschen, Informationen \u00fcber den Inhalt einzelner Grafiken und Fotos zu erhalten. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1200,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[24],"tags":[],"class_list":["post-1083","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-nicht-kategorisiert"],"acf":[],"_links":{"self":[{"href":"https:\/\/sat-govtech.pl\/de\/wp-json\/wp\/v2\/posts\/1083","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sat-govtech.pl\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sat-govtech.pl\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sat-govtech.pl\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sat-govtech.pl\/de\/wp-json\/wp\/v2\/comments?post=1083"}],"version-history":[{"count":0,"href":"https:\/\/sat-govtech.pl\/de\/wp-json\/wp\/v2\/posts\/1083\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sat-govtech.pl\/de\/wp-json\/wp\/v2\/media\/1200"}],"wp:attachment":[{"href":"https:\/\/sat-govtech.pl\/de\/wp-json\/wp\/v2\/media?parent=1083"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sat-govtech.pl\/de\/wp-json\/wp\/v2\/categories?post=1083"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sat-govtech.pl\/de\/wp-json\/wp\/v2\/tags?post=1083"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}