Hi all
Today I got a review of Vector's accessibility from an employee of the German Central Library for the Blind (Deutsche Zentralbücherei für Blinde, DZB). This is by no means a full evaluation, just the result of having a casual look. I visited them with Till and Maria of Wikimedia Germany a week ago, and Sebastian Brückner kindly agreed to take a peek.
At the bottom is the full mail in German, but I'll try to give a quick summary of the main points in English here:
1) CSS uses a:hover but is missing a:focus; Thus, there's no highlighting when navigating links with the keyboard. This should be trivial to fix - or are there any problems with this?
2) The tab order is inconvenient. IE8 und FF3.6 show first the search box, then the show/hide toggles from the sidebar, then content, then the top bar, and only then the actual navigation items from the sidebar. This is probably because the toggles get inserted by JS, i guess. Opera 10 goes to searchm then the toggles, then back to search. That's bad.
3) hidden (collapsed) menus use display:none. This makes them inaccessible to screen readers, etc. Alternative ways for hiding them might be better - such as setting the hight to 0. Has this been tried?
Also, would it be possible to detect at least the most popular screen reader plugins with JS, so a special mode could be triggered for the visually impaired?
4) Tables are used for layout a lot. This is mostly true for content, especially for Infoboxes, Navigation boxes, etc. This is quite bad for screen readers. It's going to be very hard though to get wiki editors to use proper css based code for table layouts.
Perhaps it would be possible to make {|...|} generate a div-based layout using some magic word or option? This would be so easy with a real parser :) But doTableStuff() looks fairly sane, so perhaps it could be done.
5) In image thumbnail boxes, the "zoom" link is before the caption, so people have to skip over it every time. Perhaps it could be moved after the caption.
6) Image thumbnails have an empty alt attribute. This seems like a bug to me - was it always like this? I suggest to use the image's file name in the alt-attribute of the img tag, and also as the title of the link that wraps the thumbnail. After all, the target of that link is indeed the description of the image file. Could we just implement this, or are there any problems I didn't think of?
While there are some tricky issues (like the tables), most of the above should be fairly easy to fix. And would improve the experience for people with bad vision quite a lot. I'd volunteer to implement at least the easy changes, but it would be good to have some feedback first. So, what do you think?
-- daniel
-------- Original-Nachricht -------- Betreff: Usability von Wikipedia Datum: Fri, 18 Jun 2010 13:16:49 +0200 Von: Brückner, Sebastian Sebastian.Brueckner@dzb.de An: daniel.kinzler@wikimedia.de
Hallo Herr Kinzler,
wie im Gespräch am 11.06.2010 besprochen, habe ich einen Blick auf den neuen Wikipedia-Skin geworfen.
Dabei sind mir einige verbesserungswürdige Punkte aufgefallen, teilweise sind (vermutlich) auch nicht viel Handgriffe zu tun.
Positiv hervorzuheben ist der hohe Kontrast der Überschriften, Links und Texte sowie die Skalierbarkeit der Seite, ohne das Überlappungen oder Abschneidungen auftreten.
Ein schnell zu erledigender Punkt wäre die Ergänzung von a:focus zu a:hover im CSS, da bei Tastaturbedienung keinerlei Fokushervorhebung auftrat. Bei Mausbedienung wird hingegen eine Unterstreichung bei den Links hinzugefügt. Hinderlich oder irritierend könnte die "ungewöhnliche" Tab-Reihenfolge sein. Im IE8 und FF3.6 werden zuerst das Suchfeld, dann die 3-4 Aufklapplinks der Navigation, der Inhaltsbereich, der Header und anschließend erst die restlichen Navigationlinks und der Footer angesprungen. Im Opera 10 konnte ich hingegen nur die Suche und die Aufklapplinks antabben.
Auf der Startseite fiel mir auf, dass die unaufgeklappten Links mit display:none; versteckt werden, damit sind sie allerdings auch für Screenreadernutzer nicht auffindbar. Lösungsmöglichkeit wären z.B. die Positionierung außerhalb des sichtbaren Bereichs oder die Höhe auf 0 setzen. Zudem wurden Layouttabellen verwenden, es sind nur vier Zellen, was keine große Barriere darstellt, allerdings wäre auch diese mit wenig CSS vermeidbar. Ebenso ließen sich die doppelten Links vermeiden, die durch die getrennte Verlinkung von Icons und Texten auftritt. En masse tritt dies bei den Portallinks und Schwesterprojekten der Startseite auf.
Auf einer Inhaltsseite (die von Leipzig) fielen mir ebenfalls Layouttabellen auf, hier aber nur ein- oder zweizellig, aber grad deswegen eigentlich gut ersetzbar. Sämtliche Thumbnails an der rechten Seite des Inhaltsbereichs enthielten leere alt-Attribute. Das ist schon mal besser als gar keine, allerdings übergehen manche Screenreader solche Grafiken dann. Da nach der Grafik auch erst der vergrößern-Link folgt, ist der "Weg" zur Bildunterschrift doch länger als nötig. Vllt. könnte man hier die Reihenfolge optimieren oder die Bildunterschrift als Alternativtext vergeben, was aber natürlich zu ebenso unschönen Dopplungen führen kann.
Ich hoffe dass es sich nicht allzu schlecht anhört, denke aber das einige Punkte schnell behoben werden können. Eine Begutachtung der Bearbeiten-Seite war mir aus Zeitgründen noch nicht möglich, dass würde ich Anfang/Mitte nächster Woche nachholen. Dann auch gern mit einem blinden Kollegen aus unserem Haus.
Für Rückfragen und Anmerkungen stehe ich natürlich gern zur Verfügung.
Mit wochenendlichen Grüßen Sebastian Brückner
--- Sebastian Brückner Deutsche Zentralbücherei für Blinde zu Leipzig Informatik Telefon: (03 41) 71 13-180 Fax: (03 41) 71 13-125 E-Mail: sebastian.brueckner@dzb.de