KATC is a highly configurable carousel widget, intended for lists of thumbnails. When called against a list of hyperlink-wrapped images, this plugin progressively enhances the list to a keyboard-accessible, infinitely looping, carousel.

Whenever a focusable element within the widget has the focus, the arrow keys may be used to rotate the carousel. Unplug your mouse and try it!

Why Another Carousel?

In contrast to other carousels and slider widgets, the item(s) in view may be given the focus via the keyboard.

This makes KATC especially useful for when several thumbnails are in view and clicking on a thumbnail results in a larger version of the image being shown. While this UI pattern is common with carousels, it's frequently limited to mouse use.

Keyboard accessibility is important to many users, including those with motor impairments and hand tremors.

KATC is even fully keyboard accessible in Opera!

Code Playground

jump to result (Unlike KATC itself the code editors are not keyboard accessible as they trap the focus.)

HTML

The plugin is called against one or more div elements, each of which contains a single ul or ol element.

Using this existing markup as a guide, try changing the number of list items and the src attribute for the images. Images from lorempixum are used here so that their dimensions are easily modified. Please see note about image dimensions.

The markup which KATC progressively enhances:(if empty please reload page)

<div id="my-thumbnails"> <ul> <li> <a href="http://lorempixum.com/g/600/400/technics/1"> <img alt="your alt text here" src="http://lorempixum.com/g/94/94/technics/1"> </a> </li> <li> <a href="http://lorempixum.com/g/600/400/technics/2"> <img alt="your alt text here" src="http://lorempixum.com/g/94/94/technics/2"> </a> </li> <li> <a href="http://lorempixum.com/g/600/400/technics/3"> <img alt="your alt text here" src="http://lorempixum.com/g/94/94/technics/3"> </a> </li> <li> <a href="http://lorempixum.com/g/600/400/technics/4"> <img alt="your alt text here" src="http://lorempixum.com/g/94/94/technics/4"> </a> </li> <li> <a href="http://lorempixum.com/g/600/400/technics/5"> <img alt="your alt text here" src="http://lorempixum.com/g/94/94/technics/5"> </a> </li> <li> <a href="http://lorempixum.com/g/600/400/technics/6"> <img alt="your alt text here" src="http://lorempixum.com/g/94/94/technics/6"> </a> </li> </ul> </div>

JavaScript Options

The thumbnails need not all have the same two dimensions, but the largest dimension on the largest image must be specified using the imageSize option. (Automatic detection is a to-do).

The maximum number of images in view may be configured with the thumbsPerFrame option. When the thumbnails in the list are of varying dimensions and/or orientations, a value for thumbsPerFrame of greater than 1 is, from an aesthetic point of view, not recommended.

Options object passed to $('#my-thumbnails').katc():(to use the defaults clear the box)

{ /* specify the largest dimension on the largest image */ imageSize: 94, /* 1 to N, default:1. thumbsPerFrame > 1 when mixing thumbnails of different dimensions is not recommended */ thumbsPerFrame: 2, /* rotation speed in miliseconds, default:350. duration < 300 is not recommended */ duration: 300, /* animation easing function, default:jQuery default. e.g. easeInBack, easeOutBounce, easeOutExpo */ easing: '' }

Custom CSS

Unless otherwise noted, change only the values of the CSS properties used here. For example, use only the width and height properties with .arrow-bounding-box-dimensions.

As shown here, class names are preceeded with the outer div’s ID selector and a space. (This allows for more than one instance of KATC on a page).

This custom CSS is typically stored in a file called katc-user.css.

CSS to override the default styles:(to use the defaults clear the box)

/* the style applied to each thumbnail when its hyperlink parent is hovered and/or has focus. specify values for border (not outline) */ #my-thumbnails .link-hover-img-style {border: 6px solid blue;} /* "jogger" refers to the left and right buttons. style here without restriction. vertical-align: top|middle|bottom; */ #my-thumbnails .jogger {} /* .jogger-hover styles the hover and focus state for the joggers. must appear after .jogger */ #my-thumbnails .jogger-hover {} #my-thumbnails .arrow-color {color: #090} /* .arrow-color-hover must appear after .arrow-color */ #my-thumbnails .arrow-color-hover {color: #0d0} /* a bounding box determines the shape of the arrows */ #my-thumbnails .arrow-bounding-box-dimensions {width: 11px; height: 25px;} /* control "breathing space" */ #my-thumbnails {padding: 20px;} #my-thumbnails .carousel-view-port {margin: 0 15px 0 15px;} /* borders. remove the defaults with border: none; */ #my-thumbnails {border: 1px solid black;} #my-thumbnails .carousel-view-port {border: none;} /* determine the vertical position of the jump-to buttons */ #my-thumbnails .jump-to-container {top: 3px;} /* style the jump-to buttons without restriction */ #my-thumbnails .jump-to {} #my-thumbnails .jump-to:hover {background-color: #00A;} #my-thumbnails .current-jump-to {background-color: #006;}

make carousel

N.B. The code playground imposes a performance penalty that is not native to KATC.

Keyboard-related Behaviour Of KATC

Providing keyboard access for a carousel widget throws up a number of interesting complications and design decisions. Below is the list of tests used to check that the behaviour of KATC is in accordance with the design decisions taken. "jump-to button" refers to the buttons that provide random access to the sets of items that the carousel displays.

• K1 Pressing the left arrow key when any element within the widget has the focus should slide the currently displayed items(s) to the right and the left arrow button should receive the focus; pressing the right arrow key when any element within the widget has the focus should slide the currently displayed items(s) to the left and the right arrow key should receive the focus.
• K2 The focusable elements within the widget should follow the natural tab order. For example, pressing the tab key when the left arrow button has the focus should mean the first of the items in the currently displayed morsel receives the focus.
• K3 While a rotation animation is on progress, the rotated items should not be able to receive the focus via the keyboard. For example, pressing left arrow key quickly followed by the tab key while the animation is in progress should put the focus on the right arrow button. Opera only: when pressing the left arrow key quickly followed by the shift key in combination with the right key arrow, the focus should remain on the left arrow button (overcomes some Opera weirdness).
• K4 The jump-to buttons should not be able to receive the focus via the keyboard and are intended for mouse use only.
• K5 Pressing the left arrow key quickly followed by the arrow right arrow key will terminate the current rotation animation and begin a new animation going in the other direction from where the current one left off.
• K6 Causing repeated animations by, for example, holding down an arrow key, or holding down the enter key while an arrow button has focus, should result in repeated rotations of the carousel in the appropriate direction, with each animation completing before the next begins. The animations should not "stack up", meaning that when the key is released the currently running animation should be the last one initiated by that particular key press. (N.B. key repeat behaviour is browser/OS dependant). There should be similar behaviour for when an arrow key is repeatedly tapped.
• K7 Resizing the browser window in order that horizontal scroll bars appear and then pressing the left and right arrow keys when an element within the widget has the focus should not scroll the page.

Further Usability Notes

Because the jogger buttons are situated on either side of the carousel's viewport, they are not particularly convenient for backtracking when using the mouse. Given this, a value for the thumbsPerFrame option of more than 3 is not recommended especially when the widget is being used to display thumbnails with larger dimensions.

The jump-to buttons provide both a means of random access and a visual cue to the user of where they are in the data set. By design they may not be given the focus via the keyboard.