WebAIM - Web Accessibility In Mind

E-mail List Archives

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


From: Stephan Wehner
Date: Aug 27, 2010 2:03PM

2010/8/27 Birkir Rúnar Gunnarsson < <EMAIL REMOVED> >:
> Thanks very much for that pointer, and amusing url.
> I am thinking specifically from a blind user accessibility perspective
> (for this particular purpose).
> I am thinking of demoing a few things that look, visually, fine and
> well organized but, because structured html was not used or label not
> correctly applied, completely fail for screen reader users or, at
> best, are majorly confusing.
> I am mostly thinking about tables that are created by tabs or spacing
> rather than the table tag, ditto for a heading, label text located
> directly above or next to a button without being the button label,
> those kind of things.
> The topic is specifically how blind people navigate the web and what
> problems they encounter.

Is facebook a good example?


> Thanks
> -Birkir
> On 8/27/10, Bevi Chagnon | PubCom < <EMAIL REMOVED> > wrote:
>> There are several websites devoted to this topic, and the most well-known is
>> http://www.webpagesthatsuck.com/
>> (I did not make up that URL!)
>> But, what do you mean by "bad design?"
>> -- bad design for accessibility?
>> -- bad visual design & aethestics?
>> -- poor site architecture and organization of the content?
>> -- poor navigation aides?
>> -- failure to communicate the message or mission of the site's owners?
>> -- inaccurate or misleading information?
>> Just curious!
>> --Bevi Chagnon
>> :   :   :   :   :   :   :   :   :   :   :   :   :   :   :   :   :   :   :
>> :   :   :   :   :   :   :   :   :   :   :  :   :
>> Bevi Chagnon  |  PubCom  |   <EMAIL REMOVED>  |  301-585-8805
>> Government publishing specialists, trainers, consultants  | print, press,
>> web, Acrobat PDF & 508
>> Online at the blog:   It’s 2010. Where’s your career heading?
>> www.pubcom.com/newsletter
>> -----Original Message-----
>> [mailto: <EMAIL REMOVED> ] On Behalf Of Birkir Rúnar
>> Gunnarsson
>> Sent: Friday, August 27, 2010 11:18 AM
>> To: WebAIM Discussion List
>> Subject: [WebAIM] Fwd: Examples of bad web page designs, for a presentation
>> 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.
>> -Birkir
>> ---------- 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> >
>> Listers
>> 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 cover)?
>> 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
>> -Birkir