Skip to main content

Carousel

When implementing a Carousel, it's essential to ensure that users can easily navigate through its items.

Expectations

Assistive Technology: Screen Reader
  • When: The user focuses a Carousel component
    • Then: The Screen Reader announces: [Component label] Adjustable/Slider, swipe up or down to adjust
      • When: User swipes up
        • Then: The previous item is focused
      • When: User swipes down
        • Then: The next item is focused
VoiceOverTalkback
[Component label], Adjustable, swipe up or down with one finger to adjust the value[Component label], Slider, swipe up or swipe down to adjust

When the Screen Reader is activated, navigation typically relies on specific gestures to interact with content:

  • 1-finger swipe up: This gesture usually focuses on the next item
  • 1-finger swipe down: This gesture focuses on the previous item

Example

To implement this navigation behavior in React Native when the Screen Reader is on, we need to:

  • use the accessibility role adjustable
  • set accessibilityActions={[{ name: 'increment' }, { name: 'decrement' }]}
  • handle onAccessibilityAction to change the index
<FlatList
ref={flatList}
data={data}
renderItem={renderItem}
accessible={true}
accessibilityLabel="Carousel"
accessibilityRole="adjustable"
accessibilityActions={[{ name: 'increment' }, { name: 'decrement' }]}
onAccessibilityAction={(event: AccessibilityActionEvent) => {
const value = event.nativeEvent.actionName === 'increment' ? 1 : -1;
const newIndex = carouselIndexForScreenReader.current + value;

carouselIndexForScreenReader.current = clamp(newIndex, 0, data.length - 1);
flatList.current?.scrollToIndex({
index: carouselIndexForScreenReader.current,
});
}}
/>
SeveritySerious
Accessibility PrincipleOperable
Affected usersVisual, Motor
Success criterion2.3.3