Das Prüfverfahren zur BITV 1.0


Sie sind hier: BITV-Test > Verzeichnis der Prüfschritte > Prüfschritt 1.1.1 (1 von 52)


Diese Version des BITV-Tests ist nicht mehr gültig! zum aktuellen BITV-Test 2.0

Blättern: zum nächsten Prüfschritt zum letzten Prüfschritt

Prüfschritt 1.1.1
Alternativtexte für Bedienelemente

Diese Version des Prüfschritts ist nicht mehr gültig!

Technische Angaben

Version bis 08.02.2006 | bis 16.10.2009 | bis 22.9.2011
BITV-Bedingung 1.1
Bewertungsalternativen ja / eher erfüllt / eher nicht erfüllt / nein / nicht anwendbar
Gewichtung hohes Gewicht (3 Punkte)
Abwertung auf "schlecht zugänglich"
Bezieht sich auf einzelne Webseite
Prüfschritt erfüllt Grafische Bedienelemente haben sinnvolle Alternativtexte.
Prüfschritt nicht anwendbar Grafische Bedienelemente sind nicht vorhanden.

Was wird geprüft?

Grafische Bedienelemente müssen mit Alternativtexten versehen werden. Alternativtexte für verlinkte Grafiken (Menüs, Logos) oder Teaserbilder sollen das Ziel des Links bezeichnen. Alternativtexte für grafische Schaltflächen (Buttons) sollen die Aktion bezeichnen, die der Button auslöst.

Thema dieses Prüfschritts sind auch Textlinks, die per CSS durch Hintergrundbilder ersetzt werden.

Warum wird das geprüft?

Für blinde Benutzer oder für Benutzer von einfachen Textbrowsern sind Grafiken nicht zugänglich. Der Alternativtext (oder der via CSS durch ein Hintergrundbild ersetzte Text) tritt dann an die Stelle der Grafik, er soll sie ersetzen.

Wie wird geprüft?

1. Anwendbarkeit des Prüfschritts

Der Prüfschritt ist anwendbar, wenn Grafiken als Bedienelemente (Menüs, Logos, Teaserbilder oder Schaltflächen) eingesetzt werden.

2. Prüfung

2.1. Anzeige der Alternativtexte von Grafiken

  1. Die Seite im Internet Explorer aufrufen.
  2. Feststellen, ob grafische Bedienelemente vorhanden sind (zum Beispiel horizontale oder vertikale Navigationsleisten, Logo, Banner, Teaserbilder, grafische Schaltflächen).
  3. In der AIS Web Accessibility Toolbar die Funktionen Images > List Images > oder Images > Show Images Images > Show Images, Images, Toggle Images/Alt oder Images > Image List nutzen und prüfen, ob die Bedienelemente mit äquivalenten Alternativtexten versehen sind. (siehe 2.4)
  4. Mit der Funktion Images > Show Image Maps kann geprüft werden, ob die Seite Imagemaps enthält. Ist dies der Fall, weiter mit 2.2.

2.2. Anzeige von Imagemaps

Wenn auf der Seite Imagemaps für die Navigation eingesetzt werden, wird WAVE als zweites Prüftool eingesetzt (da die Anzeige der Alternativtexte für die einzelnen Links von Imagemaps durch die AIS Toolbar recht unübersichtlich ist).

  1. WAVE aufrufen und die Seite prüfen lassen. Mit der Funktion Images > Show Image Maps [new window] der Web Accessibility Toolbar prüfen, ob für jeden Link ("hotspot" / aktiver Bereich) und für die gesamte Imagemap ein gleichwertiger Alternativtext vorhanden ist (siehe 2.4).
  2. Mithilfe der WAVE-Zeichenerklärung wird die Imagemap aufgespürt. Dabei wird auch der Unterschied zwischen clientseitigen und serverseitigen Imagemaps erkannt.
  3. Bei einer clientseitigen Imagemap wird geprüft, ob für jeden Link ("hotspot" / aktiver Bereich) und für die gesamte Imagemap ein gleichwertiger Alternativtext vorhanden ist (siehe 2.4).

Der Alternativtext für die gesamte Imagemap sollte in der Regel die Imagemap beschreiben, die Alternativtexte für die aktiven Bereiche sollten die Linkziele bezeichnen.

2.3 Textalternativen für Hintergrundgrafiken

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 Textlink ersetzt (CSS-Bildersetzungsverfahren), dann gilt dieser Textlink als Textalternative für die Hintergrundgrafik. Voraussetzung ist allerdings, dass ein geeignetes Bildersetzungsverfahren verwendet wurde (nicht "display: none").

Grundeinstellung in Firefox
  1. Firefox aufrufen und im Menü Extras > Einstellungen > Allgemein > Schriftarten & Farben den Dialog Einstellungen... aufrufen. Den Reiter Inhalt wählen und im Bereich Schriftarten & Farben die Option Farben... wählen.
  2. Im Dialog Farben im Bereich Text und Hintergrund als Hintergrundfarbe eine Farbe wählen, die normalerweise eher selten für die Seitengestaltung verwendet wird (gut geeignet sind z.B. helle Rosa- oder Grüntöne).
  3. Die Dialogfenster mit "OK" schließen.
Prüfung
  1. Seite in Firefox aufrufen
  2. In der Web Developer Toolbar Disable > Disable Page Colors wählen.
  3. Prüfen, ob grafische Bedienelemente verschwinden. Das passiert, wenn sie als Hintergrundbilder eingebunden sind.
  4. Falls nicht redundante grafische Bedienelemente als Hintergrundbilder eingebunden sind: Prüfen, ob das Hintergrundbild einen tatsächlich im HTML-Dokument vorhandenen Textlink ersetzt.
    Wenn ein leeres a-Element ohne eingeschlossenen Text durch ein Hintergrundbild ersetzt wird, ist dies wie ein nicht vorhandenes oder leeres alt-Attribut zu werten.
  5. Falls Textlinks durch Hintergrundbilder ersetzt werden: Prüfen, welches Verfahren für die Bildersetzung verwendet wurde.
    Wenn "display: none" verwendet wird, ist dies wie ein nicht vorhandenes oder leeres alt-Attribut zu werten.
  6. Falls ein geeignetes Bildersetzungsverfahren verwendet wurde: Prüfen, ob der Textlink eine äquivalente Textalternative für das Hintergrundbild darstellt (siehe 2.4).

2.4 Gleichwertige (äquivalente) Alternativtexte:

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

In der Regel bedeutet das:

  • Bei Schriftgrafiken soll der Alternativtext den Text der Schriftgrafik wiederholen.
  • Bei Symbolen soll der Alternativtext das Symbol nicht beschreiben, sondern ersetzen. Also zum Beispiel Alternativtext "Kontakt" für einen Briefkasten, der als Symbol für die Kontakt-Seite verwendet wird.

Bei verlinkten Abbildungen gibt es folgende Möglichkeiten:

  • Beschreibung des abgebildeten Gegenstandes in den Alternativtext (wenn der abgebildete Gegenstand wichtig ist und daraus das Linkziel hervorgeht, zum Beispiel Logo)
  • Ziel des Links in den Alternativtext (nur wenn der abgebildete Gegenstand unwichtig ist, zum Beispiel Illustration)
  • Beschreibung des abgebildeten Gegenstandes und Ziel des Links in den Alternativtext (wenn beides wichtig ist)

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.

3. Hinweise

3.1. Alternativtexte für redundant verlinkte Abbildungen

Wenn eine Abbildung und ein danebenstehender Textlink auf das selbe Ziel verweisen, muss geprüft werden, ob Abbildung und Text in den selben Link eingeschlossen sind.

Wenn Abbildung und Text zu einem Link gehören, dann muss der Alternativtext der Abbildung nicht das Linkziel beschreiben. Je nach Inhalt der Abbildung kann das alt-Attribut dann leer bleiben oder den abgebildeten Inhalt beschreiben.

Wenn Abbildung und Text zwei unabhängige Links auf das selbe Ziel sind, dann kann das alt-Attribut dagegen nicht leer bleiben. Denn gängige Screenreader verlassen sich nicht darauf, daß leere alt-Attribute sachgerecht eingesetzt werden, sie behandeln bei Bedienelementen leere wie fehlende alt-Attribute und lesen den Dateinamen der Grafik / die URL der Zieldatei vor.

4. Bewertung

Nicht voll erfüllt:

  • Der Alternativtext fehlt beim Link zum Seitenanfang oder bei einem anderen für die Benutzung der Seite weniger wichtigen Bedienelement.
  • Alternativtexte sind missverständlich, undeutlich oder extrem lang.

Nicht erfüllt:

  • Der Alternativtext für ein wichtiges Bedienelement fehlt oder er ist unbrauchbar.

Einordnung des Prüfschritts

Formulierung BITV:

Für jedes Nicht-Text-Element ist ein äquivalenter Text bereitzustellen. Dies gilt insbesondere für: Bilder, graphisch dargestellten Text einschließlich Symbolen, Regionen von Imagemaps, Animationen (z. B. animierte GIFs), Applets und programmierte Objekte, Zeichnungen, die auf der Verwendung von Zeichen und Symbolen des ASCII-Codes basieren (ASCII-Zeichnungen), Frames, Scripts, Bilder, die als Punkte in Listen verwendet werden, Platzhalter-Graphiken, graphische Buttons, Töne (abgespielt mit oder ohne Einwirkung des Benutzers), Audio-Dateien, die für sich allein stehen, Tonspuren von Videos und Videos.

http://www.bik-online.info/info/gesetze/bitv/anlage_1.php#1-1

Deutsche Übersetzung der WCAG:

Stellen Sie ein Text-Äquivalent für jedes Nicht-Text-Element bereit (z. B. über "alt", "longdesc" oder im Inhalt des Elements). Dies umfasst: Bilder, grafisch dargestellten Text (einschließlich Symbole), Regionen von Imagemaps, Animationen (z. B. animierte GIFs), Applets und programmierte Objekte, ASCII-Zeichnungen, Frames, Scripts, Bilder, die als Punkte in Listen verwendet werden, Platzhalter-Grafiken, grafische Buttons, Töne (abgespielt mit oder ohne Einwirkung des Benutzers), Audio-Dateien, die für sich allein stehen, Tonspuren von Videos und Videos.

Zum Beispiel in HTML:

  • Verwenden Sie "alt" für die IMG-, INPUT- und APPLET-Elemente oder stellen Sie ein Text-Äquivalent im Inhalt des OBJECT- und APPLET-Elements bereit.
  • Stellen Sie für komplexen Inhalt, wo der "alt"-Text kein vollständiges Text-Äquivalent bietet, eine zusätzliche Beschreibung zur Verfügung, z. B. über "longdesc" bei IMG und FRAME, einen Link innerhalb eines OBJECT-Elements, oder einen Beschreibungs-Link.
  • Verwenden Sie bei Imagemaps entweder das "alt"-Attribut bei AREA oder das MAP-Element mit A-Elementen (und zusätzlichem Text) als Inhalt.

http://www.w3c.de/Trans/WAI/webinhalt.html#tech-text-equivalent

Abgrenzung zu anderen Prüfschritten

Verlinkte Grafiken sind stets in diesem Prüfschritt zu bewerten. Das gilt auch dann, wenn die Grafiken neben der Information über das Linkziel auch noch eine andere Information vermitteln sollen, wie zum Beispiel auf die Startseite verlinkte Logos.

Einzige Ausnahme: Grafik und danebenstehender Text sind ein zusammengehöriger Link. Der Alternativtext bezieht sich dann nur auf die Grafik, die Prüfschritte 1.1.2 oder 1.1.3 sind anzuwenden.

Linktexte sind auch in Prüfschritt 13.1.1 Thema. Dort geht es um die allgemeine Aussagekraft, in Prüfschritt 1.1.1 geht es dagegen nur um die Gleichwertigkeit von Alternativtext und grafischem Link.

  • Alternativtexte für grafische Überschriften: siehe Prüfschritt 1.1.2
  • Serverseitige Imagemaps: siehe Prüfschritt 1.2.1
  • Textäquivalent (title-Attribut) für Frames: siehe Prüfschritt 12.1.1
  • Bildersetzungsverfahren (zum Beispiel FIR): siehe auch Prüfschritt 2.2.1
  • CAPTCHAs werden in Prüfschritt 1.1.4 geprüft.

Einordnung des Prüfschritts nach WCAG 2.0

WCAG 2.0

Guideline

Success criterion

Techniques

General Techniques
HTML Techniques
Failures

Quellen

Allgemeine Quellen zur Verwendung von Alternativtexten

When a text equivalent is presented to the user, it fulfills essentially the same function (to the extent possible) as the original content.

Quelle: http://www.w3.org/TR/WCAG10-CORE-TECHS

Fragen zu diesem Prüfschritt

Der Alternativtext beschreibt die Grafik, der title-Text beschreibt das Link-Ziel: Ist das ein geeigneter Lösungsansatz für grafische Links?

Vorgeschlagen wurde diese Lösung für Fälle, in denen die Grafik nicht einfach das Linkziel abbildet (Schriftgrafik) oder für das Linkziel steht, sondern zusätzlich eine eigenständige Aussagekraft hat (zum Beispiel bei aus Anreißertext und einer verlinkten Abbildung bestehenden Teasern).

Die Idee ist einleuchtend:

Der sehende Benutzer klickt auf das Bild, denn er vermutet, dass hinter dem Bild eine Seite steht. Der beschreibende Alternativtext ersetzt das Bild, der blinde Benutzer schließt wie der sehende Benutzer vom (beschriebenen) Bildinhalt auf das Linkziel. Wenn aus dem Bild / der Bildbeschreibung nicht hinreichend klar hervorgeht, wo es hinführt, kann der sehende wie der blinde Benutzer auf die ergänzenden Informationen im title-Attribut zugreifen.

In der Praxis funktioniert das aber nicht:

Sehende Benutzer orientieren sich nicht an den Inhalten des Bildes, sondern eher an der Position. Viele Teaser-Bilder sind vom Inhalt her ohnehin nicht geeignet, etwas über das Linkziel zu sagen, der Bezug zum Thema des Linkziels ist oft nur ansatzweise nachvollziehbar. Aber sie müssen auch gar nichts über das Linkziel sagen: Das Linkziel steht im Text daneben, es muss nicht aus dem Bild erraten werden. Geklickt wird auf das Bild, weil es vielleicht leichter zu treffen ist und der Benutzer weiß, dass Teaserbilder üblicherweise mit weiterführenden Informationen zum jeweiligen Textabschnitt verlinkt sind.

Für den blinden Benutzer ist der Zusammenhang von Bild und (darauf folgendem) Kontext dagegen normalerweise nicht klar. Er müsste also tatsächlich Vermutungen anstellen, wo ein Link hinführen könnte, der mit dem beschriebenen Bild verbunden ist. Und da das Bild die entsprechende Aussagekraft nicht hat, wäre er auf die Informationen im title-Attribut in der Regel angewiesen. Sie sind also für ihn nicht ergänzend.

Hinzu kommt: Das title-Attribut wird von gängigen Screenreadern unterschiedlich behandelt und schlecht unterstützt. Nach wie vor werden von JAWS die Inhalte von alt-Attribut und title-Attribut nur alternativ vorgelesen.

Das title-Attribut ist für ergänzende Informationen vorgesehen. Die Information über das Linkziel ist in aller Regel keine ergänzende Information, denn sie geht aus dem Bildinhalt nicht hervor. Der Alternativtext muss daher das Linkziel beschreiben.

Sollte im alt-Attribut und im title-Attribut eines Bildes derselbe Inhalt stehen?

Der Alternativtext soll das Bild ersetzen. Sehr häufig bedeutet das: der Alternativtext sagt, was abgebildet ist.

Das title-Attribut ist dagegen für ergänzende Informationen zum Bild vorgesehen. Es kann zum Beispiel verwendet werden, um zu sagen, von welcher Quelle das Bild stammt. Dort stehen also Informationen, die man dem Bild nicht entnehmen kann.

Eigentlich also ein klarer Fall: Die Aufgaben der Attribute sind unterschiedlich, entsprechend sollten sie normalerweise nicht denselben Inhalt haben. Es gibt aber eine wichtige Ausnahme:

Häufig werden Symbole oder Zeichen als Bedienelemente verwendet. Die Bedeutung solcher Bilder kann undeutlich sein. Der Benutzer sieht nicht genau, was abgebildet ist oder er versteht nicht, wofür das Bild stehen soll. Für diesen Besucher ist eine ergänzende Beschriftung nützlich. Sie steht am besten als Text neben dem Bild, denn dann ist sie auch für Tastaturnutzer sichtbar. Aber auch das title-Attribut kann verwendet werden, denn die Beschriftung ist (für den sehenden Benutzer) ergänzend.

Das ist also ein Fall, in dem es Sinn machen kann, dass der Alternativtext und das title-Attribut dieselbe Information bereitstellen:

  • Für blinde Benutzer ersetzt der Alternativtext das Bild. Und zwar am besten, indem er die für blinde Benutzer unbrauchbare Bildform umgeht, also das Bild durch die Bezeichnung des Linkziels oder der auszulösenden Aktion ersetzt.
  • Für sehende Benutzer stellt das title-Attribut die Bedeutung des Bildes klar. Es bezeichnet das Ziel des Links oder die Aktion, die ausgelöst wird.

Alternativtext und title-Attribut liefern für unterschiedliche Benutzergruppen die selbe Information, für die einen als Ersatz und für die anderen als Ergänzung zum Bild. Mit dem unguten Begleiteffekt, dass der blinde Benutzer (je nach Hilfsmittel und Benutzereinstellung) unter Umständen zwei mal dasselbe hört.

Ideal ist diese Lösung sicher nicht, einerseits, weil die ergänzende Information im title-Attribut nicht für jeden zugänglich ist und andererseits, weil dieselbe Information zwei mal geliefert wird. Die zweifache Angabe von Linkzielen im Alternativtext und im title-Attribut wird aber im BITV-Test nicht negativ bewertet.

Screenreader zeigen den Dateinamen der Bilddatei an, wenn kein Alternativtext zur Verfügung steht. So kann das Fehlen des Alternativtextes kompensiert werden. Soll man das bei der Prüfung berücksichtigen?

Nein, die Dateinamen sollen bei der Prüfung nicht berücksichtigt werden. Denn dieser Zugangsweg ist nicht verlässlich. Nicht alle Browser oder Screenreader zeigen Dateinamen an, auch ist die Eignung des Dateinamens als Navigationshilfe eher zufällig.

Allgemein gesagt: Gute Nutzbarkeit mit speziellen Hilfsmitteln gewährleistet nicht ein positives Ergebnis des BITV-Tests. Der Webauftritt wird positiv bewertet, wenn er das Seine zur Sicherung der Zugänglichkeit beisteuert. Das Hilfsmittel ist dagegen gut, wenn es auch mit schlechten Webauftritten klar kommt. Es sorgt dafür, dass auch Webauftritte, die nicht barrierefrei sind, irgendwie genutzt werden können.

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

Nein, das ist nicht erforderlich. Denn Screenreader oder Textbrowser stellen den Bezug des Alternativtextes zum Link ohnehin her. Wenn im Alternativtext steht, dass es sich um ein Navigationselement handelt, liefert der Screenreader diese Information also zwei mal.

Im BITV-Test wird ein entsprechender Vorsatz im Alternativtext jedoch nicht negativ bewertet, er ist für die Bewertung nicht relevant.

Sollte der Alternativtext für grafische Bedienelemente auch sagen, was abgebildet ist?

Manchmal ergibt sich das von selbst, wie bei Schriftgrafiken: das Linkziel ist abgebildet, die Beschreibung des abgebildeten Gegenstandes sagt zugleich auch, wohin der Link führt.

Schwieriger ist es bei Symbolen. Dem visuell orientierten Besucher ist vielleicht klar, für welches Linkziel das abgebildete Symbol steht. Für einen blinden Besucher ist der Weg über das Symbol aber weniger vertraut, er ist auf jeden Fall umständlich.

In solchen Fällen, wenn die Abbildung nicht hinreichend klar über das Linkziel Auskunft gibt, sollte man sich fragen: Ist es wichtig, zu wissen, was da abgebildet ist, soll dem sehenden Besucher da etwas gezeigt werden? Oder hat die Abbildung eigentlich nur die Aufgabe, das Linkziel zu vermitteln?

Ein Beispiel für den ersten Fall: das Logo einer Website ist auf die Startseite verlinkt. Es dient also als Bedienelement, der Alternativtext muss das Ziel des Links angeben. Das Logo ist aber auch selbst wichtig, es soll dem Besucher gezeigt werden. Der Alternativtext muss also auch sagen, was abgebildet ist.

Ein Beispiel für den zweiten Fall: ein Briefumschlag verweist auf die Kontaktseite des Webangebotes. In diesem Fall kommt es nur (oder jedenfalls hauptsächlich) auf die Vermittlung des Linkziels an. Der Alternativtext muss also nicht sagen, was abgebildet ist, er kann sich auf die Angabe des Linkziels beschränken.

Für die Bewertung im BITV-Test gilt: Das Ziel des Links muss immer angegeben werden. Manchmal reicht dafür die Bezeichnung des abgebildeten Gegenstandes aus, andernfalls muss das Linkziel ausdrücklich angegeben werden. Zusätzliche Angaben zum abgebildeten Gegenstand sind nur erforderlich, wenn die Abbildung etwas zeigen soll, also einen weitergehenden Informationsgehalt hat.

Links oben ist das Firmenlogo abgebildet, es ist außerdem mit der Startseite verlinkt. Welcher Alternativtext ist angemessen?

Der Alternativtext in diesem Fall hat zwei Aufgaben: Er soll für das Logo stehen und er soll das Linkziel vertreten. Auf dieser Grundlage kann man verschieden argumentieren:

  1. Das Bild zeigt das Logo der Firma. Das ist auch seine vorrangige Aufgabe. Auch für einen blinden Benutzer ist es gut, zu wissen, dass die Firma ihr Logo auf der Seite zeigt. Zusätzliche Informationen zum Ziel des Links sind überflüssig. Wo soll das Logo von Müllermilch schon hinführen? Also sollte "Logo: Müllermilch" im Alternativtext stehen.
  2. Das Bild hat zwei Funktionen. Es zeigt das Logo der Firma und es dient als Link auf die Startseite des Webauftritts. Der sehende Benutzer hat damit kein Problem, er wundert sich nicht, wenn er das Bild anklickt und auf der Startseite von Müllermilch landet. Ebenso der blinde Benutzer. Ein grafischer Link namens Müllermilch? Der zeigt und verweist wohl auf Müllermilch. Also kurz und knapp: "Müllermilch" in den Alternativtext!
  3. Das Bild hat zwei Funktionen. Es zeigt das Logo der Firma und es dient als Link auf die Startseite des Webauftritts. Für beides soll auch der Alternativtext stehen: "Logo: Müllermilch - zur Startseite"

Alle drei Alternativen unterstützen den blinden Besucher. Im BITV-Test gelten daher alle drei Alternativen als angemessen.

Blättern: zum nächsten Prüfschritt zum letzten Prüfschritt


© 2003 - 2010 DIAS GmbH | Impressum | letzte Änderung 10.08.2006

nach oben