WebAIM - Web Accessibility In Mind

E-mail List Archives

Fwd: Examples of bad web page designs, for a presentation


From: Birkir RĂșnar Gunnarsson
Date: Aug 27, 2010 9:18AM

Hello listers

I apologize if this is double postd.
I got no responses to the first one and I suspect it might not have
come through to the list.
Feel free to at least notify me off list that the mail made it through.
Perhaps this horse of a topic is so dead that people don't respond to
it any more, which is fine *smile*.
Happy weekend all.

---------- Forwarded message ----------
From: Birkir RĂșnar Gunnarsson < <EMAIL REMOVED> >
Date: Thu, 26 Aug 2010 16:34:32 +0000
Subject: Examples of bad web page designs, for a presentation
To: WebAIM Discussion List < <EMAIL REMOVED> >


I've been asked to give presentations at a Norwegian and Icelandic web
confrerences in the next couple of months. Basic introduction of
screen reading, the challenges it creates and common web navigation
problems (short and general enough so e.g. I can't get into the
details of, say, Ajax accessibility).
I am wondering about a couple of things and samples to give and if
anyone can give me a good web page example of such behavior (I can
find those myself, of course, but if someone knows off them right
away, that'd be cool, also if someone has a lot of experience with
such presentations, any tidbits of knowledge that would be good to
Firstly at CSUN my colleague saw a presentation, I think from one of
the god folks at W3C, where they had the same ewb site with same looks
but two versions, one that was very accessible, other version was very
badly designed. Visually it looked the same but to a screen reader it
was night and day to navigate. Does anyone know which web site this
might be referring to?
Also I am looking for a few specific examples.
One would be a heading that is created visually by indenting text but
not with an html heading.
Another would be a page using the relative location of the text to
indicate the purpose of a graphic or button, rather than a label
(something where the text clearly shows visually that this button does
X, but button is not labelled so a blind user, not having the benefit
of spatial layout of the page, cannot deduce this from the context).
Then a page with unlabelled edit fields or form elements.
or a page where the labels for all fields are read first and then all
the edit fields come after, leaving the user to guess which label
belongs to which field (I often see this with state/city/zip code in
forms, for instance).
Finally, if anyone knows of an example of an ungraceful recovery,
where user has to use a mouse to get out of a page that'd be kind of
neat to show I think (i.e. gets into a loop where keyboard cannot get
the user out of).
Possibly I was wondering of a page with live regions that update, I am
not even 100% sure how that wors with, say, Jaws, I suppose Jaws would
ignore them unless an Aria control was implemented with sufficient
priority to grab focus and move it to the updated area, but I suspect
this might be getting too technical, plus I have to do better studying
of Aria myself before presenting it much.

This is a blindness specific talk. I will point out problems with
other disability groups as well, but the majority of the presentation
will be to explain screen readers and how they are used to access web
sites, as well as pointing out pit falls.
Any feedback/ideas/examples would be very much appreciated.
Thanks guys