WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Rotating images (javascript)

for

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

From: Jan Heck
Date: Fri, Oct 28 2011 4:09PM
Subject: Rotating images (javascript)
No previous message | Next message →

Just got the WebAIM newsletter with the following quick tip:

"Animation or other moving elements on a web page can be distracting to
all users. Even simple animation can render a web page completely
inaccessible to users with certain cognitive disabilities or high levels
of distractibility. Animation should generally be avoided."


My question is this: A disability services agency who has asked my help in
checking the accessibility of their not-yet-built new site has an element
in the design that concerns me. In the masthead, top of page, they want to
place an area for rotating images--essentially, icons that represent the
various services they offer or the various disability groups they serve
(can't remember which). The Web designer plans to implement this feature
via Javascript. This is not the only place this information will be
available on the page, so it's more for visual interest. I was told in the
past that when images rotate or change on a page, it can cause some
screenreaders to hiccup and maybe even start reading the page over again
from the top. I don't know if that's correct or if I'm remembering it
correctly.

Other than the distraction element mentioned in the newsletter quick tip,
are there additional good reasons why this rotating image area should not
be implemented? Does it cause any problems for screenreaders or for any
other assistive software?

If it *is* OK to use such a script, is it OK to use null alt text, since
the info about the various groups served will appear elsewhere on the page?

Thanks for any insight into this issue!

Jan Heck

From: Jared Smith
Date: Fri, Oct 28 2011 4:30PM
Subject: Re: Rotating images (javascript)
← Previous message | Next message →

You are correct that animating images might disrupt screen reader
accessibility. It depends on how they are implemented. If the screen
reader is currently reading and image when that image disappears from
the page or is replaced by another image, this can cause it to lose
focus and start reading elsewhere. There are methods for implementing
this type of carousel so that this issue can be avoided.

As Vincent indicated, you should provide an option to stop or pause
the animation. This is a WCAG 2.0 Level A requirement for content that
animates for more than 3 seconds.

Regarding the null alt text, if the content is presented elsewhere,
this would likely be OK. However, if the image the only thing within a
link, it must be given alternative text, even if that text is
redundant with text later on the page.

Jared Smith
WebAIM.org

From: Vincent Young
Date: Fri, Oct 28 2011 4:36PM
Subject: Re: Rotating images (javascript)
← Previous message | No next message

"Animation or other moving elements on a web page can be distracting to
all users. Even simple animation can render a web page completely
inaccessible to users with certain cognitive disabilities or high levels
of distractibility. Animation should generally be avoided."

I wouldn't take this too far... completely removing any moving pixel on the
screen. Rotating images can be helpful, intuitive, and informative. I would
look into Bryan's implementation where the user is given the ability to
start/stop the animation:

http://www.whatsock.com <http://www.whatsock.com%20>;

In current screen readers, the likely hood that a continuous animation will
cause a hiccup is not something I would worry about int he case of simple
rotating images.

"If it *is* OK to use such a script, is it OK to use null alt text, since
the info about the various groups served will appear elsewhere on the page?"

Depends... Would need to look at how this is implemented.





On Fri, Oct 28, 2011 at 3:10 PM, Jan Heck < = EMAIL ADDRESS REMOVED = > wrote:

> Just got the WebAIM newsletter with the following quick tip:
>
> "Animation or other moving elements on a web page can be distracting to
> all users. Even simple animation can render a web page completely
> inaccessible to users with certain cognitive disabilities or high levels
> of distractibility. Animation should generally be avoided."
>
>
> My question is this: A disability services agency who has asked my help in
> checking the accessibility of their not-yet-built new site has an element
> in the design that concerns me. In the masthead, top of page, they want to
> place an area for rotating images--essentially, icons that represent the
> various services they offer or the various disability groups they serve
> (can't remember which). The Web designer plans to implement this feature
> via Javascript. This is not the only place this information will be
> available on the page, so it's more for visual interest. I was told in the
> past that when images rotate or change on a page, it can cause some
> screenreaders to hiccup and maybe even start reading the page over again
> from the top. I don't know if that's correct or if I'm remembering it
> correctly.
>
> Other than the distraction element mentioned in the newsletter quick tip,
> are there additional good reasons why this rotating image area should not
> be implemented? Does it cause any problems for screenreaders or for any
> other assistive software?
>
> If it *is* OK to use such a script, is it OK to use null alt text, since
> the info about the various groups served will appear elsewhere on the page?
>
> Thanks for any insight into this issue!
>
> Jan Heck
>
>
>