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(a)dzb.de>
An: <daniel.kinzler(a)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(a)dzb.de
--
--
Diese e-mail wurde auf Spam und Viren mit Astaro Security Gateway geprueft.