WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Regarding a slideshow plugin for jQuery

for

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

From: curobs
Date: Sat, Nov 12 2011 3:09PM
Subject: Regarding a slideshow plugin for jQuery
No previous message | Next message →

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

From: Kevin Chao
Date: Sat, Nov 12 2011 10:54PM
Subject: Re: Regarding a slideshow plugin for jQuery
← Previous message | Next message →

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 ADDRESS 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
>
>

From: Ryan Hemphill
Date: Sun, Nov 13 2011 5:27AM
Subject: Re: Regarding a slideshow plugin for jQuery
← Previous message | Next message →

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 ADDRESS 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 ADDRESS 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
> >
> >

From: Ryan Hemphill
Date: Sun, Nov 13 2011 5:45AM
Subject: Re: Regarding a slideshow plugin for jQuery
← Previous message | Next message →

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 ADDRESS 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 ADDRESS 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 ADDRESS 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
>> >
>> >

From: Jukka K. Korpela
Date: Sun, Nov 13 2011 6:27AM
Subject: Re: Regarding a slideshow plugin for jQuery
← Previous message | Next message →

2011-11-13 14:29, Ryan Hemphill 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..

Lorem ipsum texts are used by force of habit, but if you ask for a
reason, then you might get an explanation like the above - if the
designer has an idea of the reason and he can articulate it. And there
is some sense in the idea, because people tend to consider things like
content of text when they should focus on visual design. But Lorem ipsum
is still bad for several reasons.

It postulates familiarity with the idea, quite unnecessarily - we should
not require any such special knowledge from testers and reviewers. It
also has a slightly elitistic tone, using pig Latin instead of English
text like "This is an example." In our days, Latin is mostly used as a
write-only language, expected to look impressive.

But more seriously, it prevents people from considering text legibility.
If you don't actually read the text, you don't care much about ease of
reading in the technical sense, like size of letters, contrast between
text and background, and distinguishability of characters. This also
implies that if anyone tries to test the page using non-visual
rendering, the content will appear as mumbo-jumbo.

The character repertoire in Lorem ipsum texts is very limited, only
basic Latin letters and a few punctuation characters. This means that
considerations of legibility, typographic style, and proper rendering of
characters is tested insufficiently. Very few languages have such a
limited character repertoire - and English is not one of them.

The conclusion is that Lorem ipsum texts are a wrong paradigm. Whatever
dummy texts are used for illustration, design, testing, or evaluation of
pages where the actual text content is immaterial, the texts should be
typical of the intended use. This means using a real language, and
naturally the intended language(s) of the content.

Yucca

From: Ryan Hemphill
Date: Sun, Nov 13 2011 11:51AM
Subject: Re: Regarding a slideshow plugin for jQuery
← Previous message | No next message

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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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
>>> >
>>> >