RE: About image sliders

Here is a good example for slider:

http://jongund.github.io/aria-examples/bootstrap-carousel/carousel-3.html


Thanks
Siri

From: Kevin White [mailto:kevin@w3.org]
Sent: Monday, November 30, 2015 9:33 AM
To: ajaysharma89003@gmail.com
Cc: Beranek, Nicholas <Nicholas.Beranek@capitalone.com>; Sean Murphy (seanmmur) <seanmmur@cisco.com>; Elizabeth J. Pyatt <ejp10@psu.edu>; w3c-wai-ig@w3.org
Subject: Re: About image sliders

Hi Ajay,

You might find the (currently draft) carousel tutorial helpful:

            http://www.w3.org/WAI/tutorials/carousels/<https://urldefense.proofpoint.com/v2/url?u=http-3A__www.w3.org_WAI_tutorials_carousels_&d=BQMFaQ&c=8hUWFZcy2Z-Za5rBPlktOQ&r=EhgtAr-7y25WVGwZobPhGolLR2NavIIU7ohWiAWE3HA&m=9hXQ8v-5IRUw-iUIryFzjw6FP86quSoq67rvI1PxK8o&s=VJ8mpRzPrrPjf3V4E4JptfutwVYPIWJDSwQucQHpuPc&e=>

Any feedback or improvements on this resource is welcome.

Best,

Kevin

——
Kevin White
W3C Web Accessibility Initiative (WAI)
e-mail: kevin@w3.org<mailto:kevin@w3.org>
about: http://www.w3.org/People/#kevin<https://urldefense.proofpoint.com/v2/url?u=http-3A__www.w3.org_People_-23kevin&d=BQMFaQ&c=8hUWFZcy2Z-Za5rBPlktOQ&r=EhgtAr-7y25WVGwZobPhGolLR2NavIIU7ohWiAWE3HA&m=9hXQ8v-5IRUw-iUIryFzjw6FP86quSoq67rvI1PxK8o&s=gbAaQJHVutNN76GMiMrLtO1_EHyl8Cm6NMFEq8svp-Q&e=>

On 30 Nov 2015, at 14:50, Elizabeth J. Pyatt <ejp10@psu.edu<mailto:ejp10@psu.edu>> wrote:

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<https://urldefense.proofpoint.com/v2/url?u=http-3A__www.w3.org_TR_WCAG20_-23time-2Dlimits&d=BQMFaQ&c=8hUWFZcy2Z-Za5rBPlktOQ&r=EhgtAr-7y25WVGwZobPhGolLR2NavIIU7ohWiAWE3HA&m=9hXQ8v-5IRUw-iUIryFzjw6FP86quSoq67rvI1PxK8o&s=ikxoLujrLfzqHqEF-QADVs6T2YLH8p3vpLZdMsWdTTs&e=>)

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<mailto: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<https://urldefense.proofpoint.com/v2/url?u=http-3A__www.w3.org_WAI_PF_aria-2Dpractices_-23slider&d=BQMFaQ&c=8hUWFZcy2Z-Za5rBPlktOQ&r=EhgtAr-7y25WVGwZobPhGolLR2NavIIU7ohWiAWE3HA&m=9hXQ8v-5IRUw-iUIryFzjw6FP86quSoq67rvI1PxK8o&s=862XTB4rvtjvs7uZyWfMxI1YNOl8pZlVynqu39AwfoE&e=>. 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<mailto:ajaysharma89003@gmail.com>
Cc: w3c-wai-ig@w3.org<mailto: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<mailto:ajaysharma89003@gmail.com>" <ajaysharma89003@gmail.com<mailto: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<mailto: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<https://urldefense.proofpoint.com/v2/url?u=http-3A__www.personal.psu.edu_ejp10_psu&d=BQMFaQ&c=8hUWFZcy2Z-Za5rBPlktOQ&r=EhgtAr-7y25WVGwZobPhGolLR2NavIIU7ohWiAWE3HA&m=9hXQ8v-5IRUw-iUIryFzjw6FP86quSoq67rvI1PxK8o&s=PFNSfgfeQlZ5xIQvpqmafXswkjx6BjwHlSKvWvNAOio&e=>
http://tlt.psu.edu