E-mail List Archives

Search E-mail List Archives for

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

From: Bryan Garaventa
Date: Mon, Feb 13 2012 12:42AM
Subject: Automatically accessible carousel, slideshow, and wizard generator
No previous message | No next message

Hi,
Please forgive the cross posting, I thought this might be of interest to various communities, especially those dedicated to accessibility development, ARIA, and inclusive design.

This is really exciting! I believe so anyway. I've just released the Carousel From XML Module at
http://whatsock.com/modules/carousel_from_xml_module/demo.htm
which is an automatically accessible carousel, slideshow, and wizard generator.

It sounds weird, but conceptually, a carousel and a wizard are functionally similar. Both are designed to present information in bite sized pieces and to maximize available screen real estate. The difference comes down to styling and interactivity support using event handlers. So I thought it would be pretty cool to do both, and to be able to swap out forms in the same manner as you can do with slides, so that's what it does.

The script acts as a conduit, so that once loaded, it can be used to parse any carousel configuration file to display any type of carousel, including animated rotations, infinite cycling, textual equivalents, accesskeys, animation time lengths, grouped or ungrouped navigation and the optional displaying of group names, hidden text for screen reader users, textual messages to be automatically announced to screen reader users, and so on.

For instance, in the demos, the auto rotating carousel is fully populated and configured using the XML file at
http://whatsock.com/modules/carousel_from_xml_module/files/carousel.xml
The static slideshow demo is populated and configured from
http://whatsock.com/modules/carousel_from_xml_module/files/movies.xml
And the dynamically generated wizard is populated and configured from
http://whatsock.com/modules/carousel_from_xml_module/files/wizard.xml

All of the event methods are configured in the invocation function:
setCarousel(ContainerObj, XML-FilePath, DefaultIndexVale, Handlers);

Now, here's a really cool feature. Say you have a container object that has the ID attribute id="myCarousel", and you invoke a carousel to be rendered in that container like so.
setCarousel(document.getElementById('myCarousel'), 'files/images.xml', 0, {
complete: function(dc){
// Executes after each slide has finished loading
// dc.slideVal will return the current slide index value
// dc.parent.close() will close the carousel and unregister all event handlers
}
// other handlers if desired
});

Then your carousel is registered using the ID of that container object! So you can now do the following:
var carousel = $A.reg.myCarousel;
// Get the currently displayed slide index value
alert( carousel.cur.slideVal );
// or the previously displayed slide index value
alert( carousel.old.slideVal );
// or you can close the carousel and unregister all events; useful when switching between tabs using client side swapping to prevent memory leaks.
carousel.close();

So at any rate, it's pretty exciting as I said. Here is a list of the features excerpted from the demo page if interested.
. Automatic pausing and resuming of rotating slides using the mouse and keyboard focus.
. Automatically generated ARIA functionality for screen reader users.
. Universal Escape hotkey to stop auto rotation for all carousels.
. Customizable event handlers and callbacks to control slide functionality.
. Encapsulation to allow multiple carousel controls to exist in the DOM without conflict.
. Asynchronous loading of image files for local caching in advance.
. Conditional rendering so that only the visible slide exists within the DOM.
. Full control of content and functionality using XML.
. Full localization support for use in any language.
. Full control of layout and appearance using CSS.

I've already added a carousel to the home page of WhatSock.com that uses this implementation to showcase all of the modules. I like the feel of it better than the previous slideshow. Also, since the animation uses minimal processing, performance lagging in JAWS and IE appears to be undetectable. If lagging is detected however, pressing Escape will automatically stop every carousel on the page from using auto rotation. It's important to keep in mind though, that pressing Escape before the page has fully loaded will simply stop the page from loading.

There is a bug in NVDA2011.3 that I need to report, where button elements with titles will not be announced in the latest version of Firefox if a textual value, such as an arrow symbol is present within the text of the tag. It is correctly announced in IE however.

The source code package can be downloaded from
http://whatsock.com/modules/carousel_from_xml_module.zip

Please let me know if you notice any bugs, there may be a couple remaining, I literally put it up earlier today.

Thanks,
Bryan