Carousel accessibility examples

There are a few types of carousels.

Per-item full page carousels

Single item carousels are carousels where only one child element is readable at a time. Examples include the APG tabs carousel, the APG buttons carousel, slideshows, or hero carousels. There may be peeking into the next or previous items but they are not intended to be interacted with.

These carousels should:

• Use scroll snapping to ensure that exactly one item is the focus at a time. E.g. .carousel { scroll-snap-type: inline mandatory; } .item { scroll-snap-align: center; }
• Have role="region" and an aria-labelon the carousel container so that the carousel is announced as a landmark. It should also use aria-live="polite" which in combination with interactivity will announce slide changes when using any of the scrolling mechanisms to change the active slide. E.g. <div class="carousel" role="region" aria-label="Slideshow" aria-live="polite"> ... </div>
• Use a scroll-state query to make only the current item interactive. As the item which is in view changes it will result in an announced change to the user. E.g. .item { container-type: scroll-state; } .item > * { interactivity: inert; @container scroll-state(snapped: inline) { > .content { interactivity: auto; } } }
• Use role=tabpanel for the slide elements, which are inerted when not current by the scroll-state query above.

Example

The following example demonstrates all of these practices:

Automatically paginated carousels

A common pattern is to use scroll markers and scroll buttons to step through pages of contents. E.g. a list of products, choice of tv shows, etc. You can present this content in one of two ways.

To present as a carousel with discrete pages:

• Have a role=region on a containing element. Within that, wrap the content in a role=tabpanel element. This single tabpanel will update its content to reflect the active tab / page. E.g. <div role=region class="carousel" aria-label="Carousel"> <div role=tabpanel> <div class="item">Item 1</div> ... <div class="item">Item n</div> </div> <div>
• Use an animation to set interactivity: auto on visible content. This ensures that the tab order only reaches currently visible items. E.g. @keyframes interactive-when-visible { 0% { interactivity: auto; } } .item { interactivity: inert; animation: interactive-when-visible steps(1); animation-timeline: view(inline); }
• The use of aria-live=polite could be confusing if users are able to scroll slowly as items will come in one by one. It should be avoided.

To present as a list of contents:

• Use a <ul> element to represent the content as a list.
• Don't use interactivity, leave all content in the accessibility tree. Making offscreen content inert will affect the item count.
• Caveat: this does not conform to the expectations of the generated tablist / tabs for the ::scroll-marker-group / ::scroll-marker pseudo-elements.

Examples

Discretely accessed pages

List of paginated items

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6
• Item 7
• Item 8
• Item 9
• Item 10
• Item 11
• Item 12
• Item 13
• Item 14
• Item 15
• Item 16

List of contents

Multiple items visible at a time carousels

Multi-item carousels are carousels where multiple child elements are readable at a time. These are tricky to match the expected tab pattern. To match it correctly use the pattern from the per-item full page carousel and ensure sufficient padding such that every item can be snapped to. The 3d carousel demo has an example of this.

If you want all of the items to be accessible, the best practices would be:

• Use a <ul> element to represent the content as a numbered list.
• Don't use interactivity, leave all content in the accessibility tree.

Examples

Multiple items where only current is accessible

Multiple accessible items with a marker per item

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5
• Item 6
• Item 7
• Item 8
• Item 9
• Item 10
• Item 11
• Item 12
• Item 13
• Item 14
• Item 15
• Item 16