WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Accessible Slide Show

for

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

From: Brian Lovely
Date: Fri, Apr 29 2016 2:55PM
Subject: Accessible Slide Show
No previous message | Next message →

I know there’s not much chance of creating an accessible slide show, but does anyone have any suggestions of how to present multiple screens of information on a single page? My initial thought is to just display them in a grid.

The type of slideshow I am thinking of is a sort of fancy navigation where you have a link to a page on a graphic along with some copy and/or a call to action. Like a picture of people sitting by a swimming pool with text saying “Sign up for a season pool pass” and a “sign up” link to the season pass page.


Brian Lovely

3264 Milton Ave
Columbus OH 43202

= EMAIL ADDRESS REMOVED =
513.319.8492

From: Timothy Hohne
Date: Fri, Apr 29 2016 3:44PM
Subject: Re: Accessible Slide Show
← Previous message | Next message →

You may want to check out slides.com <http://slides.com>; (there is also a free version of the underlying software). It is based on HTML and while I don’t believe it has great accessibility out of the box, it may be easily feasible to enhance.

Tim



On 4/29/16, 1:55 PM, "WebAIM-Forum on behalf of Brian Lovely" < = EMAIL ADDRESS REMOVED = on behalf of = EMAIL ADDRESS REMOVED = > wrote:

>I know there’s not much chance of creating an accessible slide show, but does anyone have any suggestions of how to present multiple screens of information on a single page? My initial thought is to just display them in a grid.
>
>The type of slideshow I am thinking of is a sort of fancy navigation where you have a link to a page on a graphic along with some copy and/or a call to action. Like a picture of people sitting by a swimming pool with text saying “Sign up for a season pool pass” and a “sign up” link to the season pass page.
>
>
>Brian Lovely
>
>3264 Milton Ave
>Columbus OH 43202
>
> = EMAIL ADDRESS REMOVED =
>513.319.8492
>
>
>
>
>>

From: Brian Lovely
Date: Fri, Apr 29 2016 4:10PM
Subject: Re: Accessible Slide Show
← Previous message | Next message →

I’ll have to check that out. This looks interesting, too: http://hanshillen.github.io/jqtest/#goto_carousel <http://hanshillen.github.io/jqtest/#goto_carousel>; Not sure if the hanshillen carousel supports multiple elements per slide or not.

I was looking at some hotel chain sites using VoiceOver. They were pretty problematic, especially carousels, so I started wondering how much they could retain the same look and feel while adding accessibility.

Brian Lovely

3264 Milton Ave
Columbus OH 43202

= EMAIL ADDRESS REMOVED =
513.319.8492




> On Apr 29, 2016, at 5:44 PM, Timothy Hohne < = EMAIL ADDRESS REMOVED = > wrote:
>
> You may want to check out slides.com <http://slides.com/>; <http://slides.com <http://slides.com/>;> (there is also a free version of the underlying software). It is based on HTML and while I don’t believe it has great accessibility out of the box, it may be easily feasible to enhance.
>
> Tim
>
>
>
> On 4/29/16, 1:55 PM, "WebAIM-Forum on behalf of Brian Lovely" < = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = > on behalf of = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >> wrote:
>
>> I know there’s not much chance of creating an accessible slide show, but does anyone have any suggestions of how to present multiple screens of information on a single page? My initial thought is to just display them in a grid.
>>
>> The type of slideshow I am thinking of is a sort of fancy navigation where you have a link to a page on a graphic along with some copy and/or a call to action. Like a picture of people sitting by a swimming pool with text saying “Sign up for a season pool pass” and a “sign up” link to the season pass page.
>>
>>
>> Brian Lovely
>>
>> 3264 Milton Ave
>> Columbus OH 43202
>>
>> = EMAIL ADDRESS REMOVED =
>> 513.319.8492
>>
>>
>>
>>
>> >> >> >> > > > >

From: James Nurthen
Date: Fri, Apr 29 2016 4:21PM
Subject: Re: Accessible Slide Show
← Previous message | Next message →

I would also check out the WAI tutorial on Carousels

On Fri, Apr 29, 2016 at 3:10 PM, Brian Lovely < = EMAIL ADDRESS REMOVED = > wrote:

> I’ll have to check that out. This looks interesting, too:
> http://hanshillen.github.io/jqtest/#goto_carousel <
> http://hanshillen.github.io/jqtest/#goto_carousel>; Not sure if the
> hanshillen carousel supports multiple elements per slide or not.
>
> I was looking at some hotel chain sites using VoiceOver. They were pretty
> problematic, especially carousels, so I started wondering how much they
> could retain the same look and feel while adding accessibility.
>
> Brian Lovely
>
> 3264 Milton Ave
> Columbus OH 43202
>
> = EMAIL ADDRESS REMOVED =
> 513.319.8492
>
>
>
>
> > On Apr 29, 2016, at 5:44 PM, Timothy Hohne < = EMAIL ADDRESS REMOVED = >
> wrote:
> >
> > You may want to check out slides.com <http://slides.com/>; <
> http://slides.com <http://slides.com/>;> (there is also a free version of
> the underlying software). It is based on HTML and while I don’t believe it
> has great accessibility out of the box, it may be easily feasible to
> enhance.
> >
> > Tim
> >
> >
> >
> > On 4/29/16, 1:55 PM, "WebAIM-Forum on behalf of Brian Lovely" <
> = EMAIL ADDRESS REMOVED = <mailto:
> = EMAIL ADDRESS REMOVED = > on behalf of = EMAIL ADDRESS REMOVED =
> <mailto: = EMAIL ADDRESS REMOVED = >> wrote:
> >
> >> I know there’s not much chance of creating an accessible slide show,
> but does anyone have any suggestions of how to present multiple screens of
> information on a single page? My initial thought is to just display them in
> a grid.
> >>
> >> The type of slideshow I am thinking of is a sort of fancy navigation
> where you have a link to a page on a graphic along with some copy and/or a
> call to action. Like a picture of people sitting by a swimming pool with
> text saying “Sign up for a season pool pass” and a “sign up” link to the
> season pass page.
> >>
> >>
> >> Brian Lovely
> >>
> >> 3264 Milton Ave
> >> Columbus OH 43202
> >>
> >> = EMAIL ADDRESS REMOVED =
> >> 513.319.8492
> >>
> >>
> >>
> >>
> >> > >> > https://urldefense.proofpoint.com/v2/url?u=http-3A__list.webaim.org_&d=CwIGaQ&c=DS6PUFBBr_KiLo7Sjt3ljp5jaW5k2i9ijVXllEdOozc&r=qOlXEeyKZeu-rZj6R-V1o17Do0v2f9RzbD3gfrpuBWE&m=zrZAT8SaM6qq490vynwVXsT27_Am040l-MGsEIIdNCo&s=wfxwrooBBtGRPrzPpGtlVV-m4qfJxYWVrO5SH3whFVQ&e> <
> https://urldefense.proofpoint.com/v2/url?u=http-3A__list.webaim.org_&d=CwIGaQ&c=DS6PUFBBr_KiLo7Sjt3ljp5jaW5k2i9ijVXllEdOozc&r=qOlXEeyKZeu-rZj6R-V1o17Do0v2f9RzbD3gfrpuBWE&m=zrZAT8SaM6qq490vynwVXsT27_Am040l-MGsEIIdNCo&s=wfxwrooBBtGRPrzPpGtlVV-m4qfJxYWVrO5SH3whFVQ&e> >
> >> List archives at
> https://urldefense.proofpoint.com/v2/url?u=http-3A__webaim.org_discussion_archives&d=CwIGaQ&c=DS6PUFBBr_KiLo7Sjt3ljp5jaW5k2i9ijVXllEdOozc&r=qOlXEeyKZeu-rZj6R-V1o17Do0v2f9RzbD3gfrpuBWE&m=zrZAT8SaM6qq490vynwVXsT27_Am040l-MGsEIIdNCo&s=9oPlIYadhzS0MgPAC3LhqrHAVyarEAHjyfcBk8NXxPE&e> <
> https://urldefense.proofpoint.com/v2/url?u=http-3A__webaim.org_discussion_archives&d=CwIGaQ&c=DS6PUFBBr_KiLo7Sjt3ljp5jaW5k2i9ijVXllEdOozc&r=qOlXEeyKZeu-rZj6R-V1o17Do0v2f9RzbD3gfrpuBWE&m=zrZAT8SaM6qq490vynwVXsT27_Am040l-MGsEIIdNCo&s=9oPlIYadhzS0MgPAC3LhqrHAVyarEAHjyfcBk8NXxPE&e> >
> >> > = EMAIL ADDRESS REMOVED = >
> > > > > http://list.webaim.org/>;
> > > http://webaim.org/discussion/archives>;
> > > = EMAIL ADDRESS REMOVED = >
> > > > >

From: James Nurthen
Date: Fri, Apr 29 2016 4:22PM
Subject: Re: Accessible Slide Show
← Previous message | Next message →

forgot the link... https://www.w3.org/WAI/tutorials/carousels/

On Fri, Apr 29, 2016 at 3:21 PM, James Nurthen < = EMAIL ADDRESS REMOVED = > wrote:

> I would also check out the WAI tutorial on Carousels
>
> On Fri, Apr 29, 2016 at 3:10 PM, Brian Lovely < = EMAIL ADDRESS REMOVED = > wrote:
>
>> I’ll have to check that out. This looks interesting, too:
>> http://hanshillen.github.io/jqtest/#goto_carousel <
>> http://hanshillen.github.io/jqtest/#goto_carousel>; Not sure if the
>> hanshillen carousel supports multiple elements per slide or not.
>>
>> I was looking at some hotel chain sites using VoiceOver. They were pretty
>> problematic, especially carousels, so I started wondering how much they
>> could retain the same look and feel while adding accessibility.
>>
>> Brian Lovely
>>
>> 3264 Milton Ave
>> Columbus OH 43202
>>
>> = EMAIL ADDRESS REMOVED =
>> 513.319.8492
>>
>>
>>
>>
>> > On Apr 29, 2016, at 5:44 PM, Timothy Hohne < = EMAIL ADDRESS REMOVED = >
>> wrote:
>> >
>> > You may want to check out slides.com <http://slides.com/>; <
>> http://slides.com <http://slides.com/>;> (there is also a free version of
>> the underlying software). It is based on HTML and while I don’t believe it
>> has great accessibility out of the box, it may be easily feasible to
>> enhance.
>> >
>> > Tim
>> >
>> >
>> >
>> > On 4/29/16, 1:55 PM, "WebAIM-Forum on behalf of Brian Lovely" <
>> = EMAIL ADDRESS REMOVED = <mailto:
>> = EMAIL ADDRESS REMOVED = > on behalf of = EMAIL ADDRESS REMOVED =
>> <mailto: = EMAIL ADDRESS REMOVED = >> wrote:
>> >
>> >> I know there’s not much chance of creating an accessible slide show,
>> but does anyone have any suggestions of how to present multiple screens of
>> information on a single page? My initial thought is to just display them in
>> a grid.
>> >>
>> >> The type of slideshow I am thinking of is a sort of fancy navigation
>> where you have a link to a page on a graphic along with some copy and/or a
>> call to action. Like a picture of people sitting by a swimming pool with
>> text saying “Sign up for a season pool pass” and a “sign up” link to the
>> season pass page.
>> >>
>> >>
>> >> Brian Lovely
>> >>
>> >> 3264 Milton Ave
>> >> Columbus OH 43202
>> >>
>> >> = EMAIL ADDRESS REMOVED =
>> >> 513.319.8492
>> >>
>> >>
>> >>
>> >>
>> >> >> >> >> https://urldefense.proofpoint.com/v2/url?u=http-3A__list.webaim.org_&d=CwIGaQ&c=DS6PUFBBr_KiLo7Sjt3ljp5jaW5k2i9ijVXllEdOozc&r=qOlXEeyKZeu-rZj6R-V1o17Do0v2f9RzbD3gfrpuBWE&m=zrZAT8SaM6qq490vynwVXsT27_Am040l-MGsEIIdNCo&s=wfxwrooBBtGRPrzPpGtlVV-m4qfJxYWVrO5SH3whFVQ&e>> <
>> https://urldefense.proofpoint.com/v2/url?u=http-3A__list.webaim.org_&d=CwIGaQ&c=DS6PUFBBr_KiLo7Sjt3ljp5jaW5k2i9ijVXllEdOozc&r=qOlXEeyKZeu-rZj6R-V1o17Do0v2f9RzbD3gfrpuBWE&m=zrZAT8SaM6qq490vynwVXsT27_Am040l-MGsEIIdNCo&s=wfxwrooBBtGRPrzPpGtlVV-m4qfJxYWVrO5SH3whFVQ&e>> >
>> >> List archives at
>> https://urldefense.proofpoint.com/v2/url?u=http-3A__webaim.org_discussion_archives&d=CwIGaQ&c=DS6PUFBBr_KiLo7Sjt3ljp5jaW5k2i9ijVXllEdOozc&r=qOlXEeyKZeu-rZj6R-V1o17Do0v2f9RzbD3gfrpuBWE&m=zrZAT8SaM6qq490vynwVXsT27_Am040l-MGsEIIdNCo&s=9oPlIYadhzS0MgPAC3LhqrHAVyarEAHjyfcBk8NXxPE&e>> <
>> https://urldefense.proofpoint.com/v2/url?u=http-3A__webaim.org_discussion_archives&d=CwIGaQ&c=DS6PUFBBr_KiLo7Sjt3ljp5jaW5k2i9ijVXllEdOozc&r=qOlXEeyKZeu-rZj6R-V1o17Do0v2f9RzbD3gfrpuBWE&m=zrZAT8SaM6qq490vynwVXsT27_Am040l-MGsEIIdNCo&s=9oPlIYadhzS0MgPAC3LhqrHAVyarEAHjyfcBk8NXxPE&e>> >
>> >> >> = EMAIL ADDRESS REMOVED = >
>> > >> > >> http://list.webaim.org/>;
>> > >> http://webaim.org/discussion/archives>;
>> > >> = EMAIL ADDRESS REMOVED = >
>> >> >> >> >>
>
>

From: Terzian, Sharon
Date: Fri, Apr 29 2016 4:26PM
Subject: Re: Accessible Slide Show
← Previous message | Next message →

I have a script I was playing with that I can't find at the moment, but I did see this:
http://accessibility.athena-ict.com/aria/examples/carousel.shtml


I know the script I had, the images were all there in code as essentially an unordered list (with img alt tags)
The one I was using, didn't move automatically, I'll have to hunt it down.


Sharon Terzian
Webmistress/Sherlock Center
Adjunct Professor/CIS/College of Management
Rhode Island College
www.sherlockcenter.org



From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > on behalf of Timothy Hohne < = EMAIL ADDRESS REMOVED = >
Sent: Friday, April 29, 2016 5:44 PM
To: WebAIM Discussion List
Subject: Re: [WebAIM] Accessible Slide Show

You may want to check out slides.com <http://slides.com>; (there is also a free version of the underlying software). It is based on HTML and while I don’t believe it has great accessibility out of the box, it may be easily feasible to enhance.

Tim



On 4/29/16, 1:55 PM, "WebAIM-Forum on behalf of Brian Lovely" < = EMAIL ADDRESS REMOVED = on behalf of = EMAIL ADDRESS REMOVED = > wrote:

>I know there’s not much chance of creating an accessible slide show, but does anyone have any suggestions of how to present multiple screens of information on a single page? My initial thought is to just display them in a grid.
>
>The type of slideshow I am thinking of is a sort of fancy navigation where you have a link to a page on a graphic along with some copy and/or a call to action. Like a picture of people sitting by a swimming pool with text saying “Sign up for a season pool pass” and a “sign up” link to the season pass page.
>
>
>Brian Lovely
>
>3264 Milton Ave
>Columbus OH 43202
>
> = EMAIL ADDRESS REMOVED =
>513.319.8492
>
>
>
>
>>

From: Bryan Garaventa
Date: Fri, Apr 29 2016 4:27PM
Subject: Re: Accessible Slide Show
← Previous message | No next message

Agreed, it sounds almost like what you wish is a wizard interface as part of a carousel.

Here is an example of something like this, though it uses forms as a wizard, though the concept could just as easily be used with images and keyboard accessible links.
http://whatsock.com/tsg/Coding%20Arena/Carousels,%20Slideshows,%20and%20Wizards/Wizard%20(Grouped%20from%20XML)/demo.htm




Bryan Garaventa
Accessibility Fellow
SSB BART Group, Inc.
= EMAIL ADDRESS REMOVED =
415.624.2709 (o)
www.SSBBartGroup.com


-----Original Message-----
From: WebAIM-Forum [mailto: = EMAIL ADDRESS REMOVED = ] On Behalf Of James Nurthen
Sent: Friday, April 29, 2016 3:22 PM
To: WebAIM Discussion List < = EMAIL ADDRESS REMOVED = >
Subject: Re: [WebAIM] Accessible Slide Show

forgot the link... https://www.w3.org/WAI/tutorials/carousels/

On Fri, Apr 29, 2016 at 3:21 PM, James Nurthen < = EMAIL ADDRESS REMOVED = > wrote:

> I would also check out the WAI tutorial on Carousels
>
> On Fri, Apr 29, 2016 at 3:10 PM, Brian Lovely < = EMAIL ADDRESS REMOVED = > wrote:
>
>> I’ll have to check that out. This looks interesting, too:
>> http://hanshillen.github.io/jqtest/#goto_carousel <
>> http://hanshillen.github.io/jqtest/#goto_carousel>; Not sure if the
>> hanshillen carousel supports multiple elements per slide or not.
>>
>> I was looking at some hotel chain sites using VoiceOver. They were
>> pretty problematic, especially carousels, so I started wondering how
>> much they could retain the same look and feel while adding accessibility.
>>
>> Brian Lovely
>>
>> 3264 Milton Ave
>> Columbus OH 43202
>>
>> = EMAIL ADDRESS REMOVED =
>> 513.319.8492
>>
>>
>>
>>
>> > On Apr 29, 2016, at 5:44 PM, Timothy Hohne
>> > < = EMAIL ADDRESS REMOVED = >
>> wrote:
>> >
>> > You may want to check out slides.com <http://slides.com/>; <
>> http://slides.com <http://slides.com/>;> (there is also a free version
>> of the underlying software). It is based on HTML and while I don’t
>> believe it has great accessibility out of the box, it may be easily
>> feasible to enhance.
>> >
>> > Tim
>> >
>> >
>> >
>> > On 4/29/16, 1:55 PM, "WebAIM-Forum on behalf of Brian Lovely" <
>> = EMAIL ADDRESS REMOVED = <mailto:
>> = EMAIL ADDRESS REMOVED = > on behalf of = EMAIL ADDRESS REMOVED =
>> <mailto: = EMAIL ADDRESS REMOVED = >> wrote:
>> >
>> >> I know there’s not much chance of creating an accessible slide
>> >> show,
>> but does anyone have any suggestions of how to present multiple
>> screens of information on a single page? My initial thought is to
>> just display them in a grid.
>> >>
>> >> The type of slideshow I am thinking of is a sort of fancy
>> >> navigation
>> where you have a link to a page on a graphic along with some copy
>> and/or a call to action. Like a picture of people sitting by a
>> swimming pool with text saying “Sign up for a season pool pass” and a
>> “sign up” link to the season pass page.
>> >>
>> >>
>> >> Brian Lovely
>> >>
>> >> 3264 Milton Ave
>> >> Columbus OH 43202
>> >>
>> >> = EMAIL ADDRESS REMOVED =
>> >> 513.319.8492
>> >>
>> >>
>> >>
>> >>
>> >> >> >> >> https://urldefense.proofpoint.com/v2/url?u=http-3A__list.webaim.org_&
>> d=CwIGaQ&c=DS6PUFBBr_KiLo7Sjt3ljp5jaW5k2i9ijVXllEdOozc&r=qOlXEeyKZeu-
>> rZj6R-V1o17Do0v2f9RzbD3gfrpuBWE&m=zrZAT8SaM6qq490vynwVXsT27_Am040l-MG
>> sEIIdNCo&s=wfxwrooBBtGRPrzPpGtlVV-m4qfJxYWVrO5SH3whFVQ&e>> <
>> https://urldefense.proofpoint.com/v2/url?u=http-3A__list.webaim.org_&
>> d=CwIGaQ&c=DS6PUFBBr_KiLo7Sjt3ljp5jaW5k2i9ijVXllEdOozc&r=qOlXEeyKZeu-
>> rZj6R-V1o17Do0v2f9RzbD3gfrpuBWE&m=zrZAT8SaM6qq490vynwVXsT27_Am040l-MG
>> sEIIdNCo&s=wfxwrooBBtGRPrzPpGtlVV-m4qfJxYWVrO5SH3whFVQ&e>> >
>> >> List archives at
>> https://urldefense.proofpoint.com/v2/url?u=http-3A__webaim.org_discus
>> sion_archives&d=CwIGaQ&c=DS6PUFBBr_KiLo7Sjt3ljp5jaW5k2i9ijVXllEdOozc&
>> r=qOlXEeyKZeu-rZj6R-V1o17Do0v2f9RzbD3gfrpuBWE&m=zrZAT8SaM6qq490vynwVX
>> sT27_Am040l-MGsEIIdNCo&s=9oPlIYadhzS0MgPAC3LhqrHAVyarEAHjyfcBk8NXxPE&
>> e>> <
>> https://urldefense.proofpoint.com/v2/url?u=http-3A__webaim.org_discus
>> sion_archives&d=CwIGaQ&c=DS6PUFBBr_KiLo7Sjt3ljp5jaW5k2i9ijVXllEdOozc&
>> r=qOlXEeyKZeu-rZj6R-V1o17Do0v2f9RzbD3gfrpuBWE&m=zrZAT8SaM6qq490vynwVX
>> sT27_Am040l-MGsEIIdNCo&s=9oPlIYadhzS0MgPAC3LhqrHAVyarEAHjyfcBk8NXxPE&
>> e>> >
>> >> >> = EMAIL ADDRESS REMOVED = >
>> > >> > >> http://list.webaim.org/>;
>> > >> http://webaim.org/discussion/archives>;
>> > >> = EMAIL ADDRESS REMOVED = >
>> >> >> archives at http://webaim.org/discussion/archives
>> >>
>
>