BITV Reloaded – Anforderung 1: Äquivalente Alternativen

Bedingung 1.1: Alternativtexte (Prio. 1)

»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.«

Was heißt das?

In dieser Anforderung geht es um die Überprüfung des Vorhandenseins und die Qualität von alternativen Texten zu Bildern und Imagemaps, aber auch von anderen Nicht-Text-Elementen wie OBJECT> und SCRIPT>. Zunächst ganz einfach, die meisten Editoren sehen separate Eingabefelder beim Einfügen von Bildern und anderen Objekten vor. Zumal das alt-Attribut seit HTML 4 für die Elemente IMG und AREA verbindlich vorgeschriebenen ist und optional für die Elemente INPUT und APPLET ebenfalls vegeben werden kann. Aber bei der Frage, was ein »äquivalenter Text« ist, scheiden sich die Geister.

Die Vorgabe beschränkt sich nicht nur auf alternative Texte zu grafischen Elementen. Wenn man den Text genau liest, stellt man fest, dass mit einer Universalklausel zu sämtlichen Formaten, die nicht im Text direkt beschrieben werden, alternative Texte eingefordert werden. Streng genommen muss also der gesamte akustische und visuelle Inhalt einer Webseite nochmals in Textform hinterlegt oder beschrieben werden. Im Detail bedeutet dies:

Bilder, graphisch dargestellten Text einschließlich Symbolen, […]

Dies betrifft: sämtliche Bilder, Grafiken, Icons, Diagramme, grafisch umgesetzten Text (inklusive bestimmter Image Replacement-Techniken), die aus externen Ressourcen in eine Seite eingebettet werden.

[…] Regionen von Imagemaps, […]

Dies betrifft: sämtliche (grafischen) Formate, bei denen die Interaktion über Koordinaten oder Teilbereiche des Objektes geschieht. Das können Bilder mit nur sehr wenigen Teilbereichen sein, im Ernstfall aber auch Karten, Diagramme oder ähnliches mit dutzenden oder hunderten eigenständigen aktiven Links.

[…] Animationen (z. B. animierte GIFs), […]

Dies betrifft: nicht nur die beispielhaft in der Verordnung angeführten animierten GIFs, sondern sämtliche Formate, mit denen Animationen hinterlegt werden können, also auch Applets, Objekte wie Flash und vieles mehr.

[…] Applets und programmierte Objekte, […] Scripts, […]

Dies betrifft: in HTML 4 ist die Notierung des alt-Attributs für die Elemente INPUT und APPLET optional, hier wird sie insbesondere für INPUT-Elemente vom Typ image gefordert, aber auch für Applets (Java etc.) und andere programmierte Objekte.

[…] Zeichnungen, die auf der Verwendung von Zeichen und Symbolen des ASCII-Codes basieren (ASCII-Zeichnungen), […]

Dies betrifft: streng genommen jede Form von ASCII-Art, also auch Smileys wie :-) – der gesunde Menschenverstand sagt einem aber, dass diese sicher nicht gemeint sind. »Zeichnungen, die auf der Verwendung von Zeichen und Symbolen des ASCII-Codes basieren« heißt natürlich nicht, dass ASCII-Art dann barrierefrei ist, sobald man eine andere Kodierung wie UTF-8 oder ISO 8859-1 verwendet. Gemeint sind hier eher waghalsige Konstruktionen aus den Urzeiten des Webs: damals beherrschten noch nicht alle Browser HTML-Tabellen und manche Anbieter versuchten diese Tabellen durch eine Folge von Zeichen wie _, |, - nachzubilden.

[…] Frames […]

Dies betrifft: Frames. Der alternative Inhalt von Frames wird nicht in einem alt-Attribut, sondern im separaten NOFRAMES-Element gesetzt, das sowohl Teil eines Framesets sein kann als auch eines HTML 4 transitional-Dokumentes. Weitergehende Vorgaben zur Umsetzung von Frames werden weiter hinten bei Bedingung 12.2 gemacht.

[…] Bilder, die als Punkte in Listen verwendet werden, […]

Dies betrifft: eine veraltete Technik, Listen mit künstlichen Einrückungen und Listenzeichen zu simulieren. Da die Verwendung der korrekten HTML-Listenelemente in Bedingung 3.6 verlangt wird ist dieser Punkt hier zu vernachlässigen.

[…] Platzhalter-Graphiken, […]

Dies betrifft: sogenannte Spacer- oder Leer-GIF. Ebenfalls ein Relikt aus vergangenen Tagen, das aber leider immer noch häufig anzutreffen ist. Bei korrekter Anwendung von Cascading Style Sheets (CSS, s. Bedingung 3.3) obsolet.

[…] graphische Buttons, […]

Dies betrifft: Formularelemente vom Typ input type="image und grafische Elemente innerhalb des BUTTON-Elements.

[…] Töne (abgespielt mit oder ohne Einwirkung des Benutzers), Audio-Dateien, die für sich allein stehen, Tonspuren von Videos und Videos. […]

Dies betrifft: sämtliche Audiosignale, die bei der Betrachtung oder Bedienung einer Webseite oder -anwendung von Bedeutung sind und die echte Inhalte transportieren. Dies schliesst auch Podcasts ein, die ohne Mitschrift insbesondere für gehörlose Menschen unzugänglich sind.

Wie können Sie das testen?

In dieser Bedingung verstecken sich eine ganze Reihe von verschiedenen Formaten. Und wie so oft bei Tests auf BITV-Konformität hilft hier das Schweizer Taschenmesser des Webdesigns, die Web Developer Extension für Firefox. In dieser lassen sich sämtliche in BITV Bedingung 1.1 aufgelisteten Formate abschalten und durch die hinterlegten Textalternativen ersetzen.

Die Option zum Ausblenden von Bildern und zur Anzeige der Alternativtexte finden Sie in der Toolbar im Menü »Images«. Wählen Sie dort die Option »Replace Images With Alt Attributes«. Durch an- und abschalten dieser Option und Vergleich der sichtbaren Inhalte können Sie kontrollieren, ob sich ohne Bilder noch der komplette Inhalt und alle Funktionen der Seite erschließen. Sollte dies der Fall sein, so können Sie diesen Punkt abhaken. Sie sehen nämlich genau die Inhalte, die auch ein Screenreader oder Sprachbrowser vorlesen würde.

Hier wird deutlich, warum man dekorative Elemente oder sog. Spacer, die selbst keine Inhalte transportieren, mit einem leeren alt="" verstecken sollte. In diesem Fall versucht der Browser das Bild (bzw. den Platz, den es einnehmen würde) nämlich erst gar nicht zu rendern, so dass der Lesefluss nicht gestört wird. Auch hierzu gibt es den passenden Menübefehl in der Web Developer Toolbar: mit »Outline Images With Empty Alt Attributes« werden alle Bilder mit leerem alt-Attribut mit einem rotem Rahmen hervorgehoben.

Was ist wirklich Äquivalent?

Um es kurz zu fassen: so kurz wie möglich und so lang wie nötig. Daher sprechen die Web Content Accessibility Guidelines immer nur von wesentlichen Informationen und für den jeweiligen Kontext relevanten Bildinhalten, für die Alternativtexte hinterlegt werden müssen (»Text-Äquivalente müssen so geschrieben werden, dass sie alle wesentlichen Informationen vermitteln«).

Bei der Bewertung der Qualität von Alternativtexten ist der Kontext zu berücksichtigen – was ist im aktuellen Sinnzusammenhang wirklich nötig? Es ist möglich, dass ein und dasselbe Bild in unterschiedlichen Zusammenhängen einen Alternativtext benötigt oder ein alt="" angemessen ist.

Die bei Online-Ausgaben von Angeboten der klassischen Medien häufig anzutreffenden Bildunterschriften können eine äquivalente Alternative sein. Sie haben den Vorteil, dass sie für alle Nutzer wahrnehmbar sind und so auch an ihre individuellen Bedürfnisse stark sehbehinderter Menschen anpassbar sind, die keinen Screenreader nutzen. In diesem Fall kann das alt-Attribut des mit einer Bildunterschrift versehenen Bildes auch leer bleiben, da eine Wiederholung des identischen Textes störend wirkt.

Positive Beispiele:

Ein einfach nachzuvollziehendes Beispiel für sinnvolle Alternativtexte ist das Logo der Aktion Mensch in der Fußzeile dieser Seiten. In grafischen Browsern erscheint dort der Hinweis »›Einfach für Alle‹ ist eine Initiative der« gefolgt von einer Grafik mit dem Logo der Aktion Mensch.

Üblicherweise würde der alternative Text für die Grafik nun heißen: »Logo der Aktion Mensch« – allerdings würde dann ein Screenreader genau das vorlesen: »›Einfach für Alle‹ ist eine Initiative der Logo der Aktion Mensch«.

Der folgende Screenshot zeigt die Darstellung des an Stelle dessen verwendeten alternativen Textes, der den tatsächlichen Inhalt des Logos, nämlich den Text »Aktion Mensch« wiedergibt. Hier wurde zur Kontrolle der Qualität der alt-Texte das Laden der Bilder im Browser unterbunden, das Ergebnis ist lesbar und diesmal auch sinnvoll.

In modernen Browsern können Sie die Schrifttype für die alternativen Texte per CSS bestimmen, so dass diese nicht in der voreingestellten Standardschrift erscheinen. Die einfache Anweisung img{font-family:"Helvetica",sans-serif} in Ihrem Style Sheet bringt den Browser auf den richtigen Kurs, so dass auch Besucher, die keine Bilder laden, in den vollen Genuss Ihrer Gestaltung kommen.

Negative Beispiele:

Überlange Alternativtexte

In der Liste der HTML 4-Attribute steht als Bedeutung des alt-Attributs »short description« – eine kurze Beschreibung – damit ist eigentlich alles Wesentliche gesagt. Wenn Sie eine längere Beschreibung hinterlegen müssen, so tun Sie dies im begleitenden Text oder benutzen Sie das hierfür vorgesehene longdesc-Attribut (Beispiel: img src="verkaufszahlen.png" alt="Verkaufszahlen 2006" longdesc="verkaufszahlen-2006.html">).

Falsche Alternativtexte

Ein häufig anzutreffender Fehler bei der alternativen Betextung von Bedienelementen. Zur Verdeutlichung ein einfaches Beispiel: in einem Shopping-Angebot sind die Buttons grafisch umgesetzt und enthalten den Text »Bestellung abschicken«. Der Alternativtext des INPUT-Elementes ist davon abweichend »Hier Klicken, um zur Kasse zu gehen«.

Wenn ein Nutzer mit motorischer Behinderung, der auf eine Sprachsteuerung angewiesen ist, versucht, den Kaufvorgang abzuschliessen, so wird er an dieser Stelle mit einer Barriere konfrontiert. Er spricht den Text des Buttons (»Bestellung abschicken«), die Software zur Sprachsteuerung kann aber naturgemäß den Text des grafischen Buttons nicht erkennen und sucht nun im Quelltext der Seite vergebens nach dem passenden Text.

Alternativtexte sind übrigens auch kein guter Platz für Urheberrechtsvermerke (alt="© 2007") und ähnliches.

Linkziele im Alternativtext

Ebenfalls ein häufig anzutreffender Fehler. Vielfach wird bei verlinkten Bildern gleichzeitig auch das Linkziel im Alternativtext des Bildes beschrieben. Die Beschreibung des Linkziels ist jedoch (wenn überhaupt) eine Funktion des Links (also des A-Elements bzw. eines optionalen title-Attributs für den Link), nicht des Bildes. Der Vollständigkeit halber hier ein korrektes Beispiel: a href="http://www.aktion-mensch.de/" title="Zum Portal der Aktion Mensch"><img src="logo-am.png" alt="Aktion Mensch" width="96" height="25"></a>.

Alternativtexte als Tooltip

Eng verwandt mit dem vorhergehenden Fehler und genauso falsch. Im Microsoft Internet Explorer werden die Werte des alt-Attributs als Tooltip über dem Bild dargestellt, wenn man mit der Maus darüberfährt. Dies ist streng genommen ein Fehler in diesem Browser – Alternativtexte dienen als Alternative zum Bild und nicht als Zusatzinformationen. Sie sollen nur dargestellt werden, wenn der Benutzer das ursprüngliche Bild nicht sehen kann. Dieses Fehlverhalten lässt sich im IE übrigens abschalten, indem man ein leeres title="" definiert.