OK – wir präsentieren endlich wieder ein Kapitel mit Erfahrungen aus unserem Alltag als Webtester. Bevor wir uns jedoch voll ins Thema stürzen, er mal eine Frage:

Wissen Sie, was das ist?
«__img/gefaess_d3g» (Ausgesprochen etwa: «Unterstrich- Unterstrich- Img- Schrägstrich- Gefäss- Unterstrich- D-Drei-G»

Keine Ahnung?
Bei diesem nicht wirklich aussagekräftigen ‹Text› handelt es sich um eine Zeile dessen, was einem blinden Besucher der Seite von Coop, einem Schweizer Grossverteiler, vorgelesen wird. Der Text ist eigentlich ein Link. Aber wo führt der Link genau hin? Und warum findet der sehende Seitenbesucher diesen Link gar nicht erst?

Los Geht’s

Wir wollen uns heute mit einer der häufigsten Barrieren, die sich im Zusammenhang mit Screen Readern und blinden Surfern richtiggehend aufdrängt, befassen: Dem Element ‹Grafik›. Dabei ist es mir klar, dass sich schon eine Vielzahl anderer Quellen mit diesem Thema befasst hat. Es soll darum nur das Nötigste gesagt werden – für weiterführendes Material ist im Netz gesorgt.

Im eingangs erwähnten Beispiel handelt es sich (vermutlich, denn ich liess den Sachverhalt nicht extra durch eine sehende Person nachprüfen) um einen grafischen Link. Der sehende Seitenbesucher sieht ein Symbol (einen Einkaufswagen zum Beispiel), macht eine dem Symbol entsprechende Assoziation («Ach so, wenn ich hier klicke, landet der Früchtequark im Einkaufswagen»), klickt darauf und löst eine dem Symbol entsprechende Aktion aus.

Dem Blinden teilt der Screen Reader in diesem Fall nicht mit, worum es sich bei der Grafik genau handelt. Stattdessen liesst er den eben nicht gerade aussagekräftigen Text «__img/gefaess_d3g».

Was ist das Problem?

Logisch: Ein Screenreader erkennt zwar Grafiken als solche, kann jedoch (alle Features in Ehren) diese nicht Beschreiben. Er könnte ein, zwei klägliche Versuche unternehmen (die in der Grafik enthaltenen Farben auflisten oder per aufwändigem OCR versuchen, einen Text im Bild zu finden). Da aber in sagen wir 99.4 Prozent aller Grafiken im Web weder das eine noch das andere brauchbare Resultate bringt, stützt er sich auf Alternativen.

Eine Grafik hat nämlich im HTML-Web IMMER einen Dateinamen, den man aus dem Quellcode ersieht. In unserem Coop-Beispiel sieht man das direkt: IM Verzeichnis ‹__img› befindet sich die Datei ‹gefaess_d3g›. (evtl. ergänzt durch «.jpg», «.gif» oder wie die Dinger alle heisen). Leider sagt ein Name wie ‹Gefasee_d1g› genau gar nichts darüber aus, was das damit verbundene Bild darstellt, zu Mal es auf der Coop-Seite auch noch ein ‹Gefaess_d2g›, ‹Gefaess_d3g› und viele weitere ähnliche Grafiken gibt. Leider sind Dateinamen von Grafiken generell eher wenig aussagekräftig.

Nun besteht aber im HTML-Code die Möglichkeit, Grafiken mit einem so genannten Alternativtext (Auch Alt Text oder Alt Tag genannt) zu versehen. (Es wurde auf diesem Blog schon einmal im Zusammenhang mit Aussagekräftigen ‹Mehr›-Links angesprochen) Beim Alternativtext handelt es sich um ein Attribut, welches genau den Zweck erfüllt, von dem wir hier sprechen: Es kommt zum Zuge, wenn das Gerät, welches die Website besucht, keine Grafik anzeigen kann. Statt der Grafik wird in solchen Fällen der Alternativtext (falls es einen gibt) angezeigt. Ähnlich dazu liesst der Screenreader dem blinden Nutzer nicht den Dateinamen, sondern jenen Text. In diesem Text könnte z.B. stehen: «Klicken Sie hier, um den Früchtequark in den Einkaufswagen zu legen». Der Alternativtext KANN hilfreich sein – ich sage: Er KANN….

Was im Test steht

Wenn wir im Rahmen unserer Webtests Grafiken anschauen, lauten die Testfragen:

• Sind alle Bilder, Grafiken sowie grafische Links verständlich beschriftet?
• Sind die beschrifteten Grafiken massgebend fürs Seitenverständnis (keine beschrifteten Grafiken die nur als Platzhalter dienen, sog. Spacer-Grafiken)?

Wer diesen Punkt bestehen wird, sollte dafür sorgen, dass man den Inhalt der Seite auch mit ausgeschalteten Grafiken, ganz auf Alternativtexte vertrauend, verstehen und angenehm navigieren kann. So viel wie nötig, so wenig wie möglich, sollte Beschrieben werden. Hier einige Beispiele:

Grafische Links: Die Flagge Polens

Nun, wie soll ich sagen: Es interessiert den durchschnittlichen Screenreader-User nicht, mit welchen grafischen Elementen Sie Ihre Seite zieren. Bei Grafischen Links kommt das klar zum Ausdruck. Wenn Sie, zum Beispiel bei einer Sprachauswahl, nicht die Namen der Sprachen, sondern eine Reihe von Länderflaggen zeigen, schreiben Sie dies bitte nicht noch in den Alternativtext. Hier interessiert nur eine Frage:

Was passiert, wenn ich klicke?

Und jetzt – sagen Sie selbst: Können Sie die Frage bei einem Grafischen Link mit Alternativtext «Die Flagge Polens» beantworten? Handelt es sich hier um einen Shop, bei welchem Sie eine polnische Flagge bestellen können? Wird beim Klick auf den Link die Flagge vergrössert dargestellt? Oder wechselt die Seitensprache einfach in polnisch?

In diesem Fall, bei der Sprachwahl, genügt schon der einfache Alternativtext «Polnisch». In den anderen Fällen könnten Sie schreiben «Polnische Flagge (ein Klick auf die Grafik zeigt sie in einem neuen Browserfenster vergrössert an)»; oder: «Polnische Flagge (hier klicken, um zu bestellen)».

Denken Sie insbesondere an den Alternativtext, wenn Sie viele Buttons und Pfeile auf Ihrer Seite platzieren. Die Angabe «img0003987_Arrow_left_Gray.jpg» lässt sich zwar mit etwas Grübeln interpretieren, ist aber insbesondere für frische Surfer mit Screenreader immer wieder mal ein Grund zur Entmutigung.

Grafiken mit Inhalt: Unser Organigramm

Dann gibt es Grafiken, die nicht verlinkt sind. Hier gibt es zunächst jene Bilder (es handelt sich dabei übrigens um die klare Minderheit der Grafiken im Netz) die zum Verständnis der Seite zwingend notwendig sind. Organigramme gehören dazu. Es nützt einem blinden Seitenbesucher herzlich wenig, eine Grafik mit dem Alt-Text «Unser Organigramm» zu finden. Die Frage, die beantwortet werden muss lautet:

Welche Information vermittelt mir die Grafik?

Im Falle des Organigramms wird man um eine längere Beschreibung wohl nicht herum kommen; hier wäre je nachdem die Verwendung des ‹Longdesc› Attributes in Erwägung zu ziehen, welches extra für ausführlichere Beschreibungen geschaffen wurde. Ist das Organigramm eher klein, machen Sie aber ruhig vom Alternativtext gebrauch.

Grafiken mit Text: Briefe und Pakete

Auf der Seite der Post findet man diese Art Grafiken. Aus Gründen des Marketings entwerfen viele Unternehmen offenbar ihre ganz eigene Schriftart. Gewisse Texte (Auf der Seite der Post sind es die Titel ‹Briefe› und ‹Pakete›) werden dann, um korrekt angezeigt zu werden, als Grafik gespeichert. Hier ist das Erstellen eines Alternativtextes einfach. Beantworten Sie die Frage:
Was steht da genau?

Sie schreiben genau das in den Alt-Text, was die Grafik auch schon als Text aussagt, in unserem Fall also «Briefe» und «Pakete».

Schwierige Fälle: Der Bundesrat

Es kommt auch mal vor, dass Fotos in gewisser Hinsicht zum Seitenverständnis beitragen oder von grosser Wichtigkeit erscheinen, vielleicht, weil sie berühmte Leute zeigen, ein Pressefoto darstellen etc.
Auch diese Grafiken sollten / dürfen beschrieben werden. Achten Sie darauf, nicht zu wenig zu schreiben, aber auch nicht zu viel.

Was ist auf dem Bild wichtiges zu sehen, was noch nicht erwähnt wurde?

Der Alternativtext «Bundesrat» ist darum ungenügend, weil man nicht genau weiss, ob es sich dabei um einen (und um welchen) Bundesrat oder um den gesamten Bundesrat handelt. Der Alternativtext «Gesamtbundesrat» ist darum ungenügend, weil der Gesamtbundesrat immer wieder einmal wechselt und man folglich wissen muss, in welchem Jahr die Abbildung gemacht wurde. Optional dürfen weitere wichtige Umstände erwähnt werden. Ein guter Alternativtext kann sein «Offizielles Foto des Gesamtbundesrates 2007».

Steht all dies jedoch schon im Text, braucht es nicht noch einmal im Alt-Tag der Grafik zu stehen. Mühsam in dieser Hinsicht ist z.B. die Seite Swissinfo.org, die jede Grafik sowohl in ihrem Alternativtext als auch im darauf folgenden normalen Text genau gleich beschreibt. Dies führt im Fall des browsenden Screenreader-Anwendung um eine völlig überflüssige Verdoppelung von Information. Haben Sie bereits alles wichtige im Text erwähnt, lassen Sie den Alt-Text einfach leer.

Illustrative Grafiken: Das Paar In Der Wiese Und Der Spacer

Und schliesslich wären da noch die Grafiken, die nichts aussagen und die man getrost weglassen kann. Auf der Bereits erwähnten Seite der Post findet man zur Zeit gleich unterhalb dem Titel «PostZertifikat» die Grafik mit dem Alternativtext «Paar in der Wiese». Auch kommt es vor, dass wir beim Testen auf Alternativtexte wie etwa «Oranger Punkt», «leer» oder «Spacer» stossen. Frage dazu:

Muss ich das wissen?

Merke: Ein Screenreader-User liesst eine Seite Zeile für Zeile durch. Jedes Textelement, dazu gehören Alternativtexte von Grafiken, wird vorgelesen und beansprucht Zeit. Jede unnötigerweise beschriebene Grafik frisst somit Zeit. Und es ist nun einmal NICHT WICHTIG, dass da ein Paar in der Wiese sitzt, steht oder gar liegt. Auch orange Punkte sind blinden Menschen in der Regel egal, es sei denn, sie markieren einen Eingabefehler in einem Formular oder eine Preisaktion.

Lassen Sie in solch rein illustrativen Fällen den Alternativtext einfach leer und schreiben Sie keinen Text hinein.

Spezialfall CAPTCHA

Immer mehr werden Grafische Elemente verwendet, Spam-Attacken zu vermeiden. In Formularen wird bewust ein Bild mit einem darin abgebildeten Code gezeigt. Menschen – so die Erwartung – können den Code lesen und eingeben. Maschinen (leider gehören auch Screenreader dazu) scheitern an dieser Aufgabe. Blinde User können diese Barriere nicht überwinden, da sie auf maschinelle Unterstützung beim Lesen der Grafik angewiesen sind. Wir empfehlen DRINGEND, grafische Captchas nicht zu verwenden; und falls doch eines eingebaut wird, muss eine für Screenreader User gleichwertige Alternative angeboten werden (z.B. Audio-Verification). Beispiele davon gibt’s bei Google Mail (in der Registration) oder in den Blogs auf VIRUS, dem Schweizer Jugendsender (im Bereich der Kommentare).

Tolle Seiten

Übrigens lassen sich auch Imagemaps mit Alternativtexten zugänglich machen. Schauen Sie sich einmal Die Lokalisierungskarte von www.ch.ch an, wo sich ganz einfach ein Kanton auswählen lässt.

Einige (wenn auch nicht alle) gut beschriftete Grafiken gibt’s auch auf der Coop-Konkurrenz, der Migros zu bestaunen, übrigens gemeinsam mit den so verhassten «Mehr» Links…

Schlechte Beispiele

Ein wirklich mühsames Beispiel ist edie Seite der Schweizer Fluggesellschaft Fly Baboo, deren Navigation auf der ganzen Linie versagt!

Nur wenig besser ist die Stadt Lausanne, obwohl man hier die Linkziele mehr oder weniger aus dem Dateinamen heraus erraten kann.

Fazit

Welchen Alternativtext man einfügen soll, hängt stark davon ob die Grafik verlinkt ist oder nicht. Grundsätzlich ist zu überlegen, ob durch die Grafik eine Information vermittelt wird. Falls ja, ist durch Einfügen eines Alternativtext (alt=»TEXT» im IMG Tag) die gleiche Information auch für blinde User anzugeben. Bei Grafiklinks ist dies das Linkziel, bei übrigen Grafiken in der Regel ihr Inhalt. Ein Alt-Text darf NIE weggelassen werden (da sonst einige Screenreader fälschlicherweise den Dateinamen der Grafik vorlesen). Der Alt-Text darf aber gerne auch leer gelassen werden, wenn durch die Grafik keine wirkliche Information vermittelt wird.

Fortsetzung: Von Überschriften und Headings

Über Strukturelemente schreibe ich, sobald ich nächstes Mal Zeit habe. 🙂
Es geht darum, dass eine Überschrift zwar nach Überschrift aussieht, ohne aber eine zu sein. Wir erklären, warum ein schönes Aussehen nicht genügt und wie Sie Ihre Seite vom Bandwurm-Dasein befreien.