Diese Version des Prüfschritts ist nicht mehr gültig!
Bitte benutzen sie nur noch die aktuellen Prüfschritte.
| Version | bis 10.07.2017 | Aktuell |
|---|---|
| BITV-Bedingung | 1.1.1 Nicht-Text-Inhalte |
| WCAG-Erfolgskriterium | 1 Alternativtexte für Bedienelemente |
| Bewertungsalternativen | ja / eher erfüllt / teilweise erfüllt / eher nicht erfüllt / nein / nicht anwendbar |
| Bezieht sich auf | einzelne Webseite |
| Prüfschritt erfüllt | Grafische Bedienelemente haben sinnvolle Alternativtexte. |
| Prüfschritt nicht anwendbar | Grafische Bedienelemente sind nicht vorhanden. |
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. Wenn Image maps eingesetzt werden, haben deren Bereiche (area) sinnvolle Alternativtexte.
Thema dieses Prüfschritts sind auch Textlinks, die per CSS durch Hintergrundbilder ersetzt werden.
Für blinde Benutzer oder für Benutzer, die für schnellere Zugriffszeiten das Laden von Grafiken abschalten, 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.
Der Prüfschritt ist anwendbar, wenn Grafiken als Bedienelemente (Menüs, Logos, Teaserbilder oder Schaltflächen) eingesetzt werden.
Falls Image maps eingesetzt werden:
area-Element der Image map, aktiver Bereich) und für das Gesamtbild der Image map ein gleichwertiger Alternativtext vorhanden ist (siehe 2.4).Der Alternativtext für die gesamte Image map sollte in der Regel die Image map beschreiben, die Alternativtexte für die aktiven Bereiche (area-Elemente) sollten die Linkziele bezeichnen.
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).
a-Element ohne eingeschlossenen Text durch ein Hintergrundbild ersetzt wird, ist dies wie ein nicht vorhandenes oder leeres alt-Attribut zu werten.display:none verwendet wird, ist dies wie ein nicht vorhandenes oder leeres alt-Attribut zu werten.Entscheidend ist: die Seite soll benutzbar sein, wenn Grafiken, oder Bilder oder Objekte durch die entsprechenden Alternativtexte oder Textalternativen ersetzt sind.
In der Regel bedeutet das:
Wenn eine Abbildung und ein danebenstehender Textlink auf dasselbe Ziel verweisen, muss geprüft werden, ob Abbildung und Text in den selben Link eingeschlossen sind.
Wenn Abbildung und Text innerhalb des selben Links stehen, soll der Alternativtext der Abbildung nicht den Text des Links wiederholen. Je nach Inhalt der Abbildung kann das alt-Attribut dann leer bleiben oder den abgebildeten Inhalt beschreiben, während der Linktext Zweck oder Ziel des Links beschreibt. Dies ist Gegenstand der Prüfschritte 1.1.1b "Alternativtexte für Grafiken und Objekte" und 1.1.1c "Leere alt-Attribute für Layoutgrafiken".
Wenn Abbildung und Text zwei unabhängige Links auf dasselbe 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.
Für jeden Nicht-Text-Inhalt, der dem Nutzer oder der Nutzerin präsentiert wird, ist eine Text-Alternative bereitzustellen, die den Zweck dieses Inhalts erfüllt.
Text-Alternativen müssen in den folgenden Fällen nicht bereitgestellt werden:
- Es handelt sich um ein Kontrollelement oder um ein Element, das Eingaben der Nutzerin oder des Nutzers akzeptiert, und es ist ein Bezeichner vorhanden, der seinen Zweck beschreibt.
- Es handelt sich um zeitgesteuerte Medien und Text-Alternativen, die bereits mindestens eine beschreibende Erklärung des Nicht-Text-Inhalts enthalten.
- Es handelt sich um Tests oder Übungen, die im Nicht-Text-Format präsentiert werden müssen, und Text-Alternativen, die bereits mindestens eine beschreibende Erklärung des Nicht-Text-Inhalts enthalten.
- Es sollen bestimmte sensorische Erfahrungen bewirkt werden und Text-Alternativen, die bereits mindestens eine beschreibende Erklärung des Nicht-Text-Inhalts enthalten.
- Es soll erreicht werden, dass kein Computer, sondern eine Person auf den Inhalt zugreift und der Nicht-Text-Inhalt durch Text-Alternativen erklärt und beschrieben wird und alternative CAPTCHAs mit unterschiedlichem Ausgabemodus für verschiedene Arten der sensorischen Wahrnehmung bereitgestellt wird.
- Es handelt sich um rein dekorative Elemente oder um Elemente, die nur der visuellen Gestaltung dienen, oder der Nicht-Text-Inhalt ist für die Nutzerin oder den Nutzer nicht sichtbar und diese Elemente sind so eingerichtet, dass sie von assistiven Technologien ignoriert werden können.
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üfkriterien 1.1.1b "Alternativtexte für Grafiken und Objekte" oder 1.1.1c "Leere alt-Attribute für Layoutgrafiken" sind anzuwenden.
title-Attribut) für Frames: siehe Prüfschritt 2.4.1a "Inhaltsbereiche strukuriert".area elements of image mapsalt attributes on images used as submit buttonsalt attributes on img elementsalt attribute on img elements, area elements, and input elements of type 'image'alt-Attribut leer gelassen werden, wenn stattdessen ein sinnvolles title-Attribut verwendet wird? Das wird in meinem Screenreader problemlos ausgegeben.Es stimmt, dass neuere Screenreader bei Vorhandensein eines title-Attributs dieses anstelle eines fehlenden alt-Attributs ausgeben. Das trifft aber nicht auf alle gängigen Hilfsmittel zu. Deshalb verlangt der Test grundsätzlich die standardkonforme Umsetzung gemäß HTML 4.01 und WCAG 2.0:
alt-Attribut soll den Inhalt des Bildes ersetzentitle-Attribut ist für zusätzliche (nicht essenzielle) Informationen gedachtDeshalb steht ja in der WCAG 2.0-Technik H33:
Because of the extensive user agent limitations in supporting access to the title attribute, authors should use caution in applying this technique. For this reason, it is preferred that the author use technique C7: Using CSS to hide a portion of the link text (CSS) or H30: Providing link text that describes the purpose of a link for anchor elements (HTML).
Ein weiterer Punkt, der die Wichtigkeit des alt-Attributs unterstreicht, ist die Nutzung mit abgeschalteten Bildern. Auch wenn Alternativtexte im Bereich der Bildumrisse in manchen Browsern nicht vollständig angezeigt werden, ist das immer noch besser als eine Nicht-Anzeige beim Einsatz von title.
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 Teaser-Bilder ü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.
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, wenn sie im Kontext hilfreich ist.
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.
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.
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.
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:
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.
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!
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.