RE: Accessible carousels in public Slick.js archive

No problem,
I was using the index.html file in the root to test the changes, but what that shows is the modifications to the framework of the carousels such as the roles and keyboard events that are being applied for different types of carousels, and not really the best representations of a real carousel. It looks like the main author didn't add anything comprehensive within the carousel slides accept colored images and the like with no alternative text, and there are hundreds of those things in there which doesn't add anything worth testing.

I would recommend breaking out one carousel from that and adding a few real slides with textual content and perhaps some links and buttons, or even some form fields, and see how it does then. Unfortunately I don't have any time at present to set this up myself.

Changing which type of carousel is represented seems to be as simple as changing the properties to true or false during the setup, so it should be easy to see what happens there.



Bryan Garaventa
Principal Accessibility Architect
Level Access, Inc.
Bryan.Garaventa@LevelAccess.com
415.624.2709 (o)
www.LevelAccess.com

-----Original Message-----
From: Sina Bahram <sina@sinabahram.com> 
Sent: Friday, May 17, 2019 2:24 PM
To: public-aria@w3.org
Subject: RE: Accessible carousels in public Slick.js archive

CAUTION: This email originated from outside of the organization. Do not click links or open attachments unless you recognize the sender and know the content is safe.


this sounds super-promising. Thanks for your work on this, Bryan.

May I please ask how to test this out? I cloned the repository, of course.

I evaluated the examples in index.html, but those are not the ones with your changes, correct? If they are, I may be missing quite a bit, as I see a repetition of a two-part pattern involving previous and next buttons as the first part and a tab list with no associated tab panels as the second part.

Is that how to experience the instantiations with your changes, or is something else required?

I also noticed the link under the example heading in readme.md, but I figured that goes to the live demos from the dev, given the URL, and given that this is a fork of that repository, so most likely you did not modify readme.md obviously.

I'm Excited to test this out with VO, NVDA, and Jaws across Safari, Chrome, and Firefox at the very least.

Sorry for what may be an obvious question, but I want to make sure I am testing the right instance of the component with all your changes.

Take care,
Sina

President, Prime Access Consulting, Inc.
Phone: 919-345-3832
https://www.PAC.bz
Twitter: @SinaBahram
Personal Website: https://www.sinabahram.com

-----Original Message-----
From: Bryan Garaventa <bryan.garaventa@levelaccess.com>
Sent: Wednesday, May 15, 2019 7:59 PM
To: public-aria@w3.org
Subject: Accessible carousels in public Slick.js archive

Hi,
In case it's of interest, I forked a copy of Slick.js, which is a common carousel that is used by thousands across the web, but has critical accessibility issues. So I fixed all of them. This uses all of the expected behaviors we've been discussing in the APG for the carousel design pattern.
You are welcome to try this out at
https://github.com/accdc/slick
(This also works accessibly when auto-rotation is enabled via autoplay:
true.)

Note I only fixed the carousel issues, not all of the unnamed images within index.html, so presumably people will actually make sure their content is accessible when they implement this within their own projects. However, I am not holding out for common sense to prevail at this point.

I'll make a pull request for the  project owner once I finish some final testing, but here it is in case it's of help to anyone.

All the best,
Bryan


Bryan Garaventa
Principal Accessibility Architect
Level Access, Inc.
Bryan.Garaventa@LevelAccess.com
415.624.2709 (o)
www.LevelAccess.com

Received on Friday, 17 May 2019 21:38:28 UTC