E-mail List Archives
Thread: jquery effects accessible?
Number of posts in this thread: 8 (In chronological order)
From: Jonathan Pund
Date: Thu, Dec 19 2013 7:18AM
Subject: jquery effects accessible?
No previous message | Next message →
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
From: Ryan E. Benson
Date: Thu, Dec 19 2013 9:05AM
Subject: Re: jquery effects accessible?
← Previous message | Next message →
Hi.
Yes this has accessibility issues and 508 violations. Visual effect is
equivalent to color.
508 violations:
1194.22(c) color - since you are pulsating the background, this is like
using color alone to convey meaning.
1194.22(j) flicker.
You also may have some in 1194.21, and .31. On the jQuery page, the div is
not keyboard navigable. To fix this, you should be able to add
tabindex='-1'.
--
Ryan E. Benson
On Thu, Dec 19, 2013 at 9:18 AM, Jonathan Pund < = EMAIL ADDRESS 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
> > > >
From: Jonathan Pund
Date: Thu, Dec 19 2013 12:27PM
Subject: Re: jquery effects accessible?
← Previous message | Next message →
Okay, thanks for that. I forgot that it is actually an anchor, not a div, so it is keyboard navigable. What I was really hoping for was to ask if jquery has accessibility built into it so that, if a user action triggers the pulsate effect, it would notify the user via ARIA techniques. I have heard that jquery does well with incorporating them into their widgets and the like, so I was wondering if anyone knew if they also incorporate the ARIA techniques into their effects, such as the pulsate effect.
Additionally, I do not believe that the pulsate effect is the same as using color only to convey meaning. Even if one were to turn off all color and make everything black and white, the pulsate effect would still convey meaning. Any other thoughts on this?
-----Original Message-----
From: Ryan E. Benson [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Thursday, December 19, 2013 10:06 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] jquery effects accessible?
Hi.
Yes this has accessibility issues and 508 violations. Visual effect is equivalent to color.
508 violations:
1194.22(c) color - since you are pulsating the background, this is like using color alone to convey meaning.
1194.22(j) flicker.
You also may have some in 1194.21, and .31. On the jQuery page, the div is not keyboard navigable. To fix this, you should be able to add tabindex='-1'.
--
Ryan E. Benson
On Thu, Dec 19, 2013 at 9:18 AM, Jonathan Pund < = EMAIL ADDRESS 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
> > > list messages to = EMAIL ADDRESS REMOVED =
>
From: Andrews, David B (DEED)
Date: Thu, Dec 19 2013 12:34PM
Subject: Re: jquery effects accessible?
← Previous message | Next message →
I cannot cite you chapter and verse of the law, but if the thing isn't perceivable by a segment of your audience, then it isn't good design -- it seems to me. A police car, ambulance, or fire truck doesn't just have a flashing light -- it has a siren too!
Dave
-----Original Message-----
From: = EMAIL ADDRESS REMOVED = [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of Jonathan Pund
Sent: Thursday, December 19, 2013 1:27 PM
To: 'WebAIM Discussion List'
Subject: Re: [WebAIM] jquery effects accessible?
Okay, thanks for that. I forgot that it is actually an anchor, not a div, so it is keyboard navigable. What I was really hoping for was to ask if jquery has accessibility built into it so that, if a user action triggers the pulsate effect, it would notify the user via ARIA techniques. I have heard that jquery does well with incorporating them into their widgets and the like, so I was wondering if anyone knew if they also incorporate the ARIA techniques into their effects, such as the pulsate effect.
Additionally, I do not believe that the pulsate effect is the same as using color only to convey meaning. Even if one were to turn off all color and make everything black and white, the pulsate effect would still convey meaning. Any other thoughts on this?
-----Original Message-----
From: Ryan E. Benson [mailto: = EMAIL ADDRESS REMOVED = ]
Sent: Thursday, December 19, 2013 10:06 AM
To: WebAIM Discussion List
Subject: Re: [WebAIM] jquery effects accessible?
Hi.
Yes this has accessibility issues and 508 violations. Visual effect is equivalent to color.
508 violations:
1194.22(c) color - since you are pulsating the background, this is like using color alone to convey meaning.
1194.22(j) flicker.
You also may have some in 1194.21, and .31. On the jQuery page, the div is not keyboard navigable. To fix this, you should be able to add tabindex='-1'.
--
Ryan E. Benson
On Thu, Dec 19, 2013 at 9:18 AM, Jonathan Pund < = EMAIL ADDRESS 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
> > > list messages to = EMAIL ADDRESS REMOVED =
>
From: Scott González
Date: Thu, Dec 19 2013 12:52PM
Subject: Re: jquery effects accessible?
← Previous message | Next message →
On Thu, Dec 19, 2013 at 2:27 PM, Jonathan Pund < = EMAIL ADDRESS REMOVED = >wrote:
> Okay, thanks for that. I forgot that it is actually an anchor, not a div,
> so it is keyboard navigable. What I was really hoping for was to ask if
> jquery has accessibility built into it so that, if a user action triggers
> the pulsate effect, it would notify the user via ARIA techniques. I have
> heard that jquery does well with incorporating them into their widgets and
> the like, so I was wondering if anyone knew if they also incorporate the
> ARIA techniques into their effects, such as the pulsate effect.
No, effects are effects, plain and simple. They have no semantic meaning on
their own.
> Additionally, I do not believe that the pulsate effect is the same as
> using color only to convey meaning. Even if one were to turn off all color
> and make everything black and white, the pulsate effect would still convey
> meaning. Any other thoughts on this?
>
That depends on how well the user is able to perceive the visual change.
You should probably use a live region to announce the error, or use
aria-describedby to point to an error message.
From: Jonathan C. Cohn
Date: Thu, Dec 19 2013 4:46PM
Subject: Re: jquery effects accessible?
← Previous message | Next message →
Does this flash? Flashing is a violation of Section 508.
Sent from my iPhone
> On Dec 19, 2013, at 2:27 PM, Jonathan Pund < = EMAIL ADDRESS REMOVED = > wrote:
>
> Okay, thanks for that. I forgot that it is actually an anchor, not a div, so it is keyboard navigable. What I was really hoping for was to ask if jquery has accessibility built into it so that, if a user action triggers the pulsate effect, it would notify the user via ARIA techniques. I have heard that jquery does well with incorporating them into their widgets and the like, so I was wondering if anyone knew if they also incorporate the ARIA techniques into their effects, such as the pulsate effect.
>
> Additionally, I do not believe that the pulsate effect is the same as using color only to convey meaning. Even if one were to turn off all color and make everything black and white, the pulsate effect would still convey meaning. Any other thoughts on this?
>
> -----Original Message-----
> From: Ryan E. Benson [mailto: = EMAIL ADDRESS REMOVED = ]
> Sent: Thursday, December 19, 2013 10:06 AM
> To: WebAIM Discussion List
> Subject: Re: [WebAIM] jquery effects accessible?
>
> Hi.
>
> Yes this has accessibility issues and 508 violations. Visual effect is equivalent to color.
>
> 508 violations:
> 1194.22(c) color - since you are pulsating the background, this is like using color alone to convey meaning.
> 1194.22(j) flicker.
>
> You also may have some in 1194.21, and .31. On the jQuery page, the div is not keyboard navigable. To fix this, you should be able to add tabindex='-1'.
>
> --
> Ryan E. Benson
>
>
> On Thu, Dec 19, 2013 at 9:18 AM, Jonathan Pund < = EMAIL ADDRESS 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
>> >> >> list messages to = EMAIL ADDRESS REMOVED =
>
> > >
From: Karl Groves
Date: Thu, Dec 19 2013 7:28PM
Subject: Re: jquery effects accessible?
← Previous message | Next message →
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 ADDRESS 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
From: Jim Allan
Date: Thu, Jan 09 2014 12:54PM
Subject: Re: jquery effects accessible?
← Previous message | No next message
Windows also has a similar system property
Control Panel > Ease of Access Center > Use text or visual alternatives for
sounds
you can flash the screen, or window, or caption bar (title bar).
I have used it with toggle keys (make a sound when I hit caps lock...which
I do lots)
Control Panel > Ease of Access Center > Make it easier to focus on tasks
so when I hit capslock, the computer beeps and the screen flashes.
Being able to use the build in system accessibility options for web
behaviours would be beneficial to many users. Though most mobile devices
don't have these type of features (yet, I hope), so some other means of
conveying that information needs to be developed.
Jim
On Thu, Dec 19, 2013 at 8:28 PM, Karl Groves < = EMAIL ADDRESS REMOVED = > wrote:
> 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 ADDRESS 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
> > > >
--
Jim Allan, Accessibility Coordinator & Webmaster
Texas School for the Blind and Visually Impaired
1100 W. 45th St., Austin, Texas 78756
voice 512.206.9315 fax: 512.206.9264 http://www.tsbvi.edu/
"We shape our tools and thereafter our tools shape us." McLuhan, 1964