Auto-Rotating Image Carousel Example
++ NOTE: This is a new example as of the January 2019 release of WAI-ARIA Authoring Practices 1.1. + Please provide feedback in + issue 968. +
++ The following example implementation of the + carousel design pattern + demonstrates features of the pattern that are essential to accessibility for carousels that automatically start rotating when the page loads. + For instance, rotation stops when users move focus to any control or link in the carousel or hover the mouse over carousel content. + The accessibility features section that follows the example describes these features in detail. +
+ +Example
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+ + + Dynamic Europe: Amsterdam, Prague, Berlin + +
+ + +
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+ + + Travel to Southwest England and Paris + +
+ +
+
+ Sept. 14 to Sept. 24 or 27
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+ + + Survey confirms that TV is America’s most trusted institution + +
+ +
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+ + + Foyle’s War Revisited + +
+ +
+
+ 8 pm Sunday, March 8, on TV: Sneak peak at the final season.
+
+
+
+
+
+ 
+
+
+
+
+
+
+ + + Great Britain Vote: 7 pm Sat. + +
+ +
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+ + + Mid-American Gardener: Thursdays at 7 pm + +
+ + +Accessibility Features
+-
+
- Automatic rotation of slides in the carousel can be easily controlled by any user.
+
-
+
- + Hovering the mouse over any carousel content pauses automatic rotation. + Automatic rotation resumes when the mouse moves away from the carousel unless another condition, such as keyboard focus, that prevents rotation has been triggered. + +
- + Moving keyboard focus to any of the carousel content, including the next and previous slide elements, pauses automatic rotation. + Automatic rotation resumes when keyboard focus moves out of the carousel content unless another condition, such as mouse hover, that prevents rotation has been triggered. + +
- The carousel also contains a rotation control button that can stop and start automatic rotation.
+
-
+
- The rotation control button is the first element in the screen reader reading order. +
- The button is hidden off-screen when it does not have keyboard focus, and becomes visible when users move focus to it with Tab. +
-
+ When not visible, the button is positioned off-screen, instead of being hidden with
display:none, so it is always available to screen reader users. + This ensures the rotation control is accessible to people using a screen reader that does not move the mouse or keyboard focus when the user is moving its reading cursor. +
+ - If the carousel is rotating, the button is labeled "Stop Automatic Slide Show," informing screen reader users that the slides are changing in addition to providing a way to stop the changes. +
- If the carousel is not rotating, the button is labeled "Start Automatic Slide Show." +
- If a user has activated the button to stop the show, the rotation will only restart if the button is activated. Moving keyboard focus or the mouse out of the carousel will not restart rotation. +
- If keyboard focus is inside the carousel, or if the mouse is hovering over the carousel, the button is disabled; it cannot be used to start rotation. +
+
+ - + To improve readability of the caption text and content, the transparency of the caption area is decreased when the mouse hovers over the carousel content. + This improves the color contrast ratio of the white text, especially when light colored images are present in the background. + +
Keyboard Support
+Rotation Control Button
+| Key | +Function | +
|---|---|
| Tab | +
+
|
+
| Enter or Space | +Toggle the auto rotation of slides in the carousel. | +
Next and Previous Slide Buttons
+| Key | +Function | +
|---|---|
| Enter Space |
+ + Display next or previous slide in the carousel. + | +
Role, Property, State, and Tabindex Attributes
+| Role | +Attribute | +Element | +Usage | +
|---|---|---|---|
+ region
+ |
+ + |
+ section
+ |
+
+
|
+
| + |
+ aria-roledescription="carousel"
+ |
+
+ section
+ |
+
+
|
+
| + |
+ aria-label="Highlighted television shows"
+ |
+
+ section
+ |
+ Provides a label that describes the content in the carousel region. | +
| + |
+ aria-live=
+ |
+
+ div.carousel-items
+ |
+
+
|
+
| + |
+ aria-live=
+ |
+
+ div.carousel-items
+ |
+
+
|
+
+ group
+ |
+ + |
+ div.carousel-item
+ |
+
+
|
+
| + |
+ aria-roledescription="slide"
+ |
+
+ div.carousel-item
+ |
+
+
|
+
| + |
+ aria-label="N of 6"
+ |
+
+ div.carousel-item
+ |
+
+
|
+
| + |
+ aria-disabled="true"
+ |
+
+ button
+ |
+
+
|
+
+ button
+ |
+ + |
+ a
+ |
+ Identifies the element as a button. |
+
| + |
+ aria-label="LABEL_STRING"
+ |
+
+ a
+ |
+ Defines the accessible name for the next and previous slide buttons. | +
| + |
+ aria-controls="IDREF"
+ |
+
+ a
+ |
+
+
|
+
Javascript and CSS Source Code
+-
+
- CSS: carousel.css +
- Javascript: carousel.js +
- Javascript: carouselItem.js +
- Javascript: carouselButtons.js +
- Javascript: pauseButton.js +
HTML Source Code
+ +