Carousel

v2.0

Carousels group similar items into a horizontally scrollable container extending beyond the visible space of the screen.

Guidelines

Our accessibility section covers only the key considerations that impact design thinking at a page level, such as keyboard interaction, heading structure and landmarks. For exhaustive pattern level details & guidance for the web, please visit eBay MIND Patterns.

Keyboard interaction

The previous and next paddles remain invisible until receiving keyboard focus. They are always present in the page’s tab sequence, even when visibly disabled.

Only the currently visible interactive elements exist in the page’s tab sequence. This ensures that keyboard users do not have to interact with every item in the slide in order to proceed down the page.

Tab Sequence

Prev icon-button
Interactive slide content (e.g. item tile links and “save” buttons)
Next icon-button
Play/pause icon-button

Pointer gestures

WCAG 2.5.1 states that:

“All functionality that uses multipoint or path-based gestures for operation can be operated with a single pointer without a path-based gesture”

This means potentially adding buttons as an alternative means to move left and right. However the footnote also states that:

“This does not apply to actions that are required to operate the user agent”.

The user agent does provide a scrollbar to scroll the horizontal region (visible when tapping the region). This scrollbar typically supports a single pointer gesture.