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

VoiceOver	Talkback
[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,
    });
  }}
/>

Related AMA utility

• CarouseWrapper
• useCarousel