WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: jquery effects accessible?

for

From: Karl Groves
Date: Dec 19, 2013 7:28PM

Jonathan,

The short answer is that the pulsate effect itself is not inaccessible,
with the huge caveat that it depends on what you're using it for. So as
always the first question to ask is "What is this thing and what does it
do?"

Based on the use case you describe, the pulsate effect could actually be
good for accessibility, if it was combined with some other means of
conveying information.

Consider for a moment how this is to be used: " if the user clicks on
another button in the pool, it pulsates to convey that it cannot be moved
and that the list is full" This is great! For those who use Macs, you can
actually set your computer to do something similar by going to System
Preferences > Accessibility > Audio and then selecting the checkbox that
says: "Flash the screen when an alert sound occurs." This feedback
mechanism is good for users who are hard of hearing.

Thing is, it isn't enough on its own. So back to "What is this thing and
what does it do?": It indicates to the user that their attempt to do
something won't succeed - if you can see it. The pulsate effect is achieved
by quickly alternating some CSS properties. If you cannot see, cannot see
well, have turned off CSS, or created custom user styles, this will not be
noticed by users and, as a consequence, another manner of indicating this
same sort of messaging should be provided. This could be as simple as an
additional text message indicating to the user what's going on.

Quick demo at http://jsfiddle.net/karlgroves/aNagL/1/


On Thu, Dec 19, 2013 at 9:18 AM, Jonathan Pund < <EMAIL REMOVED> >wrote:

> I have an app that is using the "pulsate" jquery effect (
> http://api.jqueryui.com/pulsate-effect/). Here's the context: the user
> needs to choose ten items from a pool, and does so by click on the button
> corresponding to the item. When the list is full, if the user clicks on
> another button in the pool, it pulsates to convey that it cannot be moved
> and that the list is full. These are my questions:
> 1) Is this effect accessible "straight out of the box" from the
> jquery package? Or do I need to make some additions to the code to make is
> accessible?
> 2) Does this violate 508 or any other accessibility mandate by
> only conveying the user "error" with a visual effect? I know that would be
> the case if you were using only color or only sound, but what about only a
> visual effect?
>
> Thanks in advance,
> Jonathan
> > > >



--

Karl Groves
www.karlgroves.com
@karlgroves
http://www.linkedin.com/in/karlgroves
Phone: +1 410.541.6829