Accessible Navigation

Accessible Navigation and Focus Management

A screen-reader user hears only what gets focus or is announced. A new screen gets its title read out: when the cart opened, TalkBack spoke "Cart, Heading", as logged above. Inside a screen, three tools cover the rest. role="heading" on section titles lets users jump between them. AccessibilityInfo.announceForAccessibility(text) speaks a change that has no focusable result, such as a removed cart line. And AccessibilityInfo.setAccessibilityFocus(reactTag) moves the focus explicitly, for example to an error banner (Accessible Form Feedback used role="alert" for that).

src/app/(tabs)/cart.tsx: announcing a removal (excerpt)JavaScript
  const removeLine = (id: number, title: string) => {
    remove(id);
    AccessibilityInfo.announceForAccessibility(t('cart.removed', { title }));
  };
// ...
          <Pressable onPress={() => removeLine(id, book.title)} role="button"
            aria-label={t('cart.removeLabel', { title: book.title })}

Without it, the row just disappears; with it, TalkBack's log showed Removed Salt and Saffron. Modals need aria-modal so the reader cannot wander behind them, and gestures such as Reanimated and Gesture Handler's swipe-to-remove need an accessibilityActions equivalent.