[Dies ist eine Übersetzung des englischsprachigen Artikels „Alternative Text„. Copyright © by www.Webaim.org]
Einführung
Hinzufügen von alternativem Text für Bilder ist der erste Grundsatz der Barrierefreiheit. Es ist auch einer der Grundsätze, der am schwierigsten durchzuführen 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önlichen Interpretation. Durch die Verwendung von Beispielen, wird dieser Artikel unsere erfahrene Interpretation von angemessenem Einsatz alternativer Texte präsentieren.
Sehen Sie sich auch unseren Artikel über Bilder an, für weitere Informationen zu Barrierefreiheit für Bilder
Alternative Text Grundlagen
Alternativtext bietet eine textuelle Alternative zu Nicht-Text-Inhalten in Webseiten. Wir werden hier über alternativen Text für Bilder diskutieren, wenn dieser auch für die Prinzipien von Medien, Applets oder anderen Nicht-Text-Webinhalte angewendet werden kann.
Alternativer Text hat mehrere Funktionen:
- Es wird von Screenreadern anstelle von Bildern vorgelesen, was erlaubt, dass Inhalt und Funktion des Bildes für Menschen mit visuellen oder bestimmten Arten von kognitiver Behinderung zugänglich ist.
- Es wird anstelle des Bildes in Browsern angezeigt, wenn die Bilddatei nicht geladen wird oder wenn der Benutzer ausgewählt hat, diese Bilder nicht anzuzeigen.
- Es bietet eine semantische Bedeutung und Beschreibung von Bildern, die von Suchmaschinen gelesen oder verwendet werden können, um später den Inhalt des Bildes aus dem Seitenkontext zu schließen.
Das Schlüsselprinzip ist, dass Computer und Screenreader ein Bild nicht analysieren können und nicht feststellen können, was er anzeigt. Für Entwickler gilt, dass der Text dem Benutzer bereitgestellt werden muss, welcher den INHALT und die FUNKTION der Bilder innerhalb des Webinhalts zeigt.
Alternativer Text kann auf zwei Arten dargestellt werden:
- Innerhalb des
alt-Attributes desimg-Elements. - Innerhalb des Inhalts oder der Umgebung des Bildes selbst.
Dies bedeutet, dass das alt-Attribut (manchmal auch fälschlicherweise als alt tagbezeichnet) nicht der einzige Mechanismus für die Bereitstellung von Inahlt und Funktion des Bildes ist. Diese Informationen können auch im Text neben dem Bild oder in der Seite mit dem Bild versehen werden. In einigen Fällen, wo das Äquvalent nicht kurz und bündig vorgestellt werden kann, kann ein Link und/oder ein longdesc-Attribut, was auf eine eigene Seite verweist, die längere und vorgesehene Beschreibung enthalten.
Der Begriff alternativer Text wie er in diesem Artikel verwendet wird, bezieht sich auf die Text-Äquivalenz eines Bildes, unabhängig davon, wo der Text gespeichert ist. Er bezieht sich nicht nur auf das alt-Attribut des Bild-Tags. Alt-Attribute werden im Bezug auf sich selbst, oftmals, aber nicht ausschließlich, den alternative text enthalten.
Jedes Bild muss ein alt-Attribut enthalten Dies ist eine Voraussetzung des HTML-Standarts ( mit einiges Ausnahmen in HTML5). Bilder ohne alt-Attribut sind wahrscheinlich nicht zugänglich. In einigen Fällen können leere oder genullte alt-Attribute vorkommen (z.B., alt="").
Kontext ist Alles
Bei der Ermittlung eines geeigneten Alternativtextes für ein Bild, ist Kontext alles. Der alternative Text für ein Bild kann stark von dem basierenden Kontext und der Umgebung des Bildes abweichen. Nehmen Sie zum Beispiel das folgende Bild von George Washington:
Der alternative Text zu diesem Bild könnte, basierend auf dem Kontext, immens abweichen, wie unten gezeigt.
Um die Prinzipien von alternativen Texten am besten darzustellen, wurden den meisten Bildern innerhalb des Artikels alterive Texte wie „Beispielbild“ gegeben. Egal wie, der Inhalt des Bildes wird typischerweise innerhalb des Seiten-Kontexts präsentiert.
Beispiel 1
Wegen seiner Rolle als Oberbefehlshaber der amerikanischen Streitkräfte im Unabhängigkeitskrieg und später, als erster Präsident der Vereinigten Staaten, wird George Washington oft als „Vater seines Landes“ bezeichnet.
Was wäre ein geeigneter Alternativtext für das Bild in Beispiel 1?
- „Bild von George Washington“
- „George Washington, der erste Präsident der Vereinigten Staaten“
- Ein leeres
alt-Attribut (alt="") würde genügen. - „George Washington“
Der erste Schritt bei der Ermittlung eines geeigneten Alternativtextes für ein Bild ist, zu entscheiden, ob das Bild Inhalte zeigt und diese eine Funktion haben. In den meisten Fällen 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äsentiert 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 alt-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.
Werfen wir einen Blick auf einige wichtige Regeln für die alt-Attribute.
Das alt-Attribute sollte in der Regel:
- Präzise und gleichwertig in der Darstellung von gleichem Inhalt und Funktion eines Bildes.
- Prägnant sein. Das bedeutet, dass der richtige Inhalt (falls Inhalt vorhanden ist) und die Funktion (falls eine Funktion vorhanden ist) eines Bildes so kurz und bündig wie möglich dargestellt werden sollte, wie angemessen. Typischerweise sind nicht mehr als ein paar Worte notwendig, manchmal sind auch ein Satz oder zwei Sätze angemessen.
- NICHT redundant sein oder die gleichen Informationen wie der Text innerhalb des Rahmens des Bildes.
- Verwenden Sie KEINE Begriffe wie „bild von …“ oder „grafik von …“ um das Bild zu beschreiben. Normalerweise ist es für 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ß, dass es ein inhaltvermittelndes Bild ist, im Gegensatz zu einem Text. Falls ein Bild eine Fotografie oder eine Illustration oder ähnliches ist, ist es für den Inhalt wichtig, dass alternativer Text enthalten ist.
Aufgrund der obigen Regeln würde Option D (alt="George Washington") wahrscheinlich der beste alternative Text sein. Option A beschreibt das Bild unnötig als Bild. Option B bietet zusätzliche Informationen, die allerdings nicht direkt im Bild beschrieben werden, aber später im Text auftauchen. Option C (kein alt-Attribut) ist nicht geeignet, weil das Bild Inhalte vermittelt, die nicht im umgebenden Kontext präsentiert werden. Auch wenn der Zusammenhang darauf deuten lässt, dass es um George Washington geht, können sehende Nutzer dies direkt aus dem Inhalt des Bildes erzählen – Falls also ein Bild Inhalte vermittelt, sollte ein alternativer Text mit angegeben werden.
Beispiel 2
George Washington
Wegen seiner Rolle als Oberbefehlshaber der amerikanischen Streitkräfte im Unabhängigkeitskrieg und später, als erster Präsident der Vereinigten Staaten, wird George Washington oft als „Vater seines Landes“ bezeichnet.
Was wäre das passende alt-Attribut für das Bild in Beispiel 3?
- „George Washington“
- Ein leeres
alt-Attribut (alt="") reicht aus. - „Bild“
- Das Bild braucht kein
alt-Attribut.
In diesem Fall wird der Inhalt des Bildes im umgebenden Inhalt präsentiert, somit ist Option B (alt="") die beste Wahl. Option A wäre überflüssig. Option bietet fremde und nutzlose Informationen. Option D (kein alt-Attribut) ist niemals die richtige Wahl – jedes Bild muss ein ein alt-Attribut haben.
Beispiel 3
George Washington
Was wäre das passende alt-Attribut für das Bild in Beispiel 3?
- Ein leeres alt-Attribut (
alt="") reicht aus. - „Wikipedia-Eintrag für George Washington“
- „mehr Lesen“
- „George Washington“
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änzt werden. In diesem Fall gibt es keinen benachbarten Text innerhalb des Links, der eine Funktion beschreibt, deswegen muss ein alt-Attribut beigefügt werden. Als Ergebnis geht hervor, dass Option D (“George Washington”) wahrscheinlich die beste Wahl ist. Während die Worte „George Washington“ in den alt-Attributen für den Text redundant sind, der folgt, ist in diesem Fall die Redundanz nicht notwendig, um die Funktion ausreichend zu beschreiben.
Option A ist nicht ausreichend. Ein Bild, dass das einzige Element innerhalb eines Links ist, darf niemals ein fehlendes oder genulltes alt-Attribut. Das ist so, weil ein Screanreader ETWAS lesen muss, um einen Link zu erkennen. Screenreader könnten den Bilddateinamen oder die URL der verlinkten Seite lesen, welche nicht nützlich sein könnten. Und denken Sie daran, dass der Link außerhalb des Zusammenhangs des Textes gelesen werden kann, beispielsweise wenn der Nutzer über Links durch die Seite navigiert. Option B bietet Inhalte, die im Bild nicht verfügbar sind (z.B. können 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.
Das gesamte Beispiel könnte auch verbessert werden, indem sowohl das Bild, als auch die Textbeschriftung im Link platziert sind:
In diesem Fall werden sowohl das Bild, als auch die Textbeschriftung im Link platziert, so kann dem Bild ein alt="" hinzugefügt werden um Redundanzen zu vermeiden.
Falls möglich, vermeiden Sie Ausdrücke wie „link zu…“ oder „klicken sie auf diese Bild, um…“ oder ähnliche Ausdrücke im alt-Attribut. Links sollten für Screenreader auch als Links identifiziert werden können und sollten offentsichtlich für sehende Nutzer sein.
Beispiel 4
In diesem Gemälde hat der Künstler Emanuel Leutze Licht, Farme, Form, Perspektive, Proportion und Bewegung genutzt um eine Zusammensetzung zu schaffen.
Was wäre das passende alt-Attribut für das Bild in Beispiel 4?
- „George Washington“
- „Gemälde von George Washington“
- „Gemälde von George Washington, der den Delaware River überquert“
- „Ein klassisches Gemälde zeigt den Einsatz von Licht und Farbe, um eine Komposition zu erstellen“
- „Gemälde von George Washington, der den Delaware River überquert. Aufschäumende Wellen umgeben das Boot, wo der majestätische George Washington sieht gerade aus dem Sturm heraus in die Lichtstrahlen des Flusses, als er seine müden Truppen in die Schlacht führt.“
Wie zuvor, sollte man feststellen, ob der Inhalt des Gemäldes den umgebenden Text darstellt. In diesem Fall tut er es nicht (jedenfalls nicht vollständig). Das Gemälde befindet sich nicht in einem Link, sodass keine Funktion gegeben ist. Aber das Gemälde bietet viel mehr Interprätationmöglichkeiten, als dass diese für den begrenzten Rahmen ausreichend bestimmt werden können. Unabhängig davon, lassen Sie uns einen Blick auf die möglichen Optionen werfen.
Option A („George Washington“) beschreibt das Bild wahrscheinlich nicht ausreichend. Die Tatsache, dass George Washington sich in dem Bild befindet, wird für den Zusammenhang nicht relevant genug sein. Option B („Gemälde von George Washington“) scheint auszureichen, aber bietet nicht viel zusätzlichen Inhalt. Jedoch kann es von Vorteil sein, wenn das Bild als Gemälde beschrieben ist, im Gegensatz zu einer Fotografie oder einem anderen Bildtyp. Option C enthält weitere Informationen, die dabei helfen können, dass der Nutzer sich den Inhalt identifizieren kann. Denken Sie daran, dass alternativer Text nicht nur für Blinde ist. Viele sehende Nutzer sind in der Lage, die spezifische Malerei in Bezug zur Beschreibung zu erkennen, jedoch würde die Beschreibung „George Washington“ nicht ausreichen. Option D wäre angebracht, falls der Zweck des Bildes ist, eine bestimmte Kunst-Technik zu präsentieren und der Inhalt des Bildes nicht wichtig wäre. Option E kann eine geeignete Alternative sein, wenn es sich um eine detaillierte Prüfung des Gemäldes handelt, aber er ist zu lang und ausführlich um von Nutzen zu sein – solch ein Text wäre besser in einem Text in der Webseite aufgehoben.
Wie Sie sehen können, ist hier keine Antwort die richtige. Der richtige alternative Text hängt vom Kontext und des beabsichtigten Inhalts des Bildes ab.
Funktionelle Bilder
Bilder werden nicht nur verwendet, um Inhalte zu liefern, aber um wichtigte Funktionen zu liefern, solche wie Navigation.
Beispiel 5
Das „Produkte“-Bild ist Teil der Navigationsleiste.
Was wäre das passende alt-Attribut für die „Produkte“-Navigationsleiste in Beispiel 5?
- „Produkte“
- „Link zu Produkten“
- Das Bild vermittelt keinen Inhalt, ein (
alt="") würde ausreichen.
In diesem Fall wäre Option A die beste Antwort. Sie bietet sowohl den Inhalt als auch die Funktion des Bildes. Das Bild zeigt das Wort „Produkte“ und ist auch ein Link zu der Seite Produkte auf der Webseite. Das Bild wird so identifiziert, alsob es im Link sei, so ist „Link zu“ nicht notwendig, deswegen ist Option B eine schlechte Wahl. Weil das Bild das einzige Objekt innerhalb eines Links ist, ist ein genullter alt-Text niemals angemessen. Wenn ein Bild nur Text enthält, kann der angezeigt Text nur las alternativer Text verwendet werden.
Beispiel 6
Springen Sie zur nächsten Seite um etwas über George Washintons Präsidentschaft zu lesen.
Was wäre das passende alt-Attribut für das blaue Pfeilbild im Beispiel 6?
- „nächste“
- „nächste Seite“
- „George Washingtons Präsidentschaft“
- „Springen Sie zu George Washingtons Präsidentschaft „
Auch dies ist ein Beispiel, bei dem keine klare beste Antwort vorliegt. In diesem Fall könnte jede Option für dieses Beispiel geeignet sein. Option A und B werden in den meisten Fällen 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ächsten Seite in einer Reihe ist. Option D ist die beste Lösung, da sie die Funktion des Links zeigt und vermittelt, dass sie Teil einer Reihe von Seiten ist. Wie schon erwähnt, bestimmt man dies am besten anhand des alternativen Textes mit persönlicher Interpretation, basierend auf einem größeren Kontext zu dem Bild. Eine Beschreibung des Bildes („arrow“) ist nicht angemessen. Vielleicht wäre es eine bessere Lösung, wenn der Text „nächste Seite“ oder ein ähnlicher neben dem Bild innerhalb des Links stehen würde, jedoch als genullter alt-text.
Beispiel 7
Was wäre das passende alt-Attribut für das Bild-Symbol in Beispiel 7? Beachten Sie, dass sich das Symbol im Link befindet.
- „Bewerbung“
- „PDF Datei“
- „PDF Symbol“
- 4. Der Inhalt des Bildes wird durch den Kontext klar, ein (
alt="") würde ausreichen.
Beachten Sie, dass sich das Symbol im Link befindet. Wenn es nicht innerhalb des Links wäre, dann wäre ein anderer alt-Text passender. In diesem Fall, weil das Bild eine zusätzliche 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ßer Bedeutung, da auf Links oft außerhalb des Zusammenhangs ihrer Umgebung zugegriffen wird.
Option A („Bewerbung“) 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 “PDF” ausreichen würde) – Es ist eindeutig vorgegeben, dass der Inhalt durch das Bild präsentiert wird, dass der Link zu einer PDF-Datei führt. Die Funktion („Laden Sie die Bewerbung herunter“) wird innerhalb des Textes des Links präsentiert, so dass dieser nicht noch einmal im alt-Attribut vorkommen muss. Option C („PDF Symbol“) beschreibt eigentlich das Bild selbst, so dass dieses für den Kontext nicht am besten geeignet ist. In einem anderen Zusammenhang kann es wichtig sein, dass der Nutzer weiß, dass das Bild in der Tat ein Symbol ist. Option D (genullter oder leerer alt-Text) liefert nicht die wichtigen Informationen, die das Bild präsentiert.
Es ist wichtig an dieser Stelle zu beachten, dass das Symbol selbst im Link zum Dokument auftaucht, der alternative Text sollte eine vollständige Alternative des Inhalts der Link/Bild-Kombination gibt. Etwas wie „Laden Sie die Bewerbung im PDF-Format herunter“. „PDF-Format“ selbst würde nicht genügen, 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ürde, hört dieser „PDF-Format, PDF-Format, PDF-Format…“. 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.
Dekorative Bilder
Dekorative Bilder präsentieren nicht wichtige Inhalte, sie werden für das Layout oder für nicht-informative Zwecke verwendet, und tauchen nicht in einem Link auf. In fast allen Fällen sollten Abstandshalter und dekorative Bilder genullte alt-Text (alt="") haben.
Example 8
Inhaltstext hier.
Fußzeilentext hier.
Was wäre das passende alt-Attribut für das horizontale Trennzeichen im Bild in Beispiel 8?
- „Dekorative Linie“
- „Beginn der Fußzeile“
- „Trennzeichen“
alt=""würde ausreichen
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.
Wenn ein Bild nur für dekorative Zwecke genutzt wird, ist es oft ratsam, dieses Bild vom Seiteninhalt zu entfernen und es als Hintergrundbild via CSS einzufügen. Dies beseitigt den Bedarf an alternativem Text und beseitigt das Bild vom semantischen und strukturellen Fluss der Seite.
Beispiel 9
Unser Geschäft verspricht ihnen den besten Service, den Sie auf dem Planeten finden werden. Unser Team ist professionell geschult, um ihnen exzellenten Kundenservice während des Vertragsverhandlungsprozesses zu bieten.
Kundenzufriedenheit ist unsere oberste Priorität und wird garantiert, ansonsten erhalten Sie ihr Geld zurück.
Was wäre das passende alt-Attribut für das Bild in Beispiel 9?
- „Handschlag“
- „Geschäftsleute schütteln die Hände um einen Vertrag abzuschließen“
alt=""würde ausreichen- „Wir garantieren unseren professionellen Service“
Bei der Analyse dieses Bildes ist zu bestimmen, ob das Bild wichtige Inhalte präsentiert. In diesem Fall würde ich behauptet, dass das nicht der Fall ist. In der derzeitigen Praxis gibt es im Internet viele solcher Bilder mit beschreibendem alternativem Text, auch wenn es nicht so scheint, als würden diese nützliche Inhalte bieten. Option C (alt="") wäre 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 – was in diesem Fall nichts ist, oder vielleicht nur eine emotionale Stimmung oder ein Gefühl. Mit anderen Worten ist das Bild hauptsächlich dekorativ. Option D ist eindeutig falsch, aber es ist erwähnenswert, da zusätzliche Informationen oft in alt-Texten eingefügt werden, um zusätzliche Informationen oder zusätzliche Keywords für Suchmaschinen zu bieten. Solche Praktiken sin dnicht für den Einsatz alternativer Texte geeignet.
In vielen Fällen können Sie sich die Frage stellen: „Falls ich dieses Bild nicht nutzen kann, welches kann ich anstelle dieses Bildes nehmen?“ um einen geeigneten Alternativteyt zu bestimmen.
In dem obigen Beispiel ist es nicht wahrscheinlich, dass die Handschüttel-Bilder mit Text ersetzt werden können, so ist alt="" wahrscheinlich ausreichend.
Erweiterte Bilder
Es gibt einige Fälle, bei denen die Bestimmung alternativer Texte schwierig sein kann. Bei allen Bildern können Benutzertests und Tests von Screenreadern und Textbrowsern ihnen dabei helfen, die am besten geeignete Methode für die Umsetzung alternativer Texte zu finden.
Bildkarten
Bei der Verwendung von clientseitigen Bildkarten, muss das Hauptbild ein alt-Attribut besitzen. Das alt-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ür jede Region hat, als alt-Attribut den Wert „Regionen von New York“ haben. Falls das Hauptbild keinen Inhalt vermittelt, aber in erster Linie nur ein Container für die Hotspots ist (z.B. eine Navigationsleiste), dann ist alt="" angemessen.
Jeder Bildkarten Hotspot (area-Element) muss ein gleichwertiges alt-Attribut haben. Weil die Hotsports klickbar sind, muss jedes einen alternativen Text haben, der die Funktion des Hotsports beschreibt.
Weil Hotspots für serverseitige Bildkarten keinen alternativen Text geben und nicht für Tastaturen zugänglich sind, sollte sie nicht verwendet werden.
Bildteile
Manchmal werden für Design-Zwecke große Bilder in mehrere einzelne Bilder geteilt. Wenn mehrere Bildteile zusammen Inhalt vermitteln, dann müssen die Inhalte dem Benutzer präsentiert werden. Typischerweise wird dies durch die Bereitstellung des alternativen Textes im alt-Attribut des größten und bekanntesten Bildteils gemacht. Es ist nicht angebracht, dass alternativer Text unnötig wiederholt wird, entkräfte die alternativen Texte über die alt-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 alt-Attributen versehen werden, jedoch mit einem alt-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.
Hintergrundbilder
Es ist nicht möglich, alternativen Text direkt in CSS oder andere Hintergrundbilder einzufügen. Bilder, die Inhalte vermitteln, sollten nicht als Seiten- oder Element-Hintergrund platziert sein.
Hintergrundbilder können jedoch für dekorative Bilder verwendet werden, wodurch das Entfernen des Bildes aus dem Inhaltsfluss der Seite keine Notwendigkeit eines leeren alt-Attributes verlangt.
Manchmal werden Sprites oder andere Hintergrundbilder verwendet, um Inhalte zu präsentieren. Diese sollten generell gemieden werden, falls sie jedoch genutzt werden, sollte jeglicher durch das Hintergrundbild vermittelter Inhalt im Seiten Markup zugänglich gemacht sein. Wenn Sie das PDF-Symbol-Bild oben im Beispiel 7 jedoch als CSS Hintergrundbild anstelle des präsentierten nutzen wollen, können Sie folgende Textersetzungs-Technik nutzen, um den Inhalt innerhalb des Links zu präsentieren:
<a href="application.pdf">Laden Sie die Bewerbung herunter<span class="pdficon"> (PDF)</span></a>
Sie würden dann mittels CSS die “(PDF)” Text (das span class="pdficon"-Element) im Offscreen positionieren. Schauen Sie sich CSS in Aktion: Unsichtbarer Inhalt nur für Screenreader Nutzer für mehr Details an. Sehende Nutzer würden das PDF-Hintergrundbild sehen und Screenreader Nutzer würden den “(PDF)”-Text hören.
Logos
Es ist eine übliche Handlungsweise im Internet, dass das Hauptseitenlogo einen Link zur Homepage der Seite hat. Es ist eine ziemlich gängige Praxis, den alternativen Text für das Bild anzubieten, so wie ihr Unternehmensname (alt="Acme Company), dies reicht üblicherweise aus. Die Bezeichnung des Logos als tatsächliches Logo ist in der Regel nicht notwendig, als Beispiel (alt="Acme Company Logo") . Der Inhalt und die Funktion sind nicht „logo“. Entwickler identifizieren das Bild oft auf der Seite (alt="Acme Company home page), wenn das Bild jedoch konsequent am Anfang der Seite ist und der alternative Text geeignet ist, sollten diese zusätzlichen Informationen nicht nötig sein.
Komplexe Bilder
Wenn eine gleichwertige Alternative für ein komplexes Bild, wie eine Tabelle, ein Diagramm oder eine Karte sich nicht auf ein prägnantes 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üpfung mit einer separaten Webseite, die eine längere Beschreibung bietet, getan. Der Link kann neben dem Bild oder das Bild selbst auf der Beschreibungsseite verlinkt werden. Der Alternativtext dür das Bild sollte jedoch weiterhin den allgemeinen Inhalt des Bildes beschreiben
Das longdesc-Attribut kann auch auf das Bild angewendet werden. Der Wert des longdesc-Attributes des img-Elements enthält die URL der langen Beschreibungsseite. Der lange Beschreibungstext darf NICHT enthalten sein.
<img src="sales.jpg" alt="Liniendiagramm der jährlichen Verkaufsdaten" longdesc="salesdata.htm"><br>
<a href="salesdata.htm">Zeige Verkaufsdaten</a>
Das longdesc-Attribut bietet derzeit nur Zugriff auf die langen Beschreibungsseiten für einige Screenreader Nutzer. Sehenden Nutzern wird oft nicht bewusst, dass eine Beschreibung vorhanden ist, auch wenn sie stark davon profitieren könnten. Das longdesc-Attribut ist derzeigt kein Bestandteil von HTML5. Aus diesen Gründen ist zu empfehlen, wenn longdesc verwendet wird, dass ein standard Link zur langen Beschreibungsseite ebenfalls vorhanden ist.
Figure und Figcaption
HTML5 führt das figure-Element ein, welches wie folgt definiert ist:
Das Figure-Element repräsentiert 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.
Figure und Figcamtion ermöglichen eine semantische Verbindung zwischen einem Bild und der Bildbeschriftung. Wenn das Figcaption für ein Bild innerhalb einer Figure eine gleichwertige Alternative darstellt, dann kann das alt-Attribut weggelassen werden, um Überflüssigkeit und doppelten Inhalt zu vermeiden. Das Figcaption wird (oder sollte zumindest) als alternativer Text für ein Bild innerhalb des Figure präsentiert.
<figure>
<img src="acme.jpg">
<figcaption>Acme Corporation</figcaption>
</figure>
Fazit
Obwohl es das größte Problem ist, welches die Barrierefreiheit des Internets beeinflusst, gibt es immernoch abweichende und falsche Methoden für die Umsetzung von alternativen Texten. Indem die hier skizzierten Grundprinzipien einhalten werden, können Web-Entwickler ihre Webinhalte für Menschen mit Behinderungen besser zugänglich machen.
- Das Hinzufügen von alternativen Texten zu Bildern ist einer der einfachsten Grundsätze der Zugänglichkeit, allerdings ist er schwierig zu meistern.
- Alternativer Text kann in den
alt-Attributen oder im umgebenden Inhalt geliefert werden. - Jedes Bild muss ein
alt-Attribut haben. - Alternativer Text sollte:
- Den INHALT und die FUNKTION des Bildes präsentieren.
- Einprägend sein.
- Alternativer Text sollte nicht:
- Überflüssig sein (das Gleiche sein wie der benachbarte Text oder der Textkörper).
- Phrasen wie „Bild von…“ oder „Grafik von…“ benutzen.
- Geeigneter alternativer Text hängt stark von dem Bildkontext ab.
- Alt-Text eines funktionellen Bildes(z.B. ein Bild innerhalb eines Links) sollte die Funktion, als auch den Inhalt beschreiben.
- Dekorative Bilder benötigen weiterhin ein
alt-Attribut, aber sollten ein genulltes (alt="") sein.
Die Zugänglichkeit des Internets würde dramatisch ansteigen, wenn Alternativtext korrekt geliefert und umgesetzt werden würde.