WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Regarding a slideshow plugin for jQuery

for

From: Ryan Hemphill
Date: Nov 13, 2011 11:51AM

Good point, Yucca. I never thought about legibility as a of function of
language. Well put.

Having thought a little about the slideshow idea, I have some more
suggestions.

If we are assuming that you are only using titles for displayed graphics,
make it so that notifications can be toggled on/off by adding or removing
aria-live from the title container. This way, instead of having to
interrupt the functionality of your design too much, it keeps things clean
and simple.

If you are doing more than that, however - I think you are going to have to
use the links provided in the 'linking' example. Note that you should
include a focus target <div id="foo" tabindex="0">target</div> in the
content of that next slide as well, either jumping to it via anchor link
(href="#foo") or by somehow triggering a focus change such as
getElementById('foo').focus() .

Be aware, though - focus management can be fussy in some plugins, so you'll
want to test the functionality before committing to any javascript magic.
I remember having some really big headaches with a jquery plugin for modal
windows that somehow managed to override the .focus() method. I fixed it,
but would have preferred to move on to another plugin if I had the option,
which it sounds like you do.

There's plenty of other things that can be done with this idea to trick out
the a11y, but I'm going to stop there.

Good luck and have fun tinkering. It looks like a neat concept.



Ryan


On Sun, Nov 13, 2011 at 7:43 AM, Ryan Hemphill < <EMAIL REMOVED>
> wrote:

> Having looked at the examples, I would have to agree that the slide widget
> is not accessible, natively. From an ARIA persepctive, however - the
> cycling slideshow could be made accessible if aria-live were added to the
> content for slides as they come up. However, this poses another issue -
> which is whether that could be annoying by itself.
>
> The links themselves are only listed as links, so that is not helpful or
> accessible.
>
> I would suggest the following.
>
> Create a button that is available for screen readers only (the old css
> left-margin:-200px) and use that to turn on/off the cycling of the images,
> include further hidden text that says the content come up as notifications
> and tell them how they can use the widget to interact with the slideshow in
> any other meaningful ways, such as clicking on the content to go to the
> place where things can be downloaded.
>
> That's all I got.
>
> button command to start/stop, aria-live="polite", and explanations on how
> to use it effectively.
>
>
>
>
> On Sun, Nov 13, 2011 at 7:29 AM, Ryan Hemphill <
> <EMAIL REMOVED> > wrote:
>
>> The lorem ipsum is typical for designers - they use it as content when
>> they want to demo a design but want to make sure the people being presented
>> to don't focus on the content itself..
>>
>>
>> On Sun, Nov 13, 2011 at 12:56 AM, Kevin Chao < <EMAIL REMOVED> >wrote:
>>
>>> I'm using Firefox and NVDA. In both examples, i'm able to see slide
>>> number, where slide content should be, next/previous controls, and
>>> links to jump to specific slide.
>>>
>>> However, in standard first example, the content is not at all
>>> accessible, it seems to be displayed in an graphic/image.
>>>
>>> Second basic example seems to be accessible, but text is not in English:
>>> (slide 1)
>>> "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
>>> eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
>>> minim veniam, quis nostrud exercitation ullamco laboris nisi ut
>>> aliquip ex ea commodo consequat."
>>>
>>> The user interface and experience of basic example is very nice and
>>> accessible though.
>>>
>>> Kevin
>>>
>>> On 11/12/11, curobs < <EMAIL REMOVED> > wrote:
>>> > I am wondering if this slideshow plugin for jQuery is accessible?
>>> > http://slidesjs.com/
>>> >
>>> > Here's a demo on how it looks un-styled,
>>> > http://slidesjs.com/examples/simple/
>>> >
>>> > I have not used screenreaders, but based on little of what I know about
>>> > them, is this something that screenreaders could navigate easily and
>>> > logically? I was wondering how a screenreader would read the main text
>>> after
>>> > it reads the Next link, considering that it follows after the main
>>> text? I
>>> > suppose I could move the Previous and Next links to the top of the
>>> slide
>>> > heading (e.g. "Slide 1").
>>> >
>>> > What do you think?
>>> >
>>> > Carrie
>>> >
>>> >