WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Javascript animation and screen reader focus

for

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

From: Birkir R. Gunnarsson
Date: Sat, Sep 03 2011 12:09AM
Subject: Javascript animation and screen reader focus
No previous message | Next message →

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

From: Vincent Young
Date: Sun, Sep 04 2011 4:48AM
Subject: Re: Javascript animation and screen reader focus
← Previous message | No next message

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