WebAIM - Web Accessibility In Mind

E-mail List Archives

Regarding an automatically accessible slideshow implementation

for

From: Bryan Garaventa
Date: Sep 4, 2011 10:30PM

Hello, I thought I'd pass this on in case it's of interest.

I've recently added a slideshow to the front page at
http://whatsock.com/
Which simply showcases various interactive demos available elsewhere on the site.

Being fully blind however, I programmed this from the perspective of a screen reader user, and designed it to be equally accessible to Assistive Technology users and keyboard only users. (I don't see the point in building anything if it's not as 100% accessible as possible.)

These are the specs:

The slideshow cycles every 7 seconds, which initiates a 1 second animation during the transition.

Sighted mouse users can hover the mouse over the slideshow canvas to pause cycling, and show a tooltip that describes the features illustrated in the image; Mousing out of this area will restart the slideshow. Clicking the slideshow image will navigate to the specified page.

Screen reader users can use the hidden "Stop Slideshow" link to stop the slideshow from cycling if a performance hit is noticed when the animation runs during each transition. The arrow keys can be used to navigate between each slideshow image link in the Virtual Buffer, or tab can be used to cycle between each slideshow as well.

Keyboard only users can use tab to navigate into the slideshow as well. When the "Stop Slideshow" link receives focus, it automatically becomes visible as an overlay, which disappears again after focus moves away. When "Stop Slideshow" is activated, the link changes to "Start Slideshow" to reflect the selected state of the slideshow. Even if the "Stop Slideshow" link is ignored, and tab is used to navigate into the individual slideshow image links, cycling will automatically be paused on the currently highlighted slideshow image link; this will only resume again after keyboard focus is no longer on any of the slideshow image links.

Someone suggested that I pass this implementation on to WebAIM in case the technical details were of interest to other developers as well.

The guiding script for the slideshow functionality can be viewed at:
http://whatsock.com/js/helpers.js
At the bottom of this file.

All of the code (CSS, XHTML, and JS) is included within the AccDC Reference Archive:
http://whatsock.com/files/downloads/whatsock.com.zip

Best wishes,
Bryan Garaventa