WebAIM - Web Accessibility In Mind

E-mail List Archives

GAAD - accessibility triathlon


From: Birkir R. Gunnarsson
Date: Apr 27, 2013 12:15PM

Hey guys

In honor of Global Accessibility Awareness Day (GAAD) I was thinking
about creating an accessibility triathlon for website people (the idea
and promotion come from Iceland, but it could easily be translated and
posted somewhere in English as well).
The idea would be to give website developers, content providers or
other professionals a few tasks to accomplish.
1. With keyboard alone.
2. With low color contrast, and
3. With NVDA and Twitter

For keyboard only I would want to find:
a. A mainstream site that does not show keyboard focus outline.
b. Find a mainstream site with a clickable div or span element with no
keyboard handler, preferably a key action such as "add to cart" or
something equally important.

For color contrast I was thinking of asking people to change contrast
settings in the Firefox developer toolbar, or something that is
simple, easy and can be reversed with the click of a button (the No
Coffee simulator is a different way of course).
Then I need to find a couple of pages with bad color contrast and ask
users to find some information on that site.

The third part, screen readers, involves downloading NVDA, and doing a
few exercises with NVDA and Twitter, finding the timeline, reading
your Direct messages and following a user.
(all the actions would come with instructions on precisely what to do,
I know this will quickly date the exercise, as Twitter is ever
evolving, but it would be easy to adjust this to next year or find a
different site).
The problem I want to point out with Twitter have to do with hiding
and displaying contect without notifying the user, putting the new
html at the endof the html but positioning it with CSS so it seems
relevant (directmessages), and insufficient information on the
"follow" links.
At least the first one could be solved by using aria-expanded, the
lsat one by using aria-described by or aria-labelled by to add the
user name to the label or content of the link.
Themiddle one could be done with Javascript focus change or injecting
the new info into the html at a more appropriate location.
But baisically I would want people to think about things and come up
with solutions, not prescribe them.

I can post the twitter part on Monday once I have verified them with
some sighted friends.
If you have ideas for parts 1 and 2, example of sites, it'd be great.
I would prefer to use mainstream news sites, online stores or
something like that. I know that Before and After Demo (BAD) is a
great resource and a good demo, but I want people to understand this
is going on all around us in the real world, not in a simulated

If there is interest in translating and posting this somewhere, feel
free to let me know.
I am hoping this would take a regular person about 60 to 90 minutes
max, I am interspersing the 3 things with some questions, and the idea
would be to encourage people to share their findings via blogs or
social media.
I know this is not a disability simulation exercise, I know that
caused quite a bit of discussion a few months back, but I just
think/hope this might be a neat idea to get mainstream developers a
little taste of accessibility issues.
p.s. If you think this would not work, feel free to point it out as
well, I wouldn't take it personally in any way.