This is an unpublished draft preview that might include content that is not yet approved. The published website is at w3.org/WAI/.

Carousels Tutorial

in Tutorials

Implement an accessible carousel widget by providing a robust structure and user control:

See also the complete working example and full code of the example carousel.

What are carousels?

Carousels show a collection of items one at a time. They are also known as “slideshows” and “sliders”. Typical uses of carousels include scrolling news headlines, featured articles on home pages, and image galleries.

Note: Carousels are disputed from a usability perspective because their content can be hard to discover. Ensuring accessibility can also improve usability.

Why is this important?

Typically, carousels are prominently located and are used to provide navigation or show page content. Accessible carousels are essential for many website users including:

Back to Top

This is an unpublished draft preview that might include content that is not yet approved. The published website is at w3.org/WAI/.