WebAIM - Web Accessibility In Mind

E-mail List Archives

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


From: Birkir Rúnar Gunnarsson
Date: Aug 27, 2010 9:36AM

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.

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