WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

Number of posts in this thread: 6 (In chronological order)

From: Birkir Rúnar Gunnarsson
Date: Fri, Aug 27 2010 9:18AM
Subject: Fwd: Examples of bad web page designs, for a presentation
No previous message | Next message →

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 ADDRESS 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 ADDRESS 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

From: Bevi Chagnon | PubCom
Date: Fri, Aug 27 2010 9:27AM
Subject: Re: Fwd: Examples of bad web page designs, for a presentation
← Previous message | Next message →

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 ADDRESS 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

From: Birkir Rúnar Gunnarsson
Date: Fri, Aug 27 2010 9:36AM
Subject: Re: Fwd: Examples of bad web page designs, for a presentation
← Previous message | Next message →

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.
Thanks
-Birkir


On 8/27/10, Bevi Chagnon | PubCom < = EMAIL ADDRESS 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 ADDRESS 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
>
>

From: Stephan Wehner
Date: Fri, Aug 27 2010 2:03PM
Subject: Re: Fwd: Examples of bad web page designs, for a presentation
← Previous message | Next message →

2010/8/27 Birkir Rúnar Gunnarsson < = EMAIL ADDRESS 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?

Stephan


> Thanks
> -Birkir
>
>
> On 8/27/10, Bevi Chagnon | PubCom < = EMAIL ADDRESS 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 ADDRESS 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
>>
>>

From: Margit Link-Rodrigue
Date: Fri, Aug 27 2010 2:45PM
Subject: Re: Fwd: Examples of bad web page designs, for a presentation
← Previous message | Next message →

I live in Baton Rouge, Louisiana, and the City of Baton Rouge site is so
outdated that you will find plenty of simple accessibility issues. Granted,
Louisiana has such a bad budget deficit, not much is going forward here at
all.

http://brgov.com/govt/


- no skip navigation
- bad use of image alt attribute
- no heading markup
- link to an inaccessible video page

From: Chris Hoffman
Date: Fri, Aug 27 2010 10:54PM
Subject: Re: Fwd: Examples of bad web page designs, for a presentation
← Previous message | No next message

My perennial favorite example of inexplicably inaccessible web design
is at www.assistivetek.com. It is truly something to behold.

On Fri, Aug 27, 2010 at 4:42 PM, Margit Link-Rodrigue < = EMAIL ADDRESS REMOVED = > wrote:
> I live in Baton Rouge, Louisiana, and the City of Baton Rouge site is so
> outdated that you will find plenty of simple accessibility issues. Granted,
> Louisiana has such a bad budget deficit, not much is going forward here at
> all.
>
> http://brgov.com/govt/
>
>
>   - no skip navigation
>   - bad use of image alt attribute
>   - no heading markup
>   - link to an inaccessible video page
>