Re: About image sliders

Sliders/carousels should be avoided where possible (hint: everywhere). For more information: http://shouldiuseacarousel.com/

But there are some great suggestions in this thread to make them accessible if you really want one. 

—Michiel

> On 30 Nov 2015, at 16:57, Elizabeth J. Pyatt <ejp10@psu.edu> wrote:
> 
> Thanks for sharing. 
> I also like that I can see all the headlines on the slider without waiting for the next story to come up. 
> 
> FWIW - I’ve noticed that a lot of news sites (e.g. CNN, BBC, Washington Post) don’t use carousels, but more featured images.
> 
> Elizabeth
> 
>> On Nov 30, 2015, at 10:46 AM, Richards, Jan <jrichards@ocadu.ca> wrote:
>> 
>> Another issue with image sliders is that even when they are technically accessible, there can be a lot of in-page navigation as the user must advance to the next slide, then read the slide, then advance to the next, etc.
>> 
>> For this reason, I like the design pattern used by http://www.economist.com/.
>> 
>> While it includes a rotating image (that rotates through once), it also includes text links to each topic which are always shown. This makes it mush easier to understand the content of the control without much in-page navigation. If I could suggest anything to The Economist it would be to have keyboard focus behave the same as a mouseover (i.e. advance the image and move the text highlighting)  
>> 
>> Cheers,
>> Jan
>> 
>> 
>> (MR) JAN RICHARDS
>> PROJECT MANAGER
>> INCLUSIVE DESIGN RESEARCH CENTRE (IDRC)
>> OCAD UNIVERSITY
>> 
>> T 416 977 6000 x3957
>> F 416 977 9844
>> E jrichards@ocadu.ca
>> 
>> ________________________________________
>> From: Elizabeth J. Pyatt [ejp10@psu.edu]
>> Sent: November-30-15 9:50 AM
>> To: Beranek, Nicholas
>> Cc: Sean Murphy (seanmmur); ajaysharma89003@gmail.com; w3c-wai-ig@w3.org
>> Subject: Re: About image sliders
>> 
>> I would also add that slideshows that constantly rotate are a problem for people with some reading & cognitive processing disorders as well as those with motion disorders who have problems moving quickly. See WCAG 2 Guideline 2.2 for details (http://www.w3.org/TR/WCAG20/#time-limits)
>> 
>> For keyboard accessibility, it’s also important that keyboard events are available for sighted users (and that directions are visible).
>> 
>> For these reasons, I generally recommend that slideshows either are static until clicked on (i.e. like many “Top 10” style slideshows) or only rotate once through the cycle.
>> 
>> Elizabeth
>> 
>>> On Nov 30, 2015, at 9:26 AM, Beranek, Nicholas <Nicholas.Beranek@capitalone.com> wrote:
>>> 
>>> Hi Ajay,
>>> 
>>> Yes, please provide some more details.
>>> 
>>> I will add that you can follow the WAI-ARIA authoring practices for the Slider widget here: http://www.w3.org/WAI/PF/aria-practices/#slider. It provides the necessary ARIA roles, states, and properties to add as well as the keyboard event listeners and their expected behaviors.
>>> 
>>> Nick
>>> 
>>> -----Original Message-----
>>> From: Sean Murphy (seanmmur) [mailto:seanmmur@cisco.com]
>>> Sent: Monday, November 30, 2015 3:03 AM
>>> To: ajaysharma89003@gmail.com
>>> Cc: w3c-wai-ig@w3.org
>>> Subject: Re: About image sliders
>>> 
>>> Hi
>>> 
>>> It depends how you have coded the slider.
>>> 
>>> Are you using a third party API or your own code. Can you provide some code example?
>>> 
>>> 
>>> Sent from my iPhone
>>> 
>>>> On 30 Nov 2015, at 6:49 PM, "ajaysharma89003@gmail.com" <ajaysharma89003@gmail.com> wrote:
>>>> 
>>>> Hi,
>>>> 
>>>> I have just plunjed into the world of accessibility so please forgive if I sound novice.
>>>> 
>>>> Now problem is that, I am working on a project which is a website that shows a big image slider. The images convey important information both in textual and non textual form, and this slider is inaccessible.
>>>> 
>>>> My question is that is there any standard technique to make it accessible and if is it okay to make it accessible by hiding the entire slider div by aria-hidden and rendering the info in simple text, that is hidden from sighted users through css, without changing the layout of the site?
>>>> 
>>>> Kindly let me know the best thing to do to get it aligned with Level AA.
>>>> 
>>>> Many Thanks,
>>>> Ajay
>>> 
>>> ________________________________________________________
>>> 
>>> The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.
>> 
>> =-=-=-=-=-=-=-=-=-=-=-=-=
>> Elizabeth J. Pyatt, Ph.D.
>> Instructional Designer
>> Teaching and Learning with Technology
>> Penn State University
>> ejp10@psu.edu, (814) 865-0805 or (814) 865-2030 (Main Office)
>> 
>> 210 Rider Building  (formerly Rider II)
>> 227 W. Beaver Avenue
>> State College, PA   16801-4819
>> http://www.personal.psu.edu/ejp10/psu
>> http://tlt.psu.edu
> 
> =-=-=-=-=-=-=-=-=-=-=-=-=
> Elizabeth J. Pyatt, Ph.D.
> Instructional Designer
> Teaching and Learning with Technology
> Penn State University
> ejp10@psu.edu, (814) 865-0805 or (814) 865-2030 (Main Office)
> 
> 210 Rider Building  (formerly Rider II)
> 227 W. Beaver Avenue
> State College, PA   16801-4819
> http://www.personal.psu.edu/ejp10/psu
> http://tlt.psu.edu
> 
>