WebAIM - Web Accessibility In Mind

E-mail List Archives

An ARIA slider example that supports graceful degradation

for

From: Bryan Garaventa
Date: Dec 9, 2011 8:12PM

In case it's of interest.

----- Original Message -----
From: Bryan Garaventa
To: <EMAIL REMOVED>
Sent: Friday, December 09, 2011 7:12 PM
Subject: Re: [free-aria] An ARIA slider example that supports graceful degradation


I totally understand. I've enhanced the slider label using aria-label. Is this what you had in mind?
http://whatsock.com/modules/aria_slider_module/demo.htm
Plus the slider now controls a floating window shutter instead, which opens below the slider.
I forgot to answer your question about devs controling the min/max values. This is actually controled from the config object in
http://whatsock.com/modules/aria_slider_module/js/setup.js
where all of these things are dynamically generated when the page loads. It's pretty basic.

----- Original Message -----
From: Vinnie Young
To: <EMAIL REMOVED>
Sent: Friday, December 09, 2011 9:45 AM
Subject: Re: [free-aria] An ARIA slider example that supports graceful degradation


For start and end I just mean descriptive text. For example, if I have a time/progress slider for a video if I have 0:00 for the start time and 3:45 for the end time it would be more useful for me if I heard:
Start time: 0:00 (slider handle/current time info) End time 3:45


On Fri, Dec 9, 2011 at 9:15 AM, Bryan Garaventa < <EMAIL REMOVED> > wrote:

Thanks :) There are some bugs in the queue that I'll be working on.
E.G.
a) When using PageUp the slider visually surpasses the slider bounds; I'll be changing the val2pixel/pixel2val calculations a bit.
b) IE versions less than 9 don't support the CSS transform property so the bubble doesn't rotate; I'm planning to change the metaphor to use a window shutter instead which will work for all browsers.
c) Using PageUp should increase rather than decrease and visa versa; I'll switch the keycodes for these.
d) The color contrast for the slider outline is too light when it receives focus; I'll use a brighter color for this.
Plus some other CSS stuff.

For start and end, do you mean constraint information? Such as when tabbing or arrowing? Since the numbers are usually included in the page as text I can see how this would get redundant when arrowing, but using aria-labelledby or aria-describedby it should be possible to include this in the slider without impacting the text, and then it should be conveyed when tabbing and arrowing. I'll need to experiment a bit more with these.

----- Original Message -----
From: Vinnie Young
To: <EMAIL REMOVED>
Cc: WebAIM Discussion List
Sent: Friday, December 09, 2011 8:43 AM
Subject: Re: [free-aria] An ARIA slider example that supports graceful degradation


Couple quick comments:

1: Awesome.
2: What about allowing hidden text for the start and end? (e.g. 0 Degress and 360 Degress or Degress: 0 and Degress: 360)
3. So, 360 is a good example where it take a while to get to the end. Maybe have a special key command that increments by a divisor set by the creator?
4: At first glance, was not able to get this to work on IOS.


On Wed, Dec 7, 2011 at 10:13 PM, Bryan Garaventa < <EMAIL REMOVED> > wrote:

When I saw the post a couple of days ago about Google sliders not supporting backwards compatibility with
non-ARIA equipped screen readers, I thought this might be a good experiment for implementing an ARIA slider that includes graceful degradation.

The demo is at
http://whatsock.com/modules/aria_slider_module/demo.htm

Instructions:
• Mouse users can drag the slider to rotate the bubble image by 360 degrees.
• Keyboard only users can tab to the slider and:
1. Press the Left/Right arrow keys to move the slider in increments of 1;
2. Press the End/Home keys to move to the first or last value;
3. Press the PageUp/PageDown keys to move the slider in increments of 10%.
• Users of screen readers that support ARIA can Arrow or Tab to the slider, press Enter or Spacebar to activate it, then use all of the above key commands as well.
• Users of screen readers that don't support ARIA can Arrow to and activate the link "Open Manual Slider", and use a traditional selector instead to manually move the slider control.

Bryan

--
You received this message because you are subscribed to the Google Groups "Free ARIA Community" group.
To post to this group, send email to <EMAIL REMOVED> .
To unsubscribe from this group, send email to free-aria+ <EMAIL REMOVED> .
For more options, visit this group at http://groups.google.com/group/free-aria?hl=en.




--
You received this message because you are subscribed to the Google Groups "Free ARIA Community" group.
To post to this group, send email to <EMAIL REMOVED> .
To unsubscribe from this group, send email to free-aria+ <EMAIL REMOVED> .
For more options, visit this group at http://groups.google.com/group/free-aria?hl=en.


--
You received this message because you are subscribed to the Google Groups "Free ARIA Community" group.
To post to this group, send email to <EMAIL REMOVED> .
To unsubscribe from this group, send email to free-aria+ <EMAIL REMOVED> .
For more options, visit this group at http://groups.google.com/group/free-aria?hl=en.




--
You received this message because you are subscribed to the Google Groups "Free ARIA Community" group.
To post to this group, send email to <EMAIL REMOVED> .
To unsubscribe from this group, send email to free-aria+ <EMAIL REMOVED> .
For more options, visit this group at http://groups.google.com/group/free-aria?hl=en.