Jetzt Test anfragen
Jetzt Test anfragen
zum vorherigen Prüfschritt

Prüfschritt 9.1.1.1b Alternativtexte für Grafiken und Objekte

zum nächsten Prüfschritt

Was wird geprüft?

Nicht verlinkte informationsorientierte Grafiken und Bilder müssen mit Alternativtexten versehen werden (verlinkte Grafiken werden in Prüfschritt 9.1.1.1a "Alternativtexte für Bedienelemente" geprüft). Die Alternativtexte ersetzen das Bild, sie sollen also (wenn möglich) dieselbe Aufgabe erfüllen wie das Bild.

Bei eingebundenen Multimedia-Objekten, Video- beziehungsweise Audio-Dateien oder Applets soll der Alternativtext zumindest eine beschreibende Identifizierung des Inhalts ermöglichen.

Thema dieses Prüfschritts sind auch Textalternativen für Hintergrundbilder, Icon Fonts und SVGs, sofern diese nicht verlinkt sind.

Warum wird das geprüft?

Für blinde Benutzer oder für Benutzer von einfachen Textbrowsern sind Grafiken und Bilder nicht zugänglich. Die Textalternative tritt dann an die Stelle der Grafik, sie soll die Grafik ersetzen.

Wenn Objekte (etwa Video-Dateien, Audio-Dateien oder Applets) nicht angezeigt werden können, sollen kurze beschreibende Alternativtexte dem Nutzer eine Identifikation der Inhalte ermöglichen.

Icon Fonts sind Schriftarten, die Symbole statt Buchstaben beinhalten. Sie werden per CSS eingebunden und werden entweder von assistiven Technologien nicht ausgegeben oder es wird ein Unicode-Äquivalent wiedergegeben, was die Bedeutung im Kontext nicht vermittelt.

Wie wird geprüft?

1. Anwendbarkeit des Prüfschritts

Der Prüfschritt ist anwendbar, wenn unverlinkte informative Grafiken oder Bilder, Video- oder Audio-Dateien, oder Multimedia-Objekte vorhanden sind.

Als informative Grafiken gelten:

  • grafische Schriften

  • Symbole

  • Abbildungen, die zeigen sollen, wie ein Objekt oder eine Person aussieht

  • Illustrationen, die eine Aussage vorstellen, verdeutlichen oder veranschaulichen sollen

Dekorative Grafiken und Bilder sind Grenzfälle. Sie stellen (im Unterschied zu Layoutgrafiken) etwas dar, der dargestellte Gegenstand hat auch meist einen Bezug zum Thema der Seite. Ihr Informationsgehalt und ihr Nutzen für das Verständnis der Seite ist aber nicht klar. Dekorative Grafiken können daher mit leerem alt-Attribut versehen werden, der Prüfschritt ist dann nicht anwendbar. Anders, wenn Alternativtexte vorhanden sind. Dann ist der Prüfschritt anwendbar, er ist zum Beispiel nicht erfüllt, wenn im alt-Attribut von dekorativen Grafiken Bilddateinamen eingetragen sind.

Logo-artige Elemente in denen Grafik und Schrift verbunden sind, sind fast nie als bloße Schmuckgrafik anzusehen und brauchen deshalb Alternativtext. Wenn sie verlinkt ist, ist das natürlich ohnehin so. Dies ermöglicht blinden und sehenden Nutzern, sich gemeinsam auf diese Elemente zu beziehen. Der Alternativtext muss aber nicht expliziter sein als das, was für den sehenden Nutzer erkenntlich ist.

Darüber hinaus ist der Prüfschritt anwendbar, wenn informative Audio-Elemente vorhanden sind.

2. Prüfung

2.1 Anzeige der Alternativtexte von Grafiken

In der Web Developer Toolbar das Menü Images > Display Alt Attributes aufrufen und prüfen, ob das alt-Attribut vorhanden ist und der dort hinterlegte Alternativtext das Bild in angemessener Weise ersetzt (siehe [2.6 Angemessene Alternativtexte]). Alternativ kann auch das Images bookmarklet eingesetzt werden.

2.2 Anzeige der Alternativtexte von Objekten

  1. Prüfen, ob die Seite Objekte enthält. Dazu kann folgende Methode genutzt werden: In der Web Developer Toolbar CSS > Disable All Styles und Images > Hide Images wählen. Werden jetzt noch Elemente angezeigt, bei denen es sich offensichtlich nicht um einfachen Text handelt?

  2. Im Quelltext prüfen, ob eine Alternative vorhanden ist, die das Objekt in angemessener Weise ersetzt (siehe [2.6 Angemessene Alternativtexte]).

  3. Falls es sich bei der Alternative für das Objekt um ein img-Element handelt: Den Alternativtext des Bildes wie unter [2.6 Angemessene Alternativtexte] beschrieben prüfen.

2.3 Textalternativen für Hintergrundgrafiken

(entspricht dem Abschnitt 2.3 des Verfahrens von Prüfschritt 9.1.1.1a "Alternativtexte für Bedienelemente")

Hintergrundgrafiken haben kein alt-Attribut, auf diese Weise kann also keine Textalternative hinterlegt werden.

Falls eine Hintergrundgrafik aber einen im HTML-Dokument tatsächlich vorhandenen Text, zum Beispiel eine Überschrift ersetzt (CSS-Bildersetzungsverfahren), gilt dieser Text als Textalternative für die Hintergrundgrafik. Voraussetzung ist allerdings, dass ein geeignetes Verfahren verwendet wurde (nicht display:none).

Grundeinstellung in Firefox

  1. Firefox aufrufen und im Menü Extras > Einstellungen > Allgemein > Schriftarten & Farben wählen.

  2. Im Bereich "Text und Hintergrund" als Hintergrundfarbe eine Farbe wählen, die normalerweise eher selten für die Seitengestaltung verwendet wird (gut geeignet sind zum Beispiel helle Rosa- oder Grüntöne).

  3. Im Select Ausgewählte Farben anstatt Farben der Seite verwenden die Option Immer wählen.

  4. Die Dialogfenster mit "OK" schließen.

Prüfung

  1. Seite in Firefox aufrufen.

  2. Prüfen, ob informative Grafiken oder Bilder verschwinden. Das passiert, wenn sie als Hintergrundbilder eingebunden sind.

  3. Falls informative Grafiken oder Bilder als Hintergrundbilder eingebunden sind: Prüfen, ob das Hintergrundbild einen tatsächlich im HTML-Dokument vorhandenen Text ersetzt. Falls nicht, ist dies wie ein fehlendes alt-Attribut zu werten.

  4. Falls Texte durch Hintergrundbilder ersetzt werden: Prüfen, welches Verfahren für die Bildersetzung verwendet wurde. Wenn display:none verwendet wird, ist dies wie ein fehlendes alt-Attribut zu werten.

  5. Falls ein geeignetes Bildersetzungsverfahren verwendet wurde: Prüfen, ob der Text eine äquivalente Textalternative für das Hintergrundbild darstellt (siehe [2.6 Angemessene Alternativtexte]).

2.4 Textalternativen für Icon Fonts:

Beim Einsatz von Icon Fonts ist es nicht möglich, mittels alt-Attribut eine Textalternative zu hinterlegen.

Handelt es sich dabei um ein informationstragendes Icon ohne visuell sichtbaren Text (Stand-alone-Icon), sollte eine Textalternative vorhanden sein. Dies kann beispielsweise Text sein, der mit einem geeigneten Verfahren versteckt ist (nicht display:none) oder der über ein aria-label bereitgestellt wird. Es ist sinnvoll, das Icon selbst mit einer geeigneten Technik für Screenreader zu verstecken (z. B. aria-hidden="true").

Prüfung

  1. Seite in Firefox aufrufen.

  2. Mit den Web Developer Tools des Browsers prüfen, ob mit der CSS-Eigenschaft content für die Pseudoelemente :before oder :after Inhalt (Font Icons) eingebunden wird.

  3. Prüfen, ob das Icon mit einer geeigneten Technik für Screenreader versteckt wird (z. B. aria-hidden="true").

  4. Für informationstragende Icons prüfen, ob eine HTML-Textalternative vorhanden ist, die per CSS unsichtbar gemacht wird.

  5. Falls HTML-Textalternativen vorhanden sind, die nicht am Bildschirm sichtbar sind: Prüfen, welches Verfahren verwendet wurde, um diese zu verstecken. Wenn display:none verwendet wird, ist dies wie ein nicht vorhandenes oder leeres alt-Attribut zu werten.

  6. Falls eine geeignete CSS-Technik verwendet wurde: Prüfen, ob der Textlink eine äquivalente Textalternative für das Icon darstellt (siehe [2.6 Angemessene Alternativtexte]).

  7. Falls kein Alternativtext über zugänglich versteckten oder mitverlinkten Text vorhanden ist, prüfen, ob die Textalternative über ein title-Attribut oder aria-label bereitgestellt wird.

  8. Falls für diese Icons Text ausgegeben wird (z. B. content: "k"), prüfen, ob das Icon mit einer geeigneten Technik für Screenreader versteckt wird (z.B. aria-hidden="true").

2.5 Textalternativen für Inline SVGs

Prüfung

  1. Seite in Firefox aufrufen.

  2. Mit den Web Developer Tools des Browsers prüfen, ob es sich um eine direkt in HTML eingebundene SVG handelt (Inline SVG).

  3. Prüfen, ob ein title-Element (bei längeren Beschreibungen ein desc-Element) vorhanden ist und die dort hinterlegte Textalternative das Bild in angemessener Weise ersetzt (siehe [2.6 Angemessene Alternativtexte]). Das title- bzw. `desc-`Element sollte das erste Kindelement des Elternelements sein.

  4. Da SVG noch nicht ausreichend in allen Screenreader-Browser-Kombinationen unterstützt werden, prüfen, ob die Zugänglichkeit über WAI ARIA gewährleistet ist:

    • SVG-Grafiken sollten role="img" tragen, sonst wird ggf. ihr title-Element nicht ausgegeben.

    • Wird das SVG title-Element als zugänglicher Name genutzt, sollte das svg-Element mittels aria-labelledby auf das title-Element verweisen.

    • Wenn kein title- oder desc-Element eingesetzt wird, prüfen, ob über aria-label auf dem umschließenden Link eine Textalternative bereitgestellt wird.

Als Rolle für SVGs kommt auch role="graphics-document" für in sich gegliederte, komplexere SVG-Grafiken in Frage (das Ausmaß der Unterstützung durch Screenreader ist zur Zeit unklar).

2.6 Textalternativen für Videos

  1. Seite in Firefox aufrufen.

  2. Mit den Web Developer Tools des Browsers prüfen, ob das Video im HTML-Code über ein video-Element oder über ein iframe-Element eingebunden wurde.

  3. Bei Nutzung des Video-Elements kann die Textalternative mittels der ARIA Attribute aria-label oder aria-labelledby angegeben werden, falls auch das controls-Attribut vorhanden ist. Wird das Video innerhalb eines figure-Elements eingebunden, kann auch ein figcaption-Element genutzt werden.

  4. Bei einer Einbindung über iframe (z.B. von Youtube-Videos) erfolgt die Angabe einer Textalternative mittels title-Attribut.

2.7 Angemessene Alternativtexte

Entscheidend ist: Die Seite soll benutzbar sein, wenn Grafiken oder Bilder durch die entsprechenden Alternativtexte oder andere geeignete Textalternativen ersetzt sind.

In der Regel bedeutet das:

  • Bei Schriftgrafiken soll der Alternativtext den Text der Schriftgrafik wiederholen.

  • Bei Symbolen oder Zeichen (Logos) soll der Alternativtext sagen, dass ein Symbol, Zeichen oder Logo abgebildet ist und die Bedeutung des Symbols oder Zeichens wiedergeben.

  • Bei Gruppen von zusammengehörigen Bildern kann auch eines der Bilder die Bedeutung der Gruppe wiedergeben, die anderen haben ein leeres alt-Attribut.

  • Bei Fotos, Reproduktionen von Gemälden oder anderen Nicht-Text-Elementen, die eine spezifische Sinneserfahrung vermitteln, genügt in der Regel eine knappe Bezeichnung des abgebildeten Gegenstandes.

  • Bei Diagrammen oder technischen Zeichnungen sind unter Umständen ausführlichere Erläuterungen erforderlich. Alternativtexte sind dafür nicht geeignet; sie sollen möglichst 80 Zeichen nicht überschreiten. Im Alternativtext steht dann nur, was dargestellt ist und wo (etwa: "Details im anschließenden Text"), die Erläuterung steht in Kontext des Bildes.

  • Bei Objekten, die nicht angezeigt werden können, sollen der Alternativtext (ganz gleich ob Fallback-Text des Objekts oder skriptgeneriert) oder Text im unmittelbaren Kontext des Objekts (etwa eine vorangehende Überschrift oder nachfolgende Legende) eine kurze Beschreibung oder Identifizierung bieten und, falls vorhanden, auf eine Medienalternative verweisen. Zusätzlich ist es sinnvoll, dass ein Skript auswertet, ob das Objekt wegen deaktiviertem JavaScript und/oder deaktiviertem Plugin nicht angezeigt werden kann, und eine entsprechende Meldung generiert. Wenn solche Meldungen erzeugt werden, müssen sie den tatsächlichen Browser-Einstellungen entsprechen. Wenn also etwa das Flash-Plugin ausgeschaltet ist, aber JavaScript an, darf nicht die (irreführende) Meldung kommen, dass JavaScript aktiviert werden muss.

Generell gilt: Alternativtexte sollen kurz sein. Ausführliche Beschreibungen von Abbildungen sollen nicht im Alternativtext, sondern im Kontext der Abbildung zur Verfügung gestellt werden (siehe 2.5 Textalternativen für Inline SVGs).

2.6 Angemessenheit von Textalternativen im Kontext

Wenn der Alternativtext kein angemessener Ersatz für die Grafik oder das Bild sein kann, muss geprüft werden, ob die über das Bild vermittelte Information im Kontext als Text zur Verfügung steht.

Das betrifft zum Beispiel

  • Diagramme

  • technische Zeichnungen

  • Anfahrtspläne

  • Videos

Zum Kontext einer Grafik oder eines Bildes gehört:

  • der dazugehörige (vorangehende, folgende) Text sowie

  • eine im unmittelbaren Kontext des Bildes direkt oder verlinkt angebotene Textalternative, die den Inhalt textbasiert liefert: etwa als Fließtext, Liste oder Datentabelle.

Ein kurzer Alternativtext mit Bezeichnung des Bildes ist auch bei Nutzung von Textalternativen im Kontext erforderlich. Der Alternativtext sagt, dass an dieser Stelle etwas Bestimmtes abgebildet ist, er macht klar, worauf sich die Erläuterung im Kontext bezieht.

Zum Kontext eines Videos gehört:

  • der dazugehörige (vorangehende, folgende) Text oder die Überschrift

  • entsprechend beschriftete Schaltfläche, z.B. aria-label="Video [Titel des Videos] abspielen"

3. Hinweise

Um die Angemessenheit des Alternativtextes einschätzen zu können, muss der Alternativtext auf die Grafik beziehungsweise das Objekt bezogen werden, zu dem er gehört. Erforderlich ist also die parallele oder wechselnde Darstellung von Grafik/Objekt und zugehörigem Alternativtext.

Da SVG noch nicht ausreichend in allen Screenreader-Browser-Kombinationen unterstützt werden, sollte derzeit die Rolle über WAI-ARIA vermittelt werden (siehe Prüfschritt 9.4.1.2 Name, Rolle, Wert verfügbar).

Quellen

Anleitungen zm Erstellen von Alternativtexten

W3C - Scalable Vector Graphics (SVG) 1.1

SVGs zugänglich einbinden

Einordnung des Prüfschritts

Abgrenzung zu anderen Prüfschritten

  • Alternativtexte für verlinkte Grafiken (z. B. Bedienelemente oder Teaser-Bilder) werden in Prüfschritt 9.1.1.1a "Alternativtexte für Bedienelemente" geprüft.

  • Einfache Animationen oder Videos ohne synchronisierungsbedürftige Tonspur werden in Prüfschritt 9.1.2.1 "Alternativen für Audiodateien und stumme Videos" geprüft.

  • Layoutgrafiken oder dekorative Grafiken mit leeren alt-Attributen werden in Prüfschritt 9.1.1.1c "Leere alt-Attribute für Layoutgrafiken" geprüft.

  • CAPTCHAs werden in Prüfschritt 9.1.1.1d "Alternativen für CAPTCHAs" geprüft.

  • Die Ausgabe der entsprechenden Rolle von SVGs wird im Prüfschritt 9.4.1.2 "Name, Rolle, Wert verfügbar" geprüft (s. o. 3. Hinweise).

Einordnung des Prüfschritts nach WCAG 2.1

Guideline

Success criterion

Techniques

General Techniques
HTML Techniques
ARIA Techniques
Failures

Fragen zu diesem Prüfschritt

Was kann der Alternativtext leisten?

Zum Beispiel die Explosionszeichnung eines Motors: Sollte der gesamte Aufbau des Motors im Alternativtext beschrieben werden?

Die Explosionszeichnung zeigt die Lage verschiedener Teile im Motor. Alternative Vermittlungsformen sind denkbar und möglich. Zum Beispiel könnte die Lage der Teile an einem tastbaren Modell gezeigt werden. Klar ist aber, dass bei einigermaßen komplexen Gebilden die Textform nicht geeignet ist. Die Frage ist daher, was im Alternativtext sinnvoll vermittelt werden kann. Auf jeden Fall kann der Alternativtext darüber informieren, dass eine Explosionszeichnung des Motors dargestellt wird. Der blinde Benutzer weiß dann zumindest, welche Informationen ihm nicht zugänglich sind. Darüber hinaus kann es sein, dass nur ein bestimmtes Detail der gesamten Zeichnung relevant ist. Das geht aus dem Kontext hervor. Das betreffende Detail kann dann in Textform erläutert werden.

Für die Bewertung im BITV-Test gilt: wenn der Prüfer selbst nicht sagen kann, ob oder wie der Informationsgehalt des Bildes in Textform vermittelt werden könnte, muss die Bezeichnung des dargestellten Gegenstandes im Alternativtext als hinreichend bewertet werden.

Firmenlogos

Auf der Website ist das Firmenlogo abgebildet. Reicht es aus, wenn im Alternativtext steht, dass da das Firmenlogo abgebildet ist oder sollte es auch beschrieben werden?

Auch für einen blinden Besucher kann das Aussehen des Logos interessant sein. Er unterhält sich mit Sehenden und weiß dann, wovon die Rede ist. Allerdings sollte der Alternativtext kurz sein, der Besucher möchte nicht immer wieder diese Beschreibung hören, wenn er die Seite besucht. Sie kann also in einer separaten, ausführlichen Beschreibung bereitgestellt werden.

Im BITV-Test wird eine solche ausführliche Beschreibung des Firmenlogos allerdings nicht gefordert.

Abbildungen mit Text

Eine Abbildung enthält Text. Muss dieser Text in jedem Fall im Alternativtext bereitgestellt werden?

Nein, entscheidend ist die Funktion der Abbildung. Wenn es sich um eine Schriftgrafik handelt, dann ist die Sache meistens klar, die Abbildung ist für die Anzeige des Textes da.

Anders verhält es sich, wenn ein Motiv mit Text abgebildet ist. Dann muss (wie bei allen Bildern) überlegt werden, was die Leistung des Bildes ist, ob der abgebildete Text wesentlich ist. Nur dann muss der Text im Alternativtext beachtet werden.

Kann für längere Erläuterungen auch das title-Attribut verwendet werden?

Das title-Attribut hat eine andere Aufgabe, es soll nicht für das Bild stehen, sondern ergänzende Informationen zum Bild liefern. Zum Beispiel kann es verwendet werden, um die Quelle eines Bildes anzugeben. Die Verwendung des title-Attributs von Bildern ist leider nicht einheitlich geregelt.

Auf manchen Webauftritten wird der Inhalt des alt-Attributs durchgängig zusätzlich im title-Attribut wiederholt. Das ist keine gute Lösung, denn es führt dazu, daß blinde Nutzer die Ausgabe des title-Attributs abschalten, um das Vorlesen überflüssiger Informationen zu vermeiden.

Auf keinen Fall kann das title-Attribut als Ersatz für die Bereitstellung des Alternativtextes im alt-Attribut akzeptiert werden.

Für längere Erläuterungen ist das title-Attribut nicht vorgesehen und auch nicht gut geeignet. Es enthält nur einfachen Fließtext, Änderungen der Schriftgröße haben bei den meisten Browsern keine Auswirkungen auf die Darstellung des title-Attributs.

Rolle im Alternativtext

Soll im Alternativtext stehen, dass es sich um ein grafisches Element handelt?

Nein, das ist nicht erforderlich. Denn Screenreader stellen anhand des Markups fest, auf was für ein Element sich der Alternativtext bezieht. Im BITV-Test wird ein entsprechender Vorsatz im Alternativtext jedoch nicht negativ bewertet, er ist für die Bewertung nicht relevant.

Kann die Bedeutung eines Bildes auch im Kontext beschrieben werden?

Das ist in vielen Fällen sinnvoll, gerade weil nicht nur für sehbehinderte Menschen eine alternativen Beschreibung oft nützlich ist. Eine Möglichkeit ist die Positionierung der Alternative in einem gut beschrifteten Ausklappbereich unterhalb des Bildes. Wichtig ist, dass die Beschreibung dem Bild eindeutig zugeordnet werden kann. Dafür kann (und soll) dann der Alternativtext des Bildes genutzt werden. Er enthält eine kurze Bezeichnung des abgebildeten, im Kontext beschriebenen Gegenstandes und einen Hinweis auf die folgende ausführlichere Alternative.

Was sollte im Alternativtext für Landkarten stehen?

Der Alternativtext für Landkarten kann kein Äquivalent sein, eine Beschreibung in Textform kann die Karte nicht ersetzen. Nicht-visuelle Äquivalente könnten Routenbeschreibungen sein, wie sie häufig von Reiseplanern angeboten werden. Das geht aber über die Möglichkeiten des Alternativtextes hinaus. Der Alternativtext für Karten muss sich also darauf beschränken, anzugeben, welches Gebiet auf der Karte dargestellt ist.