WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Javascript animation and screen reader focus

for

From: Vincent Young
Date: Sep 4, 2011 4:48AM

Hi Birkir,

I do like what Hans Hillen has done with his carousel at
http://hanshillen.github.com/jqtest/#goto_carousel. It's a good example of
how we might begin to start adding ARIA into the mix.

I've put together a simple progressively enhanced example sans ARIA (sorry,
this was made in haste) using jQuery that mimics the look and fell of your
http://nxtbgthng.com/ example:

http://www.webhipster.com/testing/accessibility/carousel/

Four image links above and an unordered list with four in-page links to each
of the image links above. When you click on the in-page link it focuses the
corresponding image link above. If you TAB again it throws focus back to
the originating in-page link. This seemed to make sense at the moment...

Testing in in IE9/JAWS 12 and FF6/NVDA seemed to give me no problems. Let
me know if you have questions about this implementation.
Comments/suggestions from all welcome.

Best,
Vincent



On Fri, Sep 2, 2011 at 11:10 PM, Birkir R. Gunnarsson <
<EMAIL REMOVED> > wrote:

> Good day to all.
>
> I realized that the issue I elluded to in my last post, really boils
> down to problems with Javascript animation (such as carousels, and
> other objects), that seem to disrupt screen reader usage, and if there
> is a recomended technique to prevent this from happening, either by
> somehow telling the screen reader to ignore it, or to hide it fro the
> screen reader.
> The page I had issues with
> http://www.okbeint.is
> has a carousel of photos, and two of my screen readers that I have
> tested jump around, react sluggishly and the page even crashes in one
> of them (though I suspect it could be a Jaws with IE9 issue, perhaps
> specific to my computer).
> However, the accessible photo carousel at: http://nxtbgthng.com/ does
> not do this.
> I need to do further testing, and analyzing the code, but a quick
> Google search of terms such as "prevent javascript animation moving
> screen reader focus" did not yield anything useful.
> Is there some one recommended technique that can be used in this scenario?
> For Flash there are guidelines that help:
> http://webaim.org/techniques/flash/
>
> I'm happy looking at accessible carousels (I remember there was a
> topic on it a few weeks back),and test them, but if there is a
> universally recommended technique here, it'd be good to be aware of
> it.
> Thanks to all, and to all a good weekend.
> -B
>