Widget: Checkbox

Example

Simple Two-State Checkbox

Compound Multistate Checkbox

Details

Implementing This Widget

Implementing the Carousel widget is done when you want to create a carousel of images (or other mixed content) that is navigable (whether set to automatically play or not) by blind or sighted keyboard users and screen reader users alike.

Prerequisites:

You must first have the image files themselves.

To implement the Carousel widget:

  1. [[placeholder]]
  2. [[placeholder]]

Expected Operation and Accessibility Features

As far as screen reader users are concerned, this widget acts as if nothing is animated. The play/pause button is actually not necessary for blind users, but we have to put it in for the benefit of sighted users, and we have to make the play/pause button keyboard-accessible for the benefit of sighted keyboard users, even though it's true that having a pause button here is just a meaningless distraction for blind keyboard users.

Validation and Developer Notes

In order to validate the timing of this control, you must ensure users can read the content before it advances, stop the carousel when it automatically plays, and pause the autoplay when focusing the keyboard on one item. To validate the visual styling, ensure a mouse cursor displays instead of a text cursor upon hovering over a tab or button, the visual focus indicator is obvious on all tabs, buttons and links, and ensure the color contrast is sufficient using a tool such as FireEyes II. Validate keyboard functionality by ensuring you can tab into the widget, advance or reverse with either the tab or arrow keys, and pause and play when set to auto-play. Ensure it confirms "carousel paused" and "carousel playing" when the pause/play button is selected for screen reader users.

Notes for the Developer:

Do NOT set the widget to announce every change as an aria-live event if the carousel is set to auto-play. That would be too much information being read by screen readers all the time, and would make it difficult or impossible to read or navigate through the rest of the web page.

Example Implementation Reference

To view an implementation of this widget, see Carousel widget example.