Specify a text colour for img elements

I think most people will agree that it is a good thing for web browsers to display the contents of an image’s alt attribute when the image is missing or broken, or image rendering has been disabled. However, many web professionals forget to check what the alternative text will actually look like in those cases.

Barrierefrei ganz nebenbei?

Foto einer Weinflasche mit Brailleschrift

Bei der Verleihung des Biene Awards letzte Woche in Berlin1 wurde ich gefragt, ob das jetzige ZEIT ONLINE quasi zufällig so gut geworden wäre. Zunächst empfand ich die Frage als dämlich, mithin frech. Beim genauerer Überlegung muss ich jedoch zugeben: preiswürdige Barrierefreiheit ist tatsächlich bei der Entwicklung mehr als Zugabe herausgefallen, als dass wir darauf zugesteuert hätten. Die Gemeinschaftsleistung aller Beteiligten, von den Information Architects in Japan und in der Schweiz, über Nexum, die Erdfische und das Digitalkombinat, hat uns in Hamburg genug Freiheit in der Codegestaltung gegeben, dass zunächst nur Validität und letzten Endes dann wohl auch Barrierefreiheit möglich wurden.

Als ich bei ZEIT Online angefangen habe, da bestand die Site noch aus einer großen, merkwürdigen Tabellenkonstruktion. Seitdem hat sich einiges geändert: zunächst stellten wir auf CSS um, damals noch mit schlimmster <div>-terie, einen Relaunch später versuchten wir wenigtens stellenweise valide zu sein, was nicht durchgängig gelang. Heute ist zumindest dieses Ziel erreicht. Meistens. Die Wahrheit ist, dass man regelmäßig Kontrollen machen muss, ob noch alles in Ordnung ist.

Aber, das wissen wir alle: das alleine macht ja keine Barrierefreiheit aus. In der Laudatio wurde es aber auch schon deutlich: das gelungene Design (Japan/Schweiz) und der Einsatz allermodernster Techniken wie HTML5 (Hamburg), sowie die gute Typographie (Japan/Schweiz/Hamburg) haben einen guten Teil des Ergebnisses ausgemacht. Wenn ich die Andeutungen richtig verstanden habe, war es auch ein wenig umstritten, ob man ZEIT ONLINE auszeichnen solle, oder das Ergebnis war zumindest knapp. Was ich gut verstehen kann, denn obwohl unser Motto lautet: »Wir sind die Guten!«, hatten wir doch schon das Gefühl, allein wegen der schieren Masse an Code nicht in alle Ecken vorgedrungen zu sein, um dort mit gutem Zureden, freundlichen Worten und zur Not eiserner Faust die Richtlinien durchzusetzen, die man braucht, um eine barrierefreie Seite zu bauen. Außerdem besteht unser Team zwar aus Jungs, die in HTML und CSS träumen und das Geträumte morgens durch den W3C-Validator jagen, aber anderseits sind wir nicht mit der BITV oder den WCAG, jedenfalls nicht täglich.

Das wir dafür die Biene in Bronze erhalten haben, die aussagt, dass da noch Raum für Verbesserungen ist, noch Luft nach oben, zeigt uns, dass man trotzdem bereit war unsere bisherige Arbeit positiv zu bewerten. Das ist natürlich ein großer Ansporn, um auf dem Weg weiter zu gehen. Und sicherlich auch eine Legitimation mehr, denn letzten Endes muss man sich auch immer für längere Entwicklungszeiten, kompliziertere Konstrukte und das teilweise sture Beharren auf bestimmte Codestrukturen verantworten. Da ist der Preis sicherlich Wind von hinten.

Last but not least möchte ich noch auf eine Sache hinweisen, auch weil es bei der Verleihung kurz zur Sprache kam: als Newswebsite müssen wir natürlich in einem teilweise sehr hartem Verdrängungswettbewerb bestehen, im Rennen um die beste Platzierung in der Google-Suche, den meisten Nennungen bei Google News und so fort. Wir haben aber im letzten Jahr kontinuierlich versucht SEO-Maßnahmen als eine Form der Zugänglichkeit zu verstehen. Scheinbar hat auch das, jedenfalls an den meisten Stellen, sehr gut funktioniert, in beide Richtungen.

1 ZEIT ONLINE wurde eine bronzene Biene in der Kategorie »tagesaktuelle Recherche- und Serviceangebote« verliehen

Bild: http://www.flickr.com/photos/adactio/ / CC BY 2.0

Tabellen zugänglich

OK, inzwischen ist es ein paar Wochen her, dass mich jemand gefragt hat, ob man Tabellendaten als HTML-Tabelle umsetzen dürfte, aber trotzdem, das Thema lässt einen nicht los. Mal eben ein paar <tr> und <td> aneinanderzuhängen, damit ist es ja nicht getan. Es gibt eine wahre Flut von Tags und Eigenschaften, die eingesetzt werden können und müssen, um eine Datentabelle – die klassischerweise von der Ansicht lebt – auch für bspw. blinde und sehbehinderte zugänglich zu machen!

In der grandiosen Artikelserie Benimmregeln für Datentabellen [via] findet man nun all diese Dinge erklärt, ausführlich, mit erklärenden Abbildungen, Codelistings und Hörproben (von Screenreadern). Lesebefehl!

Understanding Disabilities when Designing a Website

The WCAG Guidelines, introduced in 1999, go some way to helping web developers create accessible websites—but …we must look further than the guidelines if we are to create websites which are accessible to users with disabilities and the assistive technologies they rely on.

Turn Firefox into a screen reader with Fire Vox

For anyone who hasn’t heard of Fire Vox, it is a free, open source screen reader extension for Firefox that works on Windows, Mac OS X, and Linux. Among other things it has support for WAI-ARIA and the CSS3 Speech Module, and is a good alternative to VoiceOver if you’re on a Mac and need a screen reader for web browsing (or testing).