Navigation und Service

Einfach teilhaben (Link zur Startseite)


Textalternativen für Bilder

Begründung

Viele Menschen haben Schwierigkeiten, Bilder zu sehen oder deren Inhalte zu erkennen. Dies gilt vor allem für blinde und sehbehinderte Menschen. Sie können Bilder oder Grafiken gar nicht oder nur schwer wahrnehmen. Bilder sind visuelle Informationsquellen, die hauptsächlich dazu geeignet sind, von den Medien "Monitor" und "Drucker" ausgegeben zu werden. Eine automatische Umwandlung in Sprache oder Blindenschrift ist nicht ohne Weiteres möglich, weil sie in der Regel nicht automatisch ausgewertet und beschrieben werden können. Blinden und sehbehinderten Menschen bleiben die Informationen, die ausschließlich in Bildern transportiert werden, verschlossen. Um blinden und sehbehinderten Menschen bildliche Informationen zugänglich zu machen, benötigen Bilder so genannte Textalternativen. Textalternativen sind Texte, die anstelle der Bilder benutzt werden und entsprechende Informationen vermitteln sollen. Texte in elektronischer Form sind als Textalternative am besten geeignet, weil die Information von unterschiedlichen Ausgabegeräten wiedergegeben werden kann. Die Ausgabe ist also universell und geräteunabhängig. So zum Beispiel kann ein elektronischer Text von Webbrowsern in beliebiger Größe und in allen Farbkombinationen dargestellt werden. Er kann aber auch von Screenreadern vorgelesen und über Braillezeilen in Punktschrift (Blindenschrift) angezeigt werden.

Eine Braillezeile im Einsatz. Eine Braillezeile im Einsatz.

Die Abbildung oben zeigt eine Braillezeile abtastet, die von einer blinden Nutzerin abgetastet wird.

Ziel dieser Bedingung ist es, Nutzerinnen und Nutzern auch bildliche Informationen zugänglich zu machen, indem für jedes verwendete Bild ein gleichwertiger Alternativtext bereitgestellt wird. Dieser muss dem gleichen Zweck dienen wie das originale Bild. Hierfür muss auch der Zweck des Bildes im Zusammenhang mit der Webseite untersucht und verknüpft werden.

Anleitung

Bilder und andere visuelle Informationen (zum Beispiel Grafiken) werden auf unterschiedlichste Art und Weise verwendet. Für jede Textalternative muss gelten, dass die Alternative dem gleichen Zweck wie das ursprüngliche Bild dienen soll. Häufig wird deshalb von "gleichwertigen Alternativen" gesprochen.

Um gute Textalternativen für Ihre Bilder und Grafiken zu finden, sollten Sie sich zunächst sehr gut über den Zweck des Bildes, das Sie einfügen wollen, im Klaren sein:

  1. Soll eine Information mitgeteilt werden?
  2. Dient das Bild dazu, eine visuelle Erfahrung zu schaffen oder eine bestimmte Stimmung zu wecken?
  3. Ist das Bild nur Dekoration ohne jegliche Information oder dient das Bild nur der visuellen Formatierung?

Achtung Sonderfälle: Bilder, die als Link oder als Steuerelement verwendet werden oder auch Grafiken, die einem Test dienen, stellen Sonderfälle dar. Sie werden weiter unten behandelt.

Bilder mit Information

Wenn das Bild eine Information mitteilen soll, muss diese Information zunächst in Worte gefasst werden. Wenn möglich sollten Sie sich auf 40-80 Buchstaben beschränken. 40 beziehungsweise 80 Zeichen sind die Standardbreiten der kommerziell verfügbaren Braillezeilen. Durch eine Beschränkung auf 40-80 Zeilen bleibt die Darstellung der Textalternative mit 1-2 Zeilen auch für blinde Menschen übersichtlich. Eine solche Beschreibung ist dann eine "Kurzbeschreibung" des Bildes.

Kurzbeschreibung

In HTML wird zum Einfügen des Bildes das img-Element verwendet. Dabei muss die Kurzbeschreibung, wie im folgenden Quellcode-Beispiel, als Wert des alt-Attributs eingetragen werden.

<img src="Bilddatei.jpg" alt="Dies ist eine Kurzbeschreibung">

Der Text im alt-Attribut ersetzt das Bild bei allen Ausgaben, bei denen das Bild selbst nicht angezeigt werden kann. Dies gilt auch, wenn das Laden der Bilder aus Kostengründen abgeschaltet wurde, etwa bei mobilen Verbindungen (zum Beispiel Smartphones), oder wenn aus technischen Gründen das Bild auf dem Server nicht vorhanden ist.

Bei älteren Versionen des Internet-Explorer wird das alt-Attribut als sogenannter Tooltip beim Überfahren mit der Maus angezeigt. Bei anderen Browsern wird für diesen Effekt das title-Attribut benötigt, was wiederum zu einigen Missverständnissen über Alternativtexte führte. Bitte beachten Sie deshalb: Das title-Attribut ist kein Ersatz für das alt-Attribut!

Langbeschreibung

Manchmal reichen die 40-80 Zeichen für einen Alternativtext, der denselben Zweck erfüllt, nicht aus. In diesem Fall muss für das Bild oder die Grafik eine Langbeschreibung verwendet werden. Schaubilder oder Diagramme sind typische Beispiele für Grafiken, deren Komplexität ausführlichere Texte erfordern, um dieselbe Information bereitzustellen.

Für die Bereitstellung einer Langbeschreibung gibt es drei verschiedene Techniken:

  1. Beschreibung des Bildes durch normalen Text in der Nähe des Bildes
  2. Verwendung des longdesc-Attributs
  3. Verlinkung der Langbeschreibung in unmittelbarer Nähe des Bildes

Die erste Technik, das Bild oder die Grafik im normalen Text in der Nähe des Bildes zu beschreiben, ist grundsätzlich die natürlichste Art, eine lange Textalternative zur Verfügung zu stellen. Für den häufigen Fall, dass eine Grafik Teil eines Webbeitrags ist, ist diese Technik den anderen Techniken vorzuziehen. Die Gründe dafür liegen auf der Hand. Zunächst wird es wahrscheinlich so sein, dass eine Autorin oder ein Autor die Aussage einer komplexen Grafik sowieso im Text erläutern wird. Zudem trägt eine für alle Leserinnen und Leser sichtbare und schnell auffindbare Beschreibung wesentlich zum Verständnis der Grafik bei.

<img src="diagramm.png" 
     alt="Balkendiagramm zur Wahlbeteiligung bei Bundestagswahlen. 
          Beschreibung folgt im Text">
<p>Das Diagramm zeigt deutlich die fallende ... </p>

Die zweite und dritte Technik lagern die Langbeschreibung in eine Extra-Datei oder auf eine Extra-Webseite aus. Das heißt, die Langbeschreibung ist dann nicht mehr direkt Teil der Webseite.

Die zweite Technik verbindet die externe Datei über das longdesc-Attribut mit der zu beschreibenden Grafik. Geeignete assistive Technologien können dann auf die Langbeschreibung hinweisen und bei Bedarf diese vorlesen. Ein großer Nachteil dieser Technik ist, dass die Langbeschreibung allen anderen, die die assistive Technologie nicht nutzen, vorenthalten wird, obwohl die Langbeschreibung auch hier eine Hilfe sein kann um Verständnisprobleme abzubauen.

<img src="diagramm.png" 
     alt="Kurzbeschreibung der Grafik" 
     longdesc="langbeschreibung.txt">

Die dritte Technik, das Auslagern der Langbeschreibung auf eine zusätzliche Webseite und das Verlinken mittels eines normalen Links, umgeht den oben genannten Nachteil auf eine pragmatische Art und Weise. Zu einer komplexen Grafik wird hierbei unmittelbar vor oder hinter der Grafik ein Link eingefügt, welcher auf die Langbeschreibung verweist.

<img src="diagramm.png" alt="Kurzbeschreibung der Grafik">
<a href="langbeschreibung.html">
   Ausführliche Beschreibung der Grafik
</a>

In der BITV von 2002 wurde hierfür der sogenannte "D"-Link eingeführt. Der Linktext zur Langbeschreibung bestand dabei nur aus dem Buchstaben "D" wie "Description". Im Prinzip ist diese Technik immer noch gültig, allerdings ist der Linktext des "D"-Links nicht verständlich und eindeutig im Sinne der BITV 2.0 aus dem Jahr 2011.

Denkbar wäre auch die Verwendung eines Symbols, um auf die Langbeschreibungen zu verlinken. Das Symbol würde allen Links ein einheitliches Aussehen geben und mittels individuellen Alternativtexten wären die Links trotzdem unterscheidbar.

<img src="diagramm.png" alt="Kurzbeschreibung des Diagramms">
<a href="#langbeschreibung_diagramm">
   <img src="langbeschreibung.png" 
        alt="Ausführliche Beschreibung des Diagramms">
</a>

Wichtig bei allen drei Techniken ist allerdings, dass eine zusätzliche Kurzbeschreibung im alt-Attribut angegeben wird. Zum einen muss die Kurzbeschreibung auf die Position der Langbeschreibung hinweisen und zum anderen muss das alt-Attribut die Grafik in kurzer Form so beschreiben, dass Screenreader-Nutzende die Grafik identifizieren können. Letzteres befähigt zum Beispiel auch nicht-sehende Menschen mit ihren sehenden Kollegen und Kolleginnen über denselben Webbeitrag zu kommunizieren und zu diskutieren.

Erlaubt ist es auch, die Langbeschreibung einer oder mehrerer Grafiken am Ende des Webbeitrags zu sammeln und auf diese per seiteninterne Links zu verweisen. Dies hat den Vorteil, dass die Langbeschreibungen auch dann zur Verfügung stehen, wenn der Text ausgedruckt wird.

Wie findet man einen geeigneten Alternativtext?

Eine Textalternative ist nur hilfreich mit einem guten Alternativtext. Die WCAG schlägt hierzu in ihrer Technik-Dokument zur Technik G92 vor, sich beim Schreiben eigener Textalternativen die folgenden vier Fragen zu stellen:

  • Warum ist dieses Bild hier?
  • Welche Informationen bietet es an?
  • Welchen Zweck erfüllt es?
  • Wenn Sie das Bild nicht verwenden könnten, welche Worte würden Sie benutzen, um die gleiche Funktion und/oder die gleichen Informationen zu vermitteln?

Beachten Sie bitte, dass ein Bild auf unterschiedlichen Webseiten und in unterschiedlichen Situationen wahrscheinlich auch unterschiedlichen Zwecken dienen kann und deshalb auch unterschiedliche Beschreibungen haben sollte. Ein Bild eines Dackels auf einer Webseite für Kinder über die verschiedenen Haustiere hat bestimmt einen anderen Zweck, als dasselbe Bild auf einer Webseite des "Deutschen Teckelklubs von 1888".

Deshalb kann es problematisch sein, wenn Alternativtexte pauschal von einer Bildredaktion vergeben werden und die Bilder samt Alternativtext in einer Datenbank für eine spätere Verwendung gespeichert werden. Die Bildredaktion kann im Vorfeld bei der Vergabe des Alternativtextes die Absicht des Autors oder der Autorin für die Verwendung des Bildes noch nicht kennen. Deshalb muss die letzte Entscheidung über den Alternativtext von den Autorinnen oder Autoren selbst und mit Bezug zum Inhalt der Webseite getroffen werden.

Keine Textalternativen für dekorative Bilder, Bilder zur visuellen Formatierung und nicht sichtbare Bilder

Rein dekorative Grafiken sind Bilder die keinerlei Information tragen und keinen Beitrag zum informativen Inhalt einer Webseite leisten. Sehende Menschen, die eine Webseite betrachten, nehmen eine solche Grafik in der Regel nicht bewusst wahr. Da ein Alternativtext den gleichen Zweck erfüllen soll, folgt daraus, dass assistive Technologien die Dekografiken ebenfalls ignorieren sollen.

Unter Umständen kann es vorkommen, dass eine Grafik für Alle unsichtbar sein soll, zum Beispiel bei der Nutzung eines Bildes zur Führung von Nutzerstatistiken. In diesem Fall sollte die Grafik ebenfalls von Screenreadern oder anderen assistiven Technologien ignoriert werden. Die Verwendung eines Alternativtextes würde in den oberen Fällen nur irritieren und die Nutzern von Screenreadern ablenken.

Gleiches gilt für Grafiken, die lediglich eine bestimmte visuelle Formatierung erzwingen sollen. Hier sollten Sie sich allerdings fragen, ob die Nutzung von Grafiken, um z.B. bestimmte Abstände im Text zu erzwingen, wirklich notwendig ist. Im Allgemeinen wird diese Technik als überholt angesehen. Häufig ist die Nutzung von Abstandsangaben mittels Cascading Style Sheet (CSS) wesentlich eleganter und sinnvoller.

Um die assistiven Technologien dazu zu bringen, Bilder zu ignorieren, haben Sie zwei Möglichkeiten:

  • Sie können Dekografiken über CSS als Hintergrundgrafik definieren. Die Grafik selbst ist dann nicht Teil des HTML-Codes und würde von Screenreadern ignoriert werden.
  • Falls Sie das img-Element nutzen um eine Dekografik einzufügen, müssen Sie das zugehörige alt-Attribut leer lassen. Wichtig dabei ist, dass das alt-Attribut nicht weggelassen wird, sondern nur leer gelassen wird. Das alt-Attribut ist ein Pflicht-Attribut und muss vorhanden sein. Würde es weggelassen werden, würde in vielen Screenreadern der Dateiname der Grafik als Ersatz für das fehlende alt-Attribut vorgelesen werden, was sehr störend wäre.

    <img src="deko.png" alt="">

Vorsicht: Häufig werden auch Illustrationen als dekorative Grafiken eingestuft. Dies ist im Allgemeinen nicht richtig, weil Illustrationen erläuternde Informationen enthalten. Sie zeigen zumindest das Aussehen eines Gegenstandes oder einer Person. Zwar macht es keinen Sinn, ein Porträt-Foto einer Politikerin auf einer Fraktionswebseite ausführlich zu beschreiben. Aber das Vorhandensein des Porträt-Fotos ist für nicht-sehende Menschen wichtig, denn sie sind eventuell in der Diskussion mit sehenden Menschen darauf angewiesen zu wissen, dass dieses Foto auf der Webseite existiert.

Bilder zur Schaffung einer visueller Erfahrung

Manchmal kommt es vor, dass ein Bild eine bestimmte visuelle Erfahrung beim Betrachtenden hervorrufen soll. Diese Erfahrung ist eher individuell und kann oft nur schwer und nie vollkommen in Worte gefasst werden. Gemälde würden zum Beispiel in diese Kategorie fallen.

Da die visuelle Erfahrung sehr subjektiv ist und es keinen Sinn macht, zu versuchen diese Erfahrung in gleichwertige Worte zu fassen, muss hier eine Beschreibung des Sichtbaren genügen. Diese Beschreibung sollte dann als Alternativtext angegeben werden. Ob ausschließlich eine Technik für eine Kurzbeschreibung verwendet wird oder ob zusätzlich auch eine Langbeschreibung angegeben wird, sollte sich aus der notwendigen Länge der Beschreibung ergeben.

Sonderfälle

In einigen Fällen müssen Sie allerdings von den oben genannten Verfahren abweichen. Diese Ausnahmen stellen zum Beispiel Formularelemente, Schaltknöpfe sowie grafische Links da. In diesen Fällen sind die Linkziele beziehungsweise die Aktion, die ein Klick auslöst, wichtiger als die eigentlichen Abbildungen. Andere Sonderfälle sind Grafiken in Sicherheitsabfragen (sogenannte Captchas), die einen automatisierten Zugriff auf Webseitenbereiche verhindern sollen. Im folgenden werden einige Ausnahmen beschrieben und Lösungen für diese Sonderfälle dargestellt.

  • Wenn Sie eine Grafik in irgendeiner Form als Steuerelement verwenden, ist nicht das Bild selbst, sondern das Linkziel oder die auszulösende Aktion im Alternativtext zu beschreiben. Ein Steuerelement könnte zum Beispiel ein grafischer "Absende"-Knopf eines Formulars sein, eine Imagemap oder einfach nur ein grafischer Link.

    • Wenn Sie ein Bild als Link verwenden, müssen Sie das Linkziel, wie im folgenden Quellcode, im alt-Attribut eindeutig bezeichnen.

      <a href="kontakt.html">
         <img src="brief.png" alt="zum Kontaktformular">
      </a>

      Schaltknöpfe, die mittels input-Element und einem Bild erzeugt werden, können ebenfalls, wie der nächste Quellcode-Ausschnitt zeigt, mit einem alt-Attribut versehen werden.

      <input type="image" src="send.gif" alt="Absenden">
    • Andere Formularelemente müssen grundsätzlich durch ein label-Element mit einer Beschriftung verknüpft werden. Der Text der Beschriftung soll den Zweck des Formularelements bezeichnen. Ist dies nicht möglich, erlaubt eine WCAG-2-Technik hier ausnahmsweise auch die Nutzung des title-Attributs. Der Inhalt des title-Attributs wird erst sichtbar, wenn eine Nutzerin oder ein Nutzer mit Maus auf dem Element steht.

    • Eine Imagemap ist eine Grafik, die mehrere aktive Regionen beinhaltet. Jede dieser Regionen wird durch ein area-Element definiert und kann wie ein Link angeklickt werden. Bei einer Imagemap sollte das Linkziel jeder aktiven Region im alt-Attribut des <area>-Tags angegeben werden. Vergessen Sie nicht, dass die Gesamtgrafik ebenfalls einen Alternativtext benötigt.

  • Bei Schriftgrafiken handelt es sich um Bilder die dazu dienen, Texte in einer bestimmten festgelegten Form darzustellen. Dabei kann es sich zum Beispiel um ein Logo (Bild-/Schriftmarke) oder um ein Foto eines Schildes handeln. Um hier eine gleichwertige Textalternative zu schaffen, müssen Sie denselben Text, der in der Grafik angezeigt wird, auch als Alternativtext im alt-Attribut zur Verfügung stellen.

    Beachten Sie bitte, dass für die Verwendung von Schriftgrafiken weitere Anforderungen bzw. Einschränkungen bestehen, so dass eine Schriftgrafik nur in sehr eingeschränkten Fällen verwendet werden darf. Lesen Sie bitte dazu den Abschnitt 2.2.1 Trennung von Vorder- und Hintergrund und die dazugehörigen BITV-Bedingungen 1.4.5 Schriftgrafiken und 1.4.9 Schriftgrafiken.

  • In seltenen Fällen kommt es vor, dass Bilder einem Test dienen sollen. Hier kann ein Alternativtext unter Umständen die Lösung des Tests vorwegnehmen. Ein bekanntes Beispiel ist der Test zur Farbfehlsichtigkeit, bei dem eine Zahl genannt werden soll, die auf einem Bild nur von Menschen erkannt wird, die nicht farbfehlsichtig sind. Würde die Lösungszahl als Alternativtext verwendet werden, würde dies den Test unterlaufen. Der Alternativtext kann hier also nur beschreibend sein und das Bild für Screenreader-Nutzende identifizierbar machen.

  • CAPTCHA-Grafiken werden häufig genutzt, um Menschen von Maschinen zu unterscheiden. Ziel ist es, die Maschinen wie zum Beispiel einen Crawler oder einen Spider von bestimmten Webangeboten auszuschließen. Häufig werden dazu Grafiken verwendet, die einen Text so entstellen, dass Menschen diesen Text noch soeben entziffern können, Texterkennungssysteme aber an dieser Aufgabe möglichst scheitern. In diesem Fall würde ein Alternativtext, der den zu entziffernden Text wiedergibt und maschinenlesbar ist, den Versuch eine Maschine auszuschließen zunichte machen. Der Alternativtext kann also auch hier nur auf den Zweck der CAPTCHA-Grafik hinweisen. Für die Verwendung von CAPTCHAs gelten weitere Einschränkungen, lesen Sie hierzu auch 3.5 CAPTCHAs und Barrierefreiheit.

  • Bei Bildern und Grafiken muss es sich im Sinne dieser BITV-Bedingung nicht notwendigerweise um Pixel-Grafiken handeln. Es gibt durchaus die Möglichkeit grafische Elemente mit dem normalen Zeichensatz zu erzeugen. Das bekannteste Beispiel sind die sogenannten Emoticons oder Smilies, andere Beispiele sind ASCII-Art oder Leetspeak. In all diesen Fällen sollte zunächst untersucht werden, ob es tatsächlich nötig ist, diese "Grafiken" zu verwenden. Falls es unumgänglich ist, sollten auch hier vorlesbare Alternativen oder geeignete Textalternativen angeboten werden.

Häufige Fehler

Vermeiden Sie folgende Fehler, die häufig auf Webseiten zu finden sind.

  • Das title-Attribute wird häufig anstelle des alt-Attributs verwendet. Das title-Attribut ist kein Ersatz für das alt-Attribut.
  • Vermeiden Sie überflüssige Informationen im Alternativtext wie zum Beispiel: "auf der Grafik sehen Sie ...", oder: "wenn Sie hier klicken kommen Sie zum Impressum", das "bläht" eine Screenreader-Ausgabe unnötig auf.
  • Bei Dekografiken dürfen Sie das alt-Attribut nicht einfach weggelassen. Sie müssen das Attribut verwenden, aber Sie müssen es dabei leer lassen.
  • Verwenden Sie keine Standard-Alternativtexte, wie "Bild" oder einen generischen Text wie den Dateinamen.
  • Missbrauchen Sie nicht das alt-Attribut, um Quellenangaben oder einen Quellennachweis unterzubringen.
  • Vermeiden Sie Alternativtexte bei reinen Deko-Grafiken, wie zum Beispiel "Platzhalter" oder ähnlich.

Ausblick

Einige Techniken neuer Web-Technologien wurden bisher noch nicht als ausreichende Technik in den WCAG-Dokumenten dokumentiert. Es ist aber anzunehmen, dass einige dieser Neuerungen zukünftig ebenfalls in die entsprechenden Dokumente aufgenommen werden.

WAI-ARIA-Technik: aria-describedby

Eine neue Möglichkeit eine Grafik mit einer Langbeschreibung zu verknüpfen, ist die Verwendung des WAI-ARIA-Attributs "aria-describedby". Mit diesem Attribut kann von einer Grafik auf eine Id verwiesen werden. Das HTML-Element mit dieser Id muss dann die Langbeschreibung der Grafik beinhalten.

Beispiel:

<img src="diagramm.png" 
     alt="Balkendiagramm zur Wahlbeteiligung bei Bundestagswahlen" 
     aria-describedby="desc">
<p id="desc">Das Diagramm zeigt deutlich die fallende ... </p> 

HTML5-Technik: figure-Element und figcaption-Element

Auch in der Spezifikation von HTML5 existiert eine Möglichkeit Grafiken und Texte miteinander zu verbinden. Mit dem <figure>-tag kann die Grafik samt Beschriftung umschlossen werden. Die Beschriftung selbst muss mittels <figcaption> gekennzeichnet werden.

<figure>
  <img src="/diagramm.png" 
       alt="Balkendiagramm zur Wahlbeteiligung bei Bundestagswahlen">
  <figcaption>
    Das Diagramm zeigt deutlich die fallende ... 
  </figcaption>
</figure>

Beispiele

Informatives Bild mit Kurzbeschreibung

Auf einer Webseite für Kinder über die Haustiere der Menschen, ist für das Fotos eines Hundes ein kurzer Alternativtext ausreichend:

Beispiel-Screenshot: Foto mit Kurzbeschreibung Beispiel-Screenshot: Foto mit Kurzbeschreibung

<img src="Kurzhaardackel.jpg" 
     alt="Ein Hund">

Informatives Bild mit Langbeschreibung im Textbereich

Das obige Bild könnte auch Teil einer Erklärung der gewünschten Zuchtmerkmale auf der Webseite eines Teckel-Vereins sein. Hier ist eine Langbeschreibung als Alternativtext nötig. Im Beispiel wurde die Beschreibung unterhalb des Bildes gesetzt, der Inhalt des alt-Attributs verweist auf die Beschreibung.

Beispiel-Screenshot: Foto mit Kurzbeschreibung und Langbeschreibung im Textbereich Beispiel-Screenshot: Foto mit Kurzbeschreibung und Langbeschreibung im Textbereich

<img src="Kurzhaardackel.jpg" 
     alt="Fotos eines Kurzhaardackels, 
          Beschreibung der Merkmale folgt im Text">
<p>
 Allgemeines Erscheinungsbild: Niedrige, kurzläufige, langgestreckte, 
 aber kompakte Gestalt, sehr muskulös, mit keck herausfordernder ... 
</p>

Informative Grafik mit Langbeschreibung im longdesc-Attribut

Bei komplexen Grafiken kann die Langbeschreibung auch in einer separaten Datei abgelegt werden und durch das longdesc-Attribut verknüpft werden.

Beispiel-Screenshot: Balkendiagramm Wahlbeteiligung bei Bundestagswahlen Beispiel-Screenshot: Balkendiagramm Wahlbeteiligung bei Bundestagswahlen

<img src="wahlbeteiligung.png" 
     alt="Balkendiagramm: Wahlbeteiligung bei Bundestagswahlen"
     longdesc="beschreibung_wahlbeteiligung.txt">

Die Textdatei "beschreibung_wahlbeteiligung.txt" könnte dann etwa so aussehen:

Die Entwicklung der Wahlbeteiligung in Deutschland bei 
Bundestagswahlen von 1949 bis 2009. 1949 lag die 
Wahlbeteiligung nur bei 78,5 %. Bis 1969 lag die Beteiligung 
immer im Bereich von 86 bis 88 %, 1972 gab es einen Sprung 
auf 91,1 %. In den Folgejahren sank die Beteiligung, bis Sie 
1990 einen Tiefststand von 77,8 % erreichte. Nach einem 
kurzen Anstieg ende der 90er, sank die Beteiligung wieder 
auf einen historischen Tiefststand von 70,8% in der letzten 
Wahl 2009.

Dekoratives Bild, definiert in der CSS-Datei

Im folgenden Beispiel wurden die Überschriften ausschließlich zur Dekoration mit einer Grafik versehen. Um assistive Technologien dazu zu bringen, die Grafik zu ignorieren, wurde die Grafik in der CSS-Datei als Hintergrundgrafik definiert.

Beispiel-Screenshot: Webseite mit Dekografiken für Überschriften Beispiel-Screenshot: Webseite mit Dekografiken für Überschriften

Der HTML-Code für dieses Beispiel besteht lediglich aus den semantischen HTML-Tags für Überschriften und Textabschnitte.

<h2>Urteile der Woche:</h2>
<p>
   Jede Woche werden im Gerichtssaal wichtige und 
   interessante Urteile gesprochen. Wir präsentieren...
</p>
<h3>Name eines Internetautors ist nicht offenzulegen</h3>
<p class="datum">11.06.2011</p>
<p>
   Wenn sich der Kläger beleidigt oder verleumdet...
</p> 

Erst in der CSS-Datei wird für jede Überschriften-Ebene eine Hintergrundgrafik definiert.

h2 {
    padding-left:52px; 
    background:#fff url(gericht.gif) no-repeat 0 0
}
h3 {
    padding-left:52px; 
    background:#fff url(marker.gif) no-repeat 0 0
}

Dekoratives Bild mit leerem alt-Attribut

Für das Beispiel oben hätten auch img-Elemente verwendet werden können. Um die Grafiken dann aber von Screenreadern ignorieren zu lassen, wären leere Alternativtexte nötig.

<h2>
    <img src="gericht.gif" alt="">
    Urteile der Woche:
</h2>

und

<h3>
    <img src="marker.gif" alt="">
    Name eines Internetautors ist nicht offenzulegen
</h3>

Bild zur Schaffung einer visueller Erfahrung

Soll das Bild eine bestimmte visuelle Sinneserfahrung erzeugen, die nur schwer in Worte zu fassen ist, zum Beispiel bei der Darstellung eines Gemäldes, ist eine deskriptive Beschreibung ein ausreichender Alternativtext.

Beispiel-Screenshot: Webseite Gemälde Beispiel-Screenshot: Webseite Gemälde

Im obigen Beispiel würde es demnach ausreichen, im alt-Attribut das Gemälde zu benennen und weitere beschreibende Informationen gegebenenfalls in einer Langbeschreibungen anzugeben. Da die Beschreibung hier etwas länger gefasst ist, wurde eine Technik für Langbeschreibungen verwendet und im alt-Attribut auf den Text unterhalb des Bildes verwiesen.

<img 
   src="ShadeAndDarkness.jpg" 
   alt="Gemälde: Schatten und Dunkelheit 
        (weitere Informationen folgen im Text)"
/>

Bild als Link

Wird ein Bild verwendet, um einen Link zu einer anderen Webseite darzustellen, ist es nötig, dass der Alternativtext nicht das Bild sondern das Linkziel beschreibt.

Beispiel-Screenshot:  Bild als Link Beispiel-Screenshot: Bild als Link

<a href="http://www.mozilla.com/de/firefox/">
   <img src="firefox.png" alt="Mozilla Firefox herunterladen">
</a>

Der Alternativtext kann auch als sichtbarer Text innerhalb des Link-Kontexts gesetzt werden. Das alt-Attribut sollte dann aber vorhanden sein und leer bleiben um redundante Informationen zu vermeiden.

Beispiel-Screenshot:  Bild und Text als Link Beispiel-Screenshot: Bild und Text als Link

<a href="http://www.mozilla.com/de/firefox/">
   <img src="firefox.png" alt="" />
   Mozilla Firefox
</a>    

Bild als Schaltfläche

Wird ein Bild als Schaltfläche verwendet, muss der Alternativtext die Aktion beschreiben, die durch das Auswählen der Schaltfläche gestartet wird.

Beispiel-Screenshot:  Bild als Schaltfläche Beispiel-Screenshot: Bild als Schaltfläche

<input type="image" src="find.png" 
       alt="Finden" value="Finden" name="submit">

Bild als Imagemap

Wird ein Bild als Imagemap verwendet, muss für das Gesamtbild, sowie jeweils für jeden der einzelnen aktiven Bereiche der Imagemap, ein geeigneter Alternativtext vergeben werden. Der Alternativtext des Gesamtbildes soll dabei das Bild und dessen Zweck beschreiben, wobei alle Techniken mit Kurz- und/oder Langbeschreibung erlaubt sind. Die Alternativtexte der einzelnen aktiven Bereiche werden in den alt-Attributen der area-Elemente festgelegt und sollen das Linkziel oder die Aktion des Bereiches beschreiben.

Beispiel-Screenshot: Bild als Imagemap Beispiel-Screenshot: Bild als Imagemap

<img src="bundeslaender.png" usemap="#laender" 
     alt="Deutschlandkarte mit den Bundesländern. Wählen Sie 
          ein Länderwappen für weitere Informationen.">
<map id="laender" name="laender">
   <area shape="rect" coords="250,50,300,100" 
         alt="Schleswig-Holstein" href="sh.html">
   <area shape="rect" coords="400,75,475,150" 
         alt="Mecklenburg-Vorpommern" href="mv.html">
   ...
   <area shape="rect" coords="350,525,400,575" 
         alt="Bayern" href="ba.html">
</map>

Bilder von Text, Schriftgrafiken

Ist es erforderlich ein Bild von einem Text zu verwenden, gilt für den Alternativtext ebenfalls der Grundsatz, dass derselbe Zweck wie das Originalbild erfüllt werden muss. Für die Verwendung von Bildern von Text, sogenannten Schriftgrafiken, gelten nach den Bedingungen 1.4.5 und 1.4.9 weitere Einschränkungen. Im Wesentlichen sollte die Verwendung "unentbehrlich" sein, was bedeutet, dass es keine sinnvolle Möglichkeit gibt, die Schriftgrafik zu vermeiden.

Ist der Text einer Schriftgrafik Teil eines Logos oder einer Wortbildmarke, gilt die Verwendung der Schriftgrafik als unvermeidlich. Der Alternativtext sollte dann den Text der Schriftgrafik wiedergeben.

Beispiel-Screenshot: Bild von Schrift als Teil eines Logos Beispiel-Screenshot: Bild von Schrift als Teil eines Logos

<p>
   Dieses Projekt wurde gefördert vom
   <img src="bmas_logo.png" 
        alt="Bundesministerium für Arbeit und Soziales">
</p>

Als unvermeidlich gilt eine Schriftgrafik auch, wenn gerade das Aussehen der Schrift durch die Grafik demonstriert werden soll. Der Textinhalt ist in diesem Fall für die Abbildung der Schrift irrelevant, für den Alternativtext sollte hier dasselbe gelten, der Alternativtext sollte folglich eher das Schriftbild beschreiben.

Beispiel-Screenshot: Bild von Schrift zur Demonstration der Schrift Beispiel-Screenshot: Bild von Schrift zur Demonstration der Schrift

<h3>Cardo</h3>
   <img src="cardo.png" 
        alt="Schriftbeispiel Cardo, Beschreibung folgt im Text">
   <blockquote cite="http://praegnanz.de/essays/cardo"><p>
      "Die Cardo ist ausgeglichen, prägnant und zeitlos. Ihr Grauwert 
      besitzt Lebendigkeit und weist schicke Akzente auf, ohne dabei 
      zu unruhig zu werden ..." (Gerrit van Aaken)
   </p></blockquote>

Bilder die einem Test dienen

Das folgende Beispiel zeigt eine typische Ishihara-Farbtafel zur Aufdeckung einer Rot-Grün-Sehschwäche. Ein Onlinetest in dem der Alternativtext zu dieser Grafik die Lösung preisgeben würde, wäre nicht sinnvoll. Hier sollte der Alternativtext also lediglich den Zweck dieser Farbtafel beschreiben.

Beispiel-Screenshot: Bild als Test Beispiel-Screenshot: Bild als Test

CAPTCHAs

Die folgende Grafik ist Teil eines Captcha-Verfahrens um "Maschinen" von der Nutzung bestimmter Bereiche des Webauftritts auszuschließen. Der Alternativtext zur Captcha-Grafik kann hier nur den Zweck der Grafik erläutern und gegebenenfalls auf alternative Zugangswege hinweisen. Ein Alternativtext nach den Regeln für Schriftgrafiken würde den Versuch Roboter auszuschließen boykottieren und die Lösung maschinenlesbar machen.

Beachten Sie bitte, dass bei der Verwendung von Captchas noch weitere BITV-Bedingungen zu beachten sind, einzig ein korrekter Alternativtext ist dazu nicht ausreichend. Lesen Sie dazu auch den Abschnitt Captchas und Barrierefreiheit

Die folgende Abbildung zeigt ein typisches Captcha, wie es von der Firma Yahoo eingesetzt wurde.

Beispiel-Screenshot: Ein Captcha, dass die Minimal-Anforderungen der BITV erfüllt. Beispiel-Screenshot: Bild als Captcha-Grafik

BITV 1.0 zu BITV 2.0

Die BITV 2.0 beschreibt im Gegensatz zur BITV von 2002 präziser, was eine Text-Alternative in welchen Fällen leisten muss.

In der Praxis hat dies bei der Bewertung von Textalternativen für Bilder und Grafiken aber nicht viel verändert. Eine Webseite, deren Alternativtexte gemäß der BITV von 2002 korrekt waren, wird in aller Regel auch nach der BITV 2.0 korrekt sein. Testverfahren wie der BITV-Kurztest interpretierten die BITV in diesem Punkt schon immer im Sinne der Kriterien zur WCAG 2.0. Webseiten die mit diesem Verfahren getestet wurden und die Test-Kriterien erfüllten, sollten somit auch die BITV 2.0 erfüllen.

Für Textalternativen von Video-Inhalten, Audio-Inhalten und Animationen wurden in der BITV 2.0 getrennte Anforderungen geschaffen, so dass die gleichwertigen Alternativen zu den Media-Inhalten, nicht mehr Teil der "Textalternativen für Nicht-Text-Elemente" sind.

© Bundesministerium für Arbeit und Soziales