{"id":99,"date":"2023-06-30T10:12:44","date_gmt":"2023-06-30T10:12:44","guid":{"rendered":"https:\/\/ffp3-atemschutzmaske.com\/neu\/barrierefrei\/?page_id=99"},"modified":"2023-06-30T10:32:00","modified_gmt":"2023-06-30T10:32:00","slug":"alternative-text","status":"publish","type":"page","link":"https:\/\/immocado.com\/barrierefrei\/alternative-text\/","title":{"rendered":"Alternativer Text"},"content":{"rendered":"<p>[Dies ist eine \u00dcbersetzung des englischsprachigen Artikels &#8222;<a href=\"https:\/\/webaim.org\/techniques\/alttext\/\" rel=\"nofollow\">Alternative Text<\/a>&#8222;. Copyright \u00a9 by www.Webaim.org]<\/p>\n<nav>\n<h2>Article Contents<\/h2>\n<ol>\n<li><a href=\"#intro\">Einf\u00fchrung<\/a><\/li>\n<li><a href=\"#basics\">Alternative Text Grundlagen<\/a><\/li>\n<li><a href=\"#context\">Kontext ist Alles<\/a><\/li>\n<li><a href=\"#functional\">Funktionelle Bilder<\/a><\/li>\n<li><a href=\"#decorative\">Dekorative Bilder<\/a><\/li>\n<li><a href=\"#advanced\">Erweiterte Bilder<\/a>\n<ol>\n<li><a href=\"#buttons\">Formale grafische Buttons<\/a><\/li>\n<li><a href=\"#imagemaps\">Bildkarten<\/a><\/li>\n<li><a href=\"#slices\">Bildteile<\/a><\/li>\n<li><a href=\"#background\">Hintergrundbilder<\/a><\/li>\n<li><a href=\"#logos\">Logos<\/a><\/li>\n<li><a href=\"#complex\">Komplexe Bilder<\/a><\/li>\n<li><a href=\"#figure\">Figure und Figcaption<\/a><\/li>\n<\/ol>\n<\/li>\n<li><a href=\"#conclusion\">Fazit<\/a><\/li>\n<\/ol>\n<\/nav>\n<div id=\"intro\" class=\"section\">\n<h2>Einf\u00fchrung<\/h2>\n<p>Hinzuf\u00fcgen von alternativem Text f\u00fcr Bilder ist der erste Grundsatz der Barrierefreiheit. Es ist auch einer der Grunds\u00e4tze, der am schwierigsten durchzuf\u00fchren ist. Das Web ist voll mit Bildern, die fehlende, falsche oder schlechte Alternativtexte haben. Wie viele Dinge in der Barrierefreiheit des Internets, ist die Festlegung, falls der Text gleichwertig, angemessen oder alternativ ist, eine Frage der pers\u00f6nlichen Interpretation. Durch die Verwendung von Beispielen, wird dieser Artikel unsere erfahrene Interpretation von angemessenem Einsatz alternativer Texte pr\u00e4sentieren.<\/p>\n<div class=\"important\">\n<div class=\"title\">Wichtig<\/div>\n<p>Sehen Sie sich auch unseren <a href=\"https:\/\/webaim.org\/techniques\/images\" rel=\"nofollow\">Artikel \u00fcber Bilder<\/a> an, f\u00fcr weitere Informationen zu Barrierefreiheit f\u00fcr Bilder<\/p>\n<\/div>\n<\/div>\n<div id=\"basics\" class=\"section\">\n<h2>Alternative Text Grundlagen<\/h2>\n<p>Alternativtext bietet eine textuelle Alternative zu Nicht-Text-Inhalten in Webseiten. Wir werden hier \u00fcber alternativen Text f\u00fcr Bilder diskutieren, wenn dieser auch f\u00fcr die Prinzipien von Medien, Applets oder anderen Nicht-Text-Webinhalte angewendet werden kann.<\/p>\n<p>Alternativer Text hat mehrere Funktionen:<\/p>\n<ul>\n<li>Es wird von Screenreadern anstelle von Bildern vorgelesen, was erlaubt, dass Inhalt und Funktion des Bildes f\u00fcr Menschen mit visuellen oder bestimmten Arten von kognitiver Behinderung zug\u00e4nglich ist.<\/li>\n<li>Es wird anstelle des Bildes in Browsern angezeigt, wenn die Bilddatei nicht geladen wird oder wenn der Benutzer ausgew\u00e4hlt hat, diese Bilder nicht anzuzeigen.<\/li>\n<li>Es bietet eine semantische Bedeutung und Beschreibung von Bildern, die von Suchmaschinen gelesen oder verwendet werden k\u00f6nnen, um sp\u00e4ter den Inhalt des Bildes aus dem Seitenkontext zu schlie\u00dfen.<\/li>\n<\/ul>\n<p>Das Schl\u00fcsselprinzip ist, dass Computer und Screenreader ein Bild nicht analysieren k\u00f6nnen und nicht feststellen k\u00f6nnen, was er anzeigt. F\u00fcr Entwickler gilt, dass der Text dem Benutzer bereitgestellt werden muss, welcher den <strong>INHALT<\/strong> und die <strong>FUNKTION<\/strong> der Bilder innerhalb des Webinhalts zeigt.<\/p>\n<p>Alternativer Text kann auf zwei Arten dargestellt werden:<\/p>\n<ul>\n<li>Innerhalb des <code>alt<\/code>-Attributes des <code>img<\/code>-Elements.<\/li>\n<li>Innerhalb des Inhalts oder der Umgebung des Bildes selbst.<\/li>\n<\/ul>\n<p>Dies bedeutet, dass das <code>alt<\/code>-Attribut (manchmal auch f\u00e4lschlicherweise als <code>alt<\/code> <em>tag<\/em>bezeichnet) nicht der einzige Mechanismus f\u00fcr die Bereitstellung von Inahlt und Funktion des Bildes ist. Diese Informationen k\u00f6nnen auch im Text neben dem Bild oder in der Seite mit dem Bild versehen werden. In einigen F\u00e4llen, wo das \u00c4quvalent nicht kurz und b\u00fcndig vorgestellt werden kann, kann ein Link und\/oder ein <code><a href=\"https:\/\/www.webaim.org\/techniques\/images\/longdesc\" rel=\"nofollow\">longdesc<\/a><\/code>-Attribut, was auf eine eigene Seite verweist, die l\u00e4ngere und vorgesehene Beschreibung enthalten.<\/p>\n<div class=\"important\">\n<div class=\"title\">Wichtig<\/div>\n<p>Der Begriff <em>alternativer Text\u00a0<\/em>wie er in diesem Artikel verwendet wird, bezieht sich auf die Text-\u00c4quivalenz eines Bildes, unabh\u00e4ngig davon, wo der Text gespeichert ist. Er bezieht sich nicht nur auf das <code>alt<\/code>-Attribut des Bild-Tags. <em>Alt-Attribute <\/em> werden im Bezug auf sich selbst, oftmals, aber nicht ausschlie\u00dflich, den <em>alternative text<\/em> enthalten.<\/p>\n<\/div>\n<p><em><strong>Jedes Bild muss ein <code>alt<\/code>-Attribut enthalten<\/strong><\/em> Dies ist eine Voraussetzung des HTML-Standarts ( mit einiges Ausnahmen in HTML5). Bilder ohne <code>alt<\/code>-Attribut sind wahrscheinlich nicht zug\u00e4nglich. In einigen F\u00e4llen k\u00f6nnen leere oder genullte <code>alt<\/code>-Attribute vorkommen (z.B., <code>alt=\"\"<\/code>).<\/p>\n<\/div>\n<div id=\"context\" class=\"section\">\n<h2>Kontext ist Alles<\/h2>\n<p>Bei der Ermittlung eines geeigneten Alternativtextes f\u00fcr ein Bild, ist Kontext alles. Der alternative Text f\u00fcr ein Bild kann stark von dem basierenden Kontext und der Umgebung des Bildes abweichen. Nehmen Sie zum Beispiel das folgende Bild von George Washington:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/webaim.org\/techniques\/alttext\/media\/gw.jpg\" alt=\"example image\" width=\"125\" height=\"157\" \/><\/p>\n<p>Der alternative Text zu diesem Bild k\u00f6nnte, basierend auf dem Kontext, immens abweichen, wie unten gezeigt.<\/p>\n<div class=\"note\">\n<div class=\"title\">Hinweis<\/div>\n<p>Um die Prinzipien von alternativen Texten am besten darzustellen, wurden den meisten Bildern innerhalb des Artikels alterive Texte wie \u201eBeispielbild\u201c gegeben. Egal wie, der Inhalt des Bildes wird typischerweise innerhalb des Seiten-Kontexts pr\u00e4sentiert.<\/p>\n<\/div>\n<div id=\"example1\" class=\"section\">\n<h3>Beispiel 1<\/h3>\n<div class=\"example\">\n<p class=\"center\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/webaim.org\/techniques\/alttext\/media\/gw.jpg\" alt=\"example image\" width=\"125\" height=\"157\" \/><\/p>\n<p>Wegen seiner Rolle als Oberbefehlshaber der amerikanischen Streitkr\u00e4fte im Unabh\u00e4ngigkeitskrieg und sp\u00e4ter, als erster Pr\u00e4sident der Vereinigten Staaten, wird George Washington oft als \u201eVater seines Landes\u201c bezeichnet.<\/p>\n<\/div>\n<div class=\"question\">\n<p>Was w\u00e4re ein geeigneter Alternativtext f\u00fcr das Bild in Beispiel 1?<\/p>\n<ol class=\"letterlist\">\n<li>&#8222;Bild von George Washington&#8220;<\/li>\n<li>&#8222;George Washington, der erste Pr\u00e4sident der Vereinigten Staaten&#8220;<\/li>\n<li>Ein leeres <code>alt<\/code>-Attribut (<code>alt=\"\"<\/code>) w\u00fcrde gen\u00fcgen.<\/li>\n<li>&#8222;George Washington&#8220;<\/li>\n<\/ol>\n<\/div>\n<p>Der erste Schritt bei der Ermittlung eines geeigneten Alternativtextes f\u00fcr ein Bild ist, zu entscheiden, ob das Bild <strong>Inhalte<\/strong> zeigt und diese eine <strong>Funktion<\/strong> haben. In den meisten F\u00e4llen wird ein Bild nur eine Funktion haben, wenn ein Link enthalten ist (oder ein image map hotspot oder eine Taste). Festzustellen, ob ein Bild Inhalt pr\u00e4sentiert und was der Inhalt ist, kann noch viel schwerer sein. Wenn die Inhalte, die im Bild vermittelt werden, im Text in dem umgebenden Rahmen des Bildes dargestellt werden, kann ein leeres <code>alt<\/code>-Attribut ausreichen. In dem obigen Beispiel, indem der Inhalt durch das Bild dargestellt wird, wird dem Benutzer vermittert, dass es sich um George Washington handelt. Das Bild hat keine Funktion, weil es keinen Link aufweist und nicht angeklickt werden kann.<\/p>\n<p>Werfen wir einen Blick auf einige wichtige Regeln f\u00fcr die <code>alt<\/code>-Attribute.<\/p>\n<div class=\"important\">\n<div class=\"title\">Wichtig<\/div>\n<p>Das <code>alt<\/code>-Attribute sollte <em>in der Regel<\/em>:<\/p>\n<ul>\n<li><strong>Pr\u00e4zise und gleichwertig<\/strong> in der Darstellung von gleichem Inhalt und Funktion eines Bildes.<\/li>\n<li><strong>Pr\u00e4gnant sein.<\/strong> Das bedeutet, dass der richtige Inhalt (falls Inhalt vorhanden ist) und die Funktion (falls eine Funktion vorhanden ist) eines Bildes so kurz und b\u00fcndig wie m\u00f6glich dargestellt werden sollte, wie angemessen. Typischerweise sind nicht mehr als ein paar Worte notwendig, manchmal sind auch ein Satz oder zwei S\u00e4tze angemessen.<\/li>\n<li><strong>NICHT redundant sein<\/strong> oder die gleichen Informationen wie der Text innerhalb des Rahmens des Bildes.<\/li>\n<li><strong>Verwenden Sie KEINE Begriffe wie &#8222;bild von \u2026&#8220; oder &#8222;grafik von \u2026&#8220; um das Bild zu beschreiben.<\/strong> Normalerweise ist es f\u00fcr den Benutzer offensichtlich, dass es sich um ein Bild handelt. Und falls ein Bild Inhalte vermittelt, ist es typischerweise nicht notwendig, dass der Benutzer wei\u00df, dass es ein inhaltvermittelndes Bild ist, im Gegensatz zu einem Text. Falls ein Bild eine Fotografie oder eine Illustration oder \u00e4hnliches ist, ist es f\u00fcr den Inhalt wichtig, dass alternativer Text enthalten ist.<\/li>\n<\/ul>\n<\/div>\n<p>Aufgrund der obigen Regeln w\u00fcrde Option D (<code>alt=\"George Washington\"<\/code>) wahrscheinlich der beste alternative Text sein. Option A beschreibt das Bild unn\u00f6tig als Bild. Option B bietet zus\u00e4tzliche Informationen, die allerdings nicht direkt im Bild beschrieben werden, aber sp\u00e4ter im Text auftauchen. Option C (kein <code>alt<\/code>-Attribut) ist nicht geeignet, weil das Bild Inhalte vermittelt, die nicht im umgebenden Kontext pr\u00e4sentiert werden. Auch wenn der Zusammenhang darauf deuten l\u00e4sst, dass es um George Washington geht, k\u00f6nnen sehende Nutzer dies direkt aus dem Inhalt des Bildes erz\u00e4hlen \u2013 Falls also ein Bild Inhalte vermittelt, sollte ein alternativer Text mit angegeben werden.<\/p>\n<\/div>\n<div class=\"section\">\n<h3>Beispiel 2<\/h3>\n<div class=\"example\">\n<p class=\"center captioned\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/webaim.org\/techniques\/alttext\/media\/gw.jpg\" alt=\"\" width=\"125\" height=\"157\" \/><br \/>\n<strong>George Washington<\/strong><\/p>\n<p>Wegen seiner Rolle als Oberbefehlshaber der amerikanischen Streitkr\u00e4fte im Unabh\u00e4ngigkeitskrieg und sp\u00e4ter, als erster Pr\u00e4sident der Vereinigten Staaten, wird George Washington oft als \u201eVater seines Landes\u201c bezeichnet.<\/p>\n<\/div>\n<div class=\"question\">\n<p>Was w\u00e4re das passende <code>alt<\/code>-Attribut f\u00fcr das Bild in Beispiel 3?<\/p>\n<ol class=\"letterlist\">\n<li>&#8222;George Washington&#8220;<\/li>\n<li>Ein leeres <code>alt<\/code>-Attribut (<code>alt=\"\"<\/code>) reicht aus.<\/li>\n<li>&#8222;Bild&#8220;<\/li>\n<li>Das Bild braucht kein <code>alt<\/code>-Attribut.<\/li>\n<\/ol>\n<\/div>\n<p>In diesem Fall wird der Inhalt des Bildes im umgebenden Inhalt pr\u00e4sentiert, somit ist Option B (<code>alt=\"\"<\/code>) die beste Wahl. Option A w\u00e4re \u00fcberfl\u00fcssig. Option bietet fremde und nutzlose Informationen. Option D (kein <code>alt<\/code>-Attribut) ist niemals die richtige Wahl \u2013 jedes Bild muss ein ein <code>alt<\/code>-Attribut haben.<\/p>\n<\/div>\n<div class=\"section\">\n<h3>Beispiel 3<\/h3>\n<div class=\"example\">\n<p class=\"center captioned\"><a class=\"noicon\" href=\"https:\/\/en.wikipedia.org\/wiki\/George_Washington\" rel=\"nofollow\"><img decoding=\"async\" loading=\"lazy\" class=\"link\" src=\"https:\/\/webaim.org\/techniques\/alttext\/media\/gw.jpg\" alt=\"example image\" width=\"125\" height=\"157\" \/><\/a><br \/>\n<strong>George Washington<\/strong><\/p>\n<\/div>\n<div class=\"question\">\n<p>Was w\u00e4re das passende <code>alt<\/code>-Attribut f\u00fcr das Bild in Beispiel 3?<\/p>\n<ol class=\"letterlist\">\n<li>Ein leeres alt-Attribut (<code>alt=\"\"<\/code>) reicht aus.<\/li>\n<li>&#8222;Wikipedia-Eintrag f\u00fcr George Washington&#8220;<\/li>\n<li>&#8222;mehr Lesen&#8220;<\/li>\n<li>&#8222;George Washington&#8220;<\/li>\n<\/ol>\n<\/div>\n<p>In diesem Fall ist das Bild auch ein Link, sodass es auch eine Funktion hat. Immer, wenn ein Bild einen Link hat, muss die Funktion des Bildes mit einem alternativen Text erg\u00e4nzt werden. In diesem Fall gibt es keinen benachbarten Text innerhalb des Links, der eine Funktion beschreibt, deswegen muss ein <code>alt<\/code>-Attribut beigef\u00fcgt werden. Als Ergebnis geht hervor, dass Option D (\u201cGeorge Washington\u201d) wahrscheinlich die beste Wahl ist. W\u00e4hrend die Worte &#8222;George Washington&#8220; in den <code>alt<\/code>-Attributen f\u00fcr den Text redundant sind, der folgt, ist in diesem Fall die Redundanz nicht notwendig, um die Funktion ausreichend zu beschreiben.<\/p>\n<p>Option A ist nicht ausreichend. <strong>Ein Bild, dass das einzige Element innerhalb eines Links ist, darf niemals ein fehlendes oder genulltes <code>alt<\/code>-Attribut.<\/strong> Das ist so, weil ein Screanreader ETWAS lesen muss, um einen Link zu erkennen. Screenreader k\u00f6nnten den Bilddateinamen oder die URL der verlinkten Seite lesen, welche nicht n\u00fctzlich sein k\u00f6nnten. Und denken Sie daran, dass der Link au\u00dferhalb des Zusammenhangs des Textes gelesen werden kann, beispielsweise wenn der Nutzer \u00fcber Links durch die Seite navigiert. Option B bietet Inhalte, die im Bild nicht verf\u00fcgbar sind (z.B. k\u00f6nnen Sie nicht sagen, dass das Bild zu Wikipedia verlinkt ist, indem Sie es anschauen). Option C hat keine angemessene Beschreibung der Funktion, vor allem ist sie aus dem Zusammenhang gerissen.<\/p>\n<p>Das gesamte Beispiel k\u00f6nnte auch verbessert werden, indem sowohl das Bild, als auch die Textbeschriftung im Link platziert sind:<\/p>\n<div class=\"example\">\n<p class=\"center captioned\"><a class=\"noicon\" href=\"https:\/\/en.wikipedia.org\/wiki\/George_Washington\" rel=\"nofollow\"><img decoding=\"async\" loading=\"lazy\" class=\"link\" src=\"https:\/\/webaim.org\/techniques\/alttext\/media\/gw.jpg\" alt=\"example image\" width=\"125\" height=\"157\" \/><br \/>\n<strong>George Washington<\/strong><\/a><\/p>\n<\/div>\n<p>In diesem Fall werden sowohl das Bild, als auch die Textbeschriftung im Link platziert, so kann dem Bild ein <code>alt=\"\"<\/code> hinzugef\u00fcgt werden um Redundanzen zu vermeiden.<\/p>\n<p>Falls m\u00f6glich, vermeiden Sie Ausdr\u00fccke wie &#8222;link zu\u2026&#8220; oder &#8222;klicken sie auf diese Bild, um\u2026&#8220; oder \u00e4hnliche Ausdr\u00fccke im <code>alt<\/code>-Attribut. Links sollten f\u00fcr Screenreader auch als Links identifiziert werden k\u00f6nnen und sollten offentsichtlich f\u00fcr sehende Nutzer sein.<\/p>\n<\/div>\n<div class=\"section\">\n<h3>Beispiel 4<\/h3>\n<div class=\"example\">\n<p class=\"center captioned\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/webaim.org\/techniques\/alttext\/media\/gw2.jpg\" alt=\"example image\" width=\"400\" height=\"231\" \/><\/p>\n<p>In diesem Gem\u00e4lde hat der K\u00fcnstler Emanuel Leutze Licht, Farme, Form, Perspektive, Proportion und Bewegung genutzt um eine Zusammensetzung zu schaffen.<\/p>\n<\/div>\n<div class=\"question\">\n<p>Was w\u00e4re das passende <code>alt<\/code>-Attribut f\u00fcr das Bild in Beispiel 4?<\/p>\n<ol class=\"letterlist\">\n<li>&#8222;George Washington&#8220;<\/li>\n<li>&#8222;Gem\u00e4lde von George Washington&#8220;<\/li>\n<li>&#8222;Gem\u00e4lde von George Washington, der den Delaware River \u00fcberquert&#8220;<\/li>\n<li>&#8222;Ein klassisches Gem\u00e4lde zeigt den Einsatz von Licht und Farbe, um eine Komposition zu erstellen&#8220;<\/li>\n<li>&#8222;Gem\u00e4lde von George Washington, der den Delaware River \u00fcberquert. Aufsch\u00e4umende Wellen umgeben das Boot, wo der majest\u00e4tische George Washington sieht gerade aus dem Sturm heraus in die Lichtstrahlen des Flusses, als er seine m\u00fcden Truppen in die Schlacht f\u00fchrt.&#8220;<\/li>\n<\/ol>\n<\/div>\n<p>Wie zuvor, sollte man feststellen, ob der Inhalt des Gem\u00e4ldes den umgebenden Text darstellt. In diesem Fall tut er es nicht (jedenfalls nicht vollst\u00e4ndig). Das Gem\u00e4lde befindet sich nicht in einem Link, sodass keine Funktion gegeben ist. Aber das Gem\u00e4lde bietet viel mehr Interpr\u00e4tationm\u00f6glichkeiten, als dass diese f\u00fcr den begrenzten Rahmen ausreichend bestimmt werden k\u00f6nnen. Unabh\u00e4ngig davon, lassen Sie uns einen Blick auf die m\u00f6glichen Optionen werfen.<\/p>\n<p>Option A (&#8222;George Washington&#8220;) beschreibt das Bild wahrscheinlich nicht ausreichend. Die Tatsache, dass George Washington sich in dem Bild befindet, wird f\u00fcr den Zusammenhang nicht relevant genug sein. Option B (&#8222;Gem\u00e4lde von George Washington&#8220;) scheint auszureichen, aber bietet nicht viel zus\u00e4tzlichen Inhalt. Jedoch kann es von Vorteil sein, wenn das Bild als Gem\u00e4lde beschrieben ist, im Gegensatz zu einer Fotografie oder einem anderen Bildtyp. Option C enth\u00e4lt weitere Informationen, die dabei helfen k\u00f6nnen, dass der Nutzer sich den Inhalt identifizieren kann. Denken Sie daran, dass alternativer Text nicht nur f\u00fcr Blinde ist. Viele sehende Nutzer sind in der Lage, die spezifische Malerei in Bezug zur Beschreibung zu erkennen, jedoch w\u00fcrde die Beschreibung &#8222;George Washington&#8220; nicht ausreichen. Option D w\u00e4re angebracht, falls der Zweck des Bildes ist, eine bestimmte Kunst-Technik zu pr\u00e4sentieren und der Inhalt des Bildes nicht wichtig w\u00e4re. Option E kann eine geeignete Alternative sein, wenn es sich um eine detaillierte Pr\u00fcfung des Gem\u00e4ldes handelt, aber er ist zu lang und ausf\u00fchrlich um von Nutzen zu sein \u2013 solch ein Text w\u00e4re besser in einem Text in der Webseite aufgehoben.<\/p>\n<p>Wie Sie sehen k\u00f6nnen, ist hier <em>keine<\/em> Antwort die richtige. Der richtige alternative Text h\u00e4ngt vom Kontext und des beabsichtigten Inhalts des Bildes ab.<\/p>\n<\/div>\n<\/div>\n<div id=\"functional\" class=\"section\">\n<h2>Funktionelle Bilder<\/h2>\n<p>Bilder werden nicht nur verwendet, um Inhalte zu liefern, aber um wichtigte Funktionen zu liefern, solche wie Navigation.<\/p>\n<div class=\"section\">\n<h3>Beispiel 5<\/h3>\n<div class=\"example\"><img decoding=\"async\" loading=\"lazy\" class=\"center\" src=\"https:\/\/webaim.org\/techniques\/alttext\/media\/products.jpg\" alt=\"example image\" width=\"159\" height=\"46\" \/><\/div>\n<p>Das &#8222;Produkte&#8220;-Bild ist Teil der Navigationsleiste.<\/p>\n<div class=\"question\">\n<p>Was w\u00e4re das passende <code>alt<\/code>-Attribut f\u00fcr die \u201eProdukte\u201c-Navigationsleiste in Beispiel 5?<\/p>\n<ul>\n<li>&#8222;Produkte&#8220;<\/li>\n<li>&#8222;Link zu Produkten&#8220;<\/li>\n<li>Das Bild vermittelt keinen Inhalt, ein (<code>alt=\"\"<\/code>) w\u00fcrde ausreichen.<\/li>\n<\/ul>\n<\/div>\n<p>In diesem Fall w\u00e4re Option A die beste Antwort. Sie bietet sowohl den Inhalt als auch die Funktion des Bildes. Das Bild zeigt das Wort &#8222;Produkte\u201c und ist auch ein Link zu der Seite Produkte auf der Webseite. Das Bild wird so identifiziert, alsob es im Link sei, so ist \u201eLink zu\u201c nicht notwendig, deswegen ist Option B eine schlechte Wahl. Weil das Bild das einzige Objekt innerhalb eines Links ist, ist ein genullter <code>alt<\/code>-Text niemals angemessen.<strong> Wenn ein Bild nur Text enth\u00e4lt, kann der angezeigt Text nur las alternativer Text verwendet werden.<\/strong><\/p>\n<\/div>\n<div class=\"section\">\n<h3>Beispiel 6<\/h3>\n<div class=\"example\">\n<p>Springen Sie zur n\u00e4chsten Seite um etwas \u00fcber George Washintons Pr\u00e4sidentschaft zu lesen.<\/p>\n<p><a class=\"noicon\" href=\"https:\/\/www.nps.gov\/wamo\/gw\/president.htm\" rel=\"nofollow\"><img decoding=\"async\" loading=\"lazy\" class=\"center\" src=\"https:\/\/webaim.org\/techniques\/alttext\/media\/next.gif\" alt=\"example image\" width=\"19\" height=\"19\" \/><\/a><\/p>\n<\/div>\n<div class=\"question\">\n<p>Was w\u00e4re das passende <code>alt<\/code>-Attribut f\u00fcr das blaue Pfeilbild im Beispiel 6?<\/p>\n<ol class=\"letterlist\">\n<li>&#8222;n\u00e4chste&#8220;<\/li>\n<li>&#8222;n\u00e4chste Seite&#8220;<\/li>\n<li>&#8222;George Washingtons Pr\u00e4sidentschaft&#8220;<\/li>\n<li>&#8222;Springen Sie zu George Washingtons Pr\u00e4sidentschaft &#8222;<\/li>\n<\/ol>\n<\/div>\n<p>Auch dies ist ein Beispiel, bei dem keine klare beste Antwort vorliegt. In diesem Fall k\u00f6nnte jede Option f\u00fcr dieses Beispiel geeignet sein. Option A und B werden in den meisten F\u00e4llen ausreichend sein, sofern dem Benutzer klar ist, dass es mehrere Seiten innerhalb des Artikels gibt. Option C stellt sehr deutlich die Funktion des Links dar, aber nicht, dass der Link nicht auf der n\u00e4chsten Seite in einer Reihe ist. Option D ist die beste L\u00f6sung, da sie die Funktion des Links zeigt und vermittelt, dass sie Teil einer Reihe von Seiten ist. Wie schon erw\u00e4hnt, bestimmt man dies am besten anhand des alternativen Textes mit pers\u00f6nlicher Interpretation, basierend auf einem gr\u00f6\u00dferen Kontext zu dem Bild. Eine Beschreibung des Bildes (&#8222;arrow&#8220;) ist nicht angemessen. Vielleicht w\u00e4re es eine bessere L\u00f6sung, wenn der Text &#8222;n\u00e4chste Seite&#8220; oder ein \u00e4hnlicher neben dem Bild innerhalb des Links stehen w\u00fcrde, jedoch als genullter alt-text.<\/p>\n<\/div>\n<div class=\"section\">\n<h3>Beispiel 7<\/h3>\n<div class=\"example\">\n<p><a href=\"https:\/\/webaim.org\/techniques\/alttext\/media\/generic_link.htm\" rel=\"nofollow\">Laden Sie die Bewerbung herunter<img decoding=\"async\" loading=\"lazy\" class=\"center\" src=\"https:\/\/webaim.org\/techniques\/alttext\/media\/pdf.gif\" alt=\"example image\" width=\"32\" height=\"31\" \/><\/a><\/p>\n<\/div>\n<div class=\"question\">\n<p>Was w\u00e4re das passende <code>alt<\/code>-Attribut f\u00fcr das Bild-Symbol in Beispiel 7? Beachten Sie, dass sich das Symbol im Link befindet.<\/p>\n<ol class=\"letterlist\">\n<li>&#8222;Bewerbung&#8220;<\/li>\n<li>&#8222;PDF Datei&#8220;<\/li>\n<li>&#8222;PDF Symbol&#8220;<\/li>\n<li>4. Der Inhalt des Bildes wird durch den Kontext klar, ein (<code>alt=\"\"<\/code>) w\u00fcrde ausreichen.<\/li>\n<\/ol>\n<\/div>\n<p>Beachten Sie, dass sich das Symbol im Link befindet. Wenn es nicht innerhalb des Links w\u00e4re, dann w\u00e4re ein anderer <code>alt<\/code>-Text passender. In diesem Fall, weil das Bild eine zus\u00e4tzliche Information des Links liefert, ist es wichtig, dass der Link selbst innerhalb des Links auftaucht und mit dem Link gelesen wird. Das ist von gro\u00dfer Bedeutung, da auf Links oft au\u00dferhalb des Zusammenhangs ihrer Umgebung zugegriffen wird.<\/p>\n<p>Option A (&#8222;Bewerbung&#8220;) ist redundant mit dem umgebenden Text, deswegen ist es nicht die beste Wahl. Option B ist die beste Wahl (wenn auch vielleicht ein knapperer Ausdruck wie \u201cPDF\u201d ausreichen w\u00fcrde) \u2013 Es ist eindeutig vorgegeben, dass der Inhalt durch das Bild pr\u00e4sentiert wird, dass der Link zu einer PDF-Datei f\u00fchrt. Die Funktion (&#8222;Laden Sie die Bewerbung herunter&#8220;) wird innerhalb des Textes des Links pr\u00e4sentiert, so dass dieser nicht noch einmal im <code>alt<\/code>-Attribut vorkommen muss. Option C (&#8222;PDF Symbol&#8220;) beschreibt eigentlich das Bild selbst, so dass dieses f\u00fcr den Kontext nicht am besten geeignet ist. In einem anderen Zusammenhang kann es wichtig sein, dass der Nutzer wei\u00df, dass das Bild in der Tat ein Symbol ist. Option D (genullter oder leerer <code>alt<\/code>-Text) liefert nicht die wichtigen Informationen, die das Bild pr\u00e4sentiert.<\/p>\n<p>Es ist wichtig an dieser Stelle zu beachten, dass das Symbol selbst im Link zum Dokument auftaucht, der alternative Text sollte eine vollst\u00e4ndige Alternative des Inhalts der Link\/Bild-Kombination gibt. Etwas wie &#8222;Laden Sie die Bewerbung im PDF-Format herunter&#8220;. &#8222;PDF-Format&#8220; selbst w\u00fcrde nicht gen\u00fcgen, vor allem, da es mehrere Dokumente mit Links dieser Natur geben kann. In dem Fall, wenn ein Screenreader-Nutzer durch die Links der Seite navigieren w\u00fcrde, h\u00f6rt dieser &#8222;PDF-Format, PDF-Format, PDF-Format\u2026&#8220;. Als allgemeine Regel gilt, falls das gleiche Bild mehrfach auf einer Seite verwendet wird um zu einem Ort zu wechseln, sollte alternativer Text die Unterschiede kenntlich machen.<\/p>\n<\/div>\n<\/div>\n<div id=\"decorative\" class=\"section\">\n<h2>Dekorative Bilder<\/h2>\n<p>Dekorative Bilder pr\u00e4sentieren nicht wichtige Inhalte, sie werden f\u00fcr das Layout oder f\u00fcr nicht-informative Zwecke verwendet, und tauchen nicht in einem Link auf. In fast allen F\u00e4llen sollten Abstandshalter und dekorative Bilder genullte <code>alt<\/code>-Text (<code>alt=\"\"<\/code>) haben.<\/p>\n<div class=\"section\">\n<h3>Example 8<\/h3>\n<div class=\"example center\">\n<p>Inhaltstext hier.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"center\" src=\"media\/separator.gif\" alt=\"example image\" width=\"200\" height=\"9\" \/><\/p>\n<p>Fu\u00dfzeilentext hier.<\/p>\n<\/div>\n<div class=\"question\">\n<p>Was w\u00e4re das passende <code>alt<\/code>-Attribut f\u00fcr das horizontale Trennzeichen im Bild in Beispiel 8?<\/p>\n<ol class=\"letterlist\">\n<li>&#8222;Dekorative Linie&#8220;<\/li>\n<li>&#8222;Beginn der Fu\u00dfzeile&#8220;<\/li>\n<li>&#8222;Trennzeichen&#8220;<\/li>\n<li><code>alt=\"\"<\/code> w\u00fcrde ausreichen<\/li>\n<\/ol>\n<\/div>\n<p>Weil das Bild keine Inhalte vermittelt und nicht innerhalb des Links ist, ist Option D die passenste Wahl. Eine Beschreibung des Bildes ist nicht angemessen.<\/p>\n<div class=\"note\">\n<div class=\"title\">Hinweis<\/div>\n<p>Wenn ein Bild nur f\u00fcr dekorative Zwecke genutzt wird, ist es oft ratsam, dieses Bild vom Seiteninhalt zu entfernen und es als Hintergrundbild via CSS einzuf\u00fcgen. Dies beseitigt den Bedarf an alternativem Text und beseitigt das Bild vom semantischen und strukturellen Fluss der Seite.<\/p>\n<\/div>\n<\/div>\n<div class=\"section\">\n<h3>Beispiel 9<\/h3>\n<div class=\"example\">\n<p><img decoding=\"async\" loading=\"lazy\" class=\"floatright border\" src=\"https:\/\/webaim.org\/techniques\/alttext\/media\/handshake.jpg\" alt=\"example image\" width=\"150\" height=\"135\" \/>Unser Gesch\u00e4ft verspricht ihnen den besten Service, den Sie auf dem Planeten finden werden. Unser Team ist professionell geschult, um ihnen exzellenten Kundenservice w\u00e4hrend des Vertragsverhandlungsprozesses zu bieten.<\/p>\n<p>Kundenzufriedenheit ist unsere oberste Priorit\u00e4t und wird garantiert, ansonsten erhalten Sie ihr Geld zur\u00fcck.<\/p>\n<\/div>\n<div class=\"question\">\n<p>Was w\u00e4re das passende <code>alt<\/code>-Attribut f\u00fcr das Bild in Beispiel 9?<\/p>\n<ol class=\"letterlist\">\n<li>&#8222;Handschlag&#8220;<\/li>\n<li>&#8222;Gesch\u00e4ftsleute sch\u00fctteln die H\u00e4nde um einen Vertrag abzuschlie\u00dfen&#8220;<\/li>\n<li><code>alt=\"\"<\/code> w\u00fcrde ausreichen<\/li>\n<li>&#8222;Wir garantieren unseren professionellen Service&#8220;<\/li>\n<\/ol>\n<\/div>\n<p>Bei der Analyse dieses Bildes ist zu bestimmen, ob das Bild wichtige Inhalte pr\u00e4sentiert. In diesem Fall w\u00fcrde ich behauptet, dass das nicht der Fall ist. In der derzeitigen Praxis gibt es im Internet viele solcher Bilder mit <em>beschreibendem<\/em> alternativem Text, auch wenn es nicht so scheint, als w\u00fcrden diese n\u00fctzliche Inhalte bieten. Option C (<code>alt=\"\"<\/code>) w\u00e4re wohl in diesem Fall angemessen, weil das Bild nicht relevante und wichtige inhalte vermittelt. Option A und B beschreiben das Bild, aber vermitteln nichts equivalentes wie es das Bild selbst tut \u2013 was in diesem Fall nichts ist, oder vielleicht nur eine emotionale Stimmung oder ein Gef\u00fchl. Mit anderen Worten ist das Bild haupts\u00e4chlich dekorativ. Option D ist eindeutig falsch, aber es ist erw\u00e4hnenswert, da zus\u00e4tzliche Informationen oft in <code>alt<\/code>-Texten eingef\u00fcgt werden, um zus\u00e4tzliche Informationen oder zus\u00e4tzliche Keywords f\u00fcr Suchmaschinen zu bieten. Solche Praktiken sin dnicht f\u00fcr den Einsatz alternativer Texte geeignet.<\/p>\n<div class=\"note\">\n<div class=\"title\">Hinweis<\/div>\n<p>In vielen F\u00e4llen k\u00f6nnen Sie sich die Frage stellen: &#8222;Falls ich dieses Bild nicht nutzen kann, welches kann ich anstelle dieses Bildes nehmen?\u201c um einen geeigneten Alternativteyt zu bestimmen.<\/p>\n<p>In dem obigen Beispiel ist es nicht wahrscheinlich, dass die Handsch\u00fcttel-Bilder mit Text ersetzt werden k\u00f6nnen, so ist <code>alt=\"\"<\/code> wahrscheinlich ausreichend.<\/p>\n<\/div>\n<\/div>\n<div id=\"advanced\" class=\"section\">\n<h2>Erweiterte Bilder<\/h2>\n<p>Es gibt einige F\u00e4lle, bei denen die Bestimmung alternativer Texte schwierig sein kann. Bei allen Bildern k\u00f6nnen Benutzertests und Tests von Screenreadern und Textbrowsern ihnen dabei helfen, die am besten geeignete Methode f\u00fcr die Umsetzung alternativer Texte zu finden.<\/p>\n<div id=\"buttons\" class=\"section\">\n<h3>Formale grafische Buttons<\/h3>\n<p>Formale grafische Buttons m\u00fcssen ein <code>alt<\/code>-Attribut haben, dass die Funktion der Taste beschreibt. Formale grafische Buttons werden oft verwendet, um eine optisch ansprechende und kleindere Version des standard Buttons zu bieten. Der Alternativtext sollte beschreiben, was die Taste tut, wenn z.B. etwas wie &#8222;Suchen&#8220;, &#8222;Senden&#8220;, &#8222;Register&#8220;, &#8222;Bestellung&#8220; usw. ausgew\u00e4hlt wird. Als Beispiel <code><input alt=\"Submit Search\" type=\"image\" \/><\/code> sollte f\u00fcr einen Bild Button f\u00fcr einen Seiten Suchformular angemessen sein.<\/p>\n<\/div>\n<div id=\"imagemaps\" class=\"section\">\n<h3>Bildkarten<\/h3>\n<p>Bei der Verwendung von clientseitigen Bildkarten, muss das Hauptbild ein <code>alt<\/code>-Attribut besitzen. Das <code>alt<\/code>-Attribut sollte alle Inhalte, die mit dem Bild dargestellt werden, jedoch nicht jene, die mit den Bildkarten Hotspots dargestellt werden, besitzen. Als Beispiel kann ein Staat von New York, der Hotspots f\u00fcr jede Region hat, als <code>alt<\/code>-Attribut den Wert &#8222;Regionen von New York&#8220; haben. Falls das Hauptbild keinen Inhalt vermittelt, aber in erster Linie nur ein Container f\u00fcr die Hotspots ist (z.B. eine Navigationsleiste), dann ist <code>alt=\"\"<\/code> angemessen.<\/p>\n<p>Jeder Bildkarten Hotspot (<code>area<\/code>-Element) muss ein gleichwertiges <code>alt<\/code>-Attribut haben. Weil die Hotsports klickbar sind, muss jedes einen alternativen Text haben, der die Funktion des Hotsports beschreibt.<\/p>\n<p>Weil Hotspots f\u00fcr serverseitige Bildkarten keinen alternativen Text geben und nicht f\u00fcr Tastaturen zug\u00e4nglich sind, sollte sie nicht verwendet werden.<\/p>\n<\/div>\n<div id=\"slices\" class=\"section\">\n<h3>Bildteile<\/h3>\n<p>Manchmal werden f\u00fcr Design-Zwecke gro\u00dfe Bilder in mehrere einzelne Bilder geteilt. Wenn mehrere Bildteile zusammen Inhalt vermitteln, dann m\u00fcssen die Inhalte dem Benutzer pr\u00e4sentiert werden. Typischerweise wird dies durch die Bereitstellung des alternativen Textes im <code>alt<\/code>-Attribut des gr\u00f6\u00dften und bekanntesten Bildteils gemacht. Es ist nicht angebracht, dass alternativer Text unn\u00f6tig wiederholt wird, entkr\u00e4fte die alternativen Texte \u00fcber die <code>alt<\/code>-Attribute der Bilder, oder biete gar keine Alternative an. Wenn ein Bildteil innerhalb eines Links ist, muss der alternative Text der Funktion des Links mit <code>alt<\/code>-Attributen versehen werden, jedoch mit einem <code>alt<\/code>-Attribut eines anderen Bildes im gleichen Link, oder in einem Text mit dem gleichen Link. Jeder Link muss einen funktionalen Text haben, der die Funktion des Links beschreibt.<\/p>\n<\/div>\n<div id=\"background\" class=\"section\">\n<h3>Hintergrundbilder<\/h3>\n<p>Es ist nicht m\u00f6glich, alternativen Text direkt in CSS oder andere Hintergrundbilder einzuf\u00fcgen. Bilder, die Inhalte vermitteln, sollten nicht als Seiten- oder Element-Hintergrund platziert sein.<\/p>\n<p>Hintergrundbilder k\u00f6nnen jedoch f\u00fcr dekorative Bilder verwendet werden, wodurch das Entfernen des Bildes aus dem Inhaltsfluss der Seite keine Notwendigkeit eines leeren <code>alt<\/code>-Attributes verlangt.<\/p>\n<p>Manchmal werden Sprites oder andere Hintergrundbilder verwendet, um Inhalte zu pr\u00e4sentieren. Diese sollten generell gemieden werden, falls sie jedoch genutzt werden, sollte jeglicher durch das Hintergrundbild vermittelter Inhalt im Seiten Markup zug\u00e4nglich gemacht sein. Wenn Sie das PDF-Symbol-Bild oben im Beispiel 7 jedoch als CSS Hintergrundbild anstelle des pr\u00e4sentierten nutzen wollen, k\u00f6nnen Sie folgende Textersetzungs-Technik nutzen, um den Inhalt innerhalb des Links zu pr\u00e4sentieren:<\/p>\n<p><code>&lt;a href=\"application.pdf\"&gt;Laden Sie die Bewerbung herunter&lt;span class=\"pdficon\"&gt; (PDF)&lt;\/span&gt;&lt;\/a&gt;<\/code><\/p>\n<p>Sie w\u00fcrden dann mittels CSS die \u201c(PDF)\u201d Text (das <code>span class=\"pdficon\"<\/code>-Element) im Offscreen positionieren. Schauen Sie sich <a href=\"https:\/\/webaim.org\/techniques\/css\/invisiblecontent\/\" rel=\"nofollow\">CSS in Aktion: Unsichtbarer Inhalt nur f\u00fcr Screenreader Nutzer<\/a> f\u00fcr mehr Details an. Sehende Nutzer w\u00fcrden das PDF-Hintergrundbild sehen und Screenreader Nutzer w\u00fcrden den \u201c(PDF)\u201d-Text h\u00f6ren.<\/p>\n<\/div>\n<div id=\"logos\" class=\"section\">\n<h3>Logos<\/h3>\n<p>Es ist eine \u00fcbliche Handlungsweise im Internet, dass das Hauptseitenlogo einen Link zur Homepage der Seite hat. Es ist eine ziemlich g\u00e4ngige Praxis, den alternativen Text f\u00fcr das Bild anzubieten, so wie ihr Unternehmensname (<code>alt=\"Acme Company<\/code>), dies reicht \u00fcblicherweise aus. Die Bezeichnung des Logos als tats\u00e4chliches Logo ist in der Regel nicht notwendig, als Beispiel (<code>alt=\"Acme Company Logo\"<\/code>) . Der Inhalt und die Funktion sind nicht &#8222;logo&#8220;. Entwickler identifizieren das Bild oft auf der Seite (<code>alt=\"Acme Company home page<\/code>), wenn das Bild jedoch konsequent am Anfang der Seite ist und der alternative Text geeignet ist, sollten diese zus\u00e4tzlichen Informationen nicht n\u00f6tig sein.<\/p>\n<\/div>\n<div id=\"complex\" class=\"section\">\n<h3>Komplexe Bilder<\/h3>\n<p>Wenn eine gleichwertige Alternative f\u00fcr ein komplexes Bild, wie eine Tabelle, ein Diagramm oder eine Karte sich nicht auf ein pr\u00e4gnantes alt-Attribut UND nicht im Zusammenhang mit der Seite steht (wie eine benachbarte Datentabelle), dann sollte die Alternative anderso vorgesehen sein. Dies wird in der Regel durch die Verkn\u00fcpfung mit einer separaten Webseite, die eine l\u00e4ngere Beschreibung bietet, getan. Der Link kann neben dem Bild oder das Bild selbst auf der Beschreibungsseite verlinkt werden. Der Alternativtext d\u00fcr das Bild sollte jedoch weiterhin den allgemeinen Inhalt des Bildes beschreiben<\/p>\n<p>Das <code>longdesc<\/code>-Attribut kann auch auf das Bild angewendet werden. Der Wert des longdesc-Attributes des img-Elements enth\u00e4lt die URL der langen Beschreibungsseite. Der lange Beschreibungstext darf <strong>NICHT<\/strong> enthalten sein.<\/p>\n<p><code>&lt;img src=\"sales.jpg\" alt=\"Liniendiagramm der j\u00e4hrlichen Verkaufsdaten\" longdesc=\"salesdata.htm\"&gt;&lt;br&gt;<br \/>\n&lt;a href=\"salesdata.htm\"&gt;Zeige Verkaufsdaten&lt;\/a&gt;<\/code><\/p>\n<div class=\"note\">\n<div class=\"title\">Hinweis<\/div>\n<p>Das <code>longdesc<\/code>-Attribut bietet derzeit nur Zugriff auf die langen Beschreibungsseiten f\u00fcr einige Screenreader Nutzer. Sehenden Nutzern wird oft nicht bewusst, dass eine Beschreibung vorhanden ist, auch wenn sie stark davon profitieren k\u00f6nnten. Das <code>longdesc<\/code>-Attribut ist derzeigt kein Bestandteil von HTML5. Aus diesen Gr\u00fcnden ist zu empfehlen, wenn <code>longdesc<\/code> verwendet wird, dass ein standard Link zur langen Beschreibungsseite ebenfalls vorhanden ist.<\/p>\n<\/div>\n<\/div>\n<div id=\"figure\" class=\"section\">\n<h3>Figure und Figcaption<\/h3>\n<p>HTML5 f\u00fchrt das <code>figure<\/code>-Element ein, welches wie folgt definiert ist:<\/p>\n<blockquote><p>Das Figure-Element repr\u00e4sentiert eine Einheit des Inhalts, gegebenenfalls mit einer Beschriftung, die in sich geschlossen ist, die typischerweise als eine einzige Einheit aus dem Hauptstrom des Dokuments verwiesen wird und ohne Beeinflussung des Hauptstroms des Dokuments bewegt werden kann, ohne die Bedeutung des Dokuments zu beeinflussen.<\/p><\/blockquote>\n<p>Figure und Figcamtion erm\u00f6glichen eine semantische Verbindung zwischen einem Bild und der Bildbeschriftung. Wenn das Figcaption f\u00fcr ein Bild innerhalb einer Figure eine gleichwertige Alternative darstellt, dann kann das alt-Attribut weggelassen werden, um \u00dcberfl\u00fcssigkeit und doppelten Inhalt zu vermeiden. Das Figcaption wird (oder sollte zumindest) als alternativer Text f\u00fcr ein Bild innerhalb des Figure pr\u00e4sentiert.<\/p>\n<p><code>&lt;figure&gt;<br \/>\n&lt;img src=\"acme.jpg\"&gt;<br \/>\n&lt;figcaption&gt;Acme Corporation&lt;\/figcaption&gt;<br \/>\n&lt;\/figure&gt;<\/code><\/p>\n<\/div>\n<\/div>\n<div id=\"conclusion\" class=\"section\">\n<h2>Fazit<\/h2>\n<p>Obwohl es das gr\u00f6\u00dfte Problem ist, welches die Barrierefreiheit des Internets beeinflusst, gibt es immernoch abweichende und falsche Methoden f\u00fcr die Umsetzung von alternativen Texten. Indem die hier skizzierten Grundprinzipien einhalten werden, k\u00f6nnen Web-Entwickler ihre Webinhalte f\u00fcr Menschen mit Behinderungen besser zug\u00e4nglich machen.<\/p>\n<ul>\n<li>Das Hinzuf\u00fcgen von alternativen Texten zu Bildern ist einer der einfachsten Grunds\u00e4tze der Zug\u00e4nglichkeit, allerdings ist er schwierig zu meistern.<\/li>\n<li>Alternativer Text kann in den <code>alt<\/code>-Attributen oder im umgebenden Inhalt geliefert werden.<\/li>\n<li>Jedes Bild muss ein <code>alt<\/code>-Attribut haben.<\/li>\n<li>Alternativer Text <em>sollte<\/em>:\n<ul>\n<li>Den INHALT und die FUNKTION des Bildes pr\u00e4sentieren.<\/li>\n<li>Einpr\u00e4gend sein.<\/li>\n<\/ul>\n<\/li>\n<li>Alternativer Text <em>sollte nicht:<\/em>\n<ul>\n<li>\u00dcberfl\u00fcssig sein (das Gleiche sein wie der benachbarte Text oder der Textk\u00f6rper).<\/li>\n<li>Phrasen wie &#8222;Bild von\u2026&#8220; oder &#8222;Grafik von\u2026&#8220; benutzen.<\/li>\n<\/ul>\n<\/li>\n<li>Geeigneter alternativer Text h\u00e4ngt stark von dem Bildkontext ab.<\/li>\n<li>Alt-Text eines funktionellen Bildes(z.B. ein Bild innerhalb eines Links) sollte die Funktion, als auch den Inhalt beschreiben.<\/li>\n<li>Dekorative Bilder ben\u00f6tigen weiterhin ein <code>alt<\/code>-Attribut, aber sollten ein genulltes (<code>alt=\"\"<\/code>) sein.<\/li>\n<\/ul>\n<p>Die Zug\u00e4nglichkeit des Internets w\u00fcrde dramatisch ansteigen, wenn Alternativtext korrekt geliefert und umgesetzt werden w\u00fcrde.<\/p>\n<\/div>\n<\/div>\n<div id=\"translations\">\n<h2>\u00dcbersetzungen<\/h2>\n<\/div>\n<div id=\"related\">\n<h2>Verwandte Ressourcen<\/h2>\n<ul>\n<li><a href=\"https:\/\/www.webaim.org\/intro\/\" rel=\"nofollow\">Einf\u00fchrung in die Internet Barrierefreiheit<\/a><\/li>\n<li><a href=\"https:\/\/www.webaim.org\/techniques\/images\" rel=\"nofollow\">Barrierefreie Bilder<\/a><\/li>\n<li><a href=\"https:\/\/www.webaim.org\/articles\/visual\" rel=\"nofollow\">Visual Disabilities<\/a><\/li>\n<li><a href=\"https:\/\/www.webaim.org\/techniques\/screenreader\/\" rel=\"nofollow\">Visuelle Behinderungen<\/a><\/li>\n<\/ul>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>[Dies ist eine \u00dcbersetzung des englischsprachigen Artikels &#8222;Alternative Text&#8222;. Copyright \u00a9 by www.Webaim.org] Article Contents Einf\u00fchrung Alternative Text Grundlagen Kontext ist Alles Funktionelle Bilder Dekorative Bilder Erweiterte Bilder Formale grafische Buttons Bildkarten Bildteile Hintergrundbilder Logos Komplexe Bilder Figure und Figcaption Fazit Einf\u00fchrung Hinzuf\u00fcgen von alternativem Text f\u00fcr Bilder ist der erste Grundsatz der Barrierefreiheit. Es [&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\/99"}],"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=99"}],"version-history":[{"count":3,"href":"https:\/\/immocado.com\/barrierefrei\/wp-json\/wp\/v2\/pages\/99\/revisions"}],"predecessor-version":[{"id":111,"href":"https:\/\/immocado.com\/barrierefrei\/wp-json\/wp\/v2\/pages\/99\/revisions\/111"}],"wp:attachment":[{"href":"https:\/\/immocado.com\/barrierefrei\/wp-json\/wp\/v2\/media?parent=99"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}