| Version | bis 10.07.2017 | Aktuell |
|---|---|
| BITV-Bedingung | 1.1.1 Nicht-Text-Inhalte |
| WCAG-Erfolgskriterium | 1.1.1 Nicht-Text-Inhalte |
| Bewertungsalternativen | ja / eher erfüllt / teilweise erfüllt / eher nicht erfüllt / nein / nicht anwendbar |
| Gewichtung | hohes Gewicht (3 Punkte) |
| Bezieht sich auf | einzelne Webseite |
| Prüfschritt erfüllt | Informative Grafiken und Bilder haben sinnvolle Textalternativen. Objekte wie Video- und Audio-Dateien sowie Applets haben zumindest kurze beschreibende Textalternativen. |
| Prüfschritt nicht anwendbar | Informative Grafiken und Bilder sowie Multimedia-Objekte (Video- und Audio-Dateien, Applets) sind nicht vorhanden. |
Informative Grafiken und Bilder müssen mit Alternativtexten versehen werden. 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 Texte, die per CSS durch Hintergrundbilder ersetzt werden sowie Textalternativen für Icon Fonts und SVGs.
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 anzeigt 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.
Der Prüfschritt ist anwendbar, wenn informative Grafiken oder, Bilder, Video- oder Audio-Dateien oder Multimedia-Objekte vorhanden sind.
Als informative Grafiken gelten
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.
alt-Attribut vorhanden ist und der dort hinterlegte Alternativtext das Bild in angemessener Weise ersetzt (siehe 2.4).Prüfen, ob die Seite Objekte enthält. Dazu kann folgende Methode genutzt werden: In der Web Accessibility Toolbar CSS > Disable CSS wählen und unter IE die Option Toggle Image deaktivieren. Werden jetzt noch Elemente angezeigt, bei denen es sich offensichtlich nicht um einfachen Text handelt?
In der Web Accessibility Toolbar unter IE die Option Toggle ActiveX deaktivieren. Prüfen, ob eine Alternative angezeigt wird, die das Objekt in angemessener Weise ersetzt (siehe 2.4).
Falls es sich bei der Alternative für das Objekt um ein img-Element handelt: Im Menü die Option Ansicht > Bilder > Keine Bilder anzeigen wählen und den Alternativtext wie unter 2.4 beschrieben prüfen.
(entspricht dem Abschnitt 2.3 des Verfahrens von Prüfschritt 1.1.1a)
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), dann gilt dieser Text als Textalternative für die Hintergrundgrafik. Voraussetzung ist allerdings, dass ein geeignetes Verfahren verwendet wurde (nicht display:none).
alt-Attribut zu werten.display:none verwendet wird, ist dies wie ein fehlendes alt-Attribut zu werten.Beim Einsatz vonIcon 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), so 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").
content für die Pseudoelemente :before oder :after Inhalt (Font Icons) eingebunden wird.aria-hidden="true").display:none verwendet wird, ist dies wie ein nicht vorhandenes oder leeres alt-Attribut zu werten.title-Attribut oder aria-label bereitgestellt wird.content: "k"), prüfen, ob das Icon mit einer geeigneten Technik für Screenreader versteckt wird (z.B. aria-hidden="true").title-Element (bei längeren Beschreibungen ein des-Element) vorhanden ist und die dort hinterlegte Textalternative das Bild in angemessener Weise ersetzt (siehe 2.6). Das title- bzw. desc-Element sollte das erste Kindelement des Elternelements sein.aria-labelledby auf das title-Element verwiesen wird.title- oder desc-Element eingesetzt wird, prüfen, ob über aria-label eine Textalternative bereitgestellt wird.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:
alt-Attribut.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).
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
Zum Kontext einer Grafik oder eines Bildes gehört:
longdesc).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.
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 4.1.2a).
Siehe Prüfschritt 1.1.1a "Alternativtexte für Bedienelemente"
alt-Attributen werden in Prüfschritt 1.1.1c "Leere alt-Attribute für Layoutgrafiken" geprüftalt attributes on img elementslongdescnoembed with embedobject elementaria-label to provide labels for objectsaria-labelledby to provide a text alternative for non-text contentalt attribute on img elements, area elements, and input elements of type 'image'Um von Nutzen zu sein, muss der Text dieselbe Funktion bzw. denselben Zweck erfüllen wie das Bild. Nehmen Sie zum Beispiel ein Foto der Erde, aufgenommen aus dem Weltraum. Wenn der Zweck des Bildes vorrangig in der Ausschmückung besteht, mag der Text "Foto der Erde vom Weltraum aus gesehen" die benötigte Funktion erfüllen. Wenn der Zweck des Fotos darin besteht, bestimmte Informationen über Geographie zu illustrieren, sollte das Text-Äquivalent diese Information enthalten. Wenn das Foto dem Benutzer sagen soll, dass er das Bild auswählen soll, um Informationen über die Erde zu erhalten (etwa indem er es anklickt), wäre der äquivalente Text "Informationen über die Erde". D.h. wenn der Text für einen Benutzer mit einer Behinderung dieselbe Funktion oder denselben Zweck erfüllt wie das Bild für andere Benutzer, kann er als Text-Äquivalent angesehen werden.
Quelle: http://www.w3.org/Consortium/Offices/Germany/Trans/WAI/webinhalt.html
If possible, the short text alternative should completely convey the purpose and information. If it is not possible to do this in a short phrase or sentence, then the short text alternative should provide a brief overview of the information. A long text alternative would be used in addition to convey the full information.
Quelle: WCAG 2.0 Technik G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content
When non-text content contains words that are important to understanding the content, the alt text should include those words. If the text in the image is more than can fit in a short text alternative then it should be described in the short text alternative and a long text alternative should be provided as well with the complete text.
Quelle: WCAG 2.0 Technik G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content
To further ensure that users understand differences between list items indicated visually, content developers should provide a text label before or after the list item phrase.
CSS Techniques for WCAG 2.0, 6.3 Use style sheets to change list bullets, text label example
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 herübergebracht 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.
Auch für einen blinden Besucher kann das Aussehen des Logos interessant sein. Er unterhält sich ja mit Sehenden, 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 könnte also in einer separaten, ausführlicheren Beschreibung bereitgestellt werden.
Im BITV-Test wird eine solche ausführliche Beschreibung des Firmenlogos allerdings nicht gefordert.
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, 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.
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.
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.
Das ist in vielen Fällen sinnvoll und eine gute Alternative zur Nutzung des longdesc-Attributs. 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.
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.