Navigation und Service

Einfach teilhaben (Link zur Startseite)


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>

© Bundesministerium für Arbeit und Soziales, 2016