mobile-accessibility

'none' | 'button' | 'link' | 'search' | 'image' | 'keyboardkey' |
'text' | 'adjustable' | 'imagebutton' | 'header' | 'summary' |
'alert' | 'checkbox' | 'combobox' | 'menu' | 'menubar' | 'menuitem' |
'progressbar' | 'radio' | 'radiogroup' | 'scrollbar' | 'spinbutton' |
'switch' | 'tab' | 'tablist' | 'timer' | 'toolbar' | 'grid' |
'list' | 'listitem'

// BEFORE: too small
<TouchableOpacity style={{ width: 24, height: 24 }}>
  <Icon name="close" size={16} />
</TouchableOpacity>

// AFTER: meets minimum
<TouchableOpacity
  style={{ width: 44, height: 44, alignItems: 'center', justifyContent: 'center' }}
  accessibilityRole="button"
  accessibilityLabel="Close dialog"
>
  <Icon name="close" size={16} />
</TouchableOpacity>

// Live region (React Native 0.73+ / Expo SDK 50+)
<Text aria-live="polite">
  {statusMessage}
</Text>

// Legacy equivalent
<Text accessibilityLiveRegion="polite">
  {statusMessage}
</Text>

// Values: 'none' | 'polite' | 'assertive'

// Programmatic focus
import { AccessibilityInfo, findNodeHandle } from 'react-native';

const ref = useRef(null);

const focusElement = () => {
  const tag = findNodeHandle(ref.current);
  if (tag) {
    AccessibilityInfo.setAccessibilityFocus(tag);
  }
};

// After navigation / modal open - always move focus to new content
useEffect(() => {
  if (isModalOpen) focusElement();
}, [isModalOpen]);

import { AccessibilityInfo } from 'react-native';

const [screenReaderEnabled, setScreenReaderEnabled] = useState(false);

useEffect(() => {
  AccessibilityInfo.isScreenReaderEnabled().then(setScreenReaderEnabled);
  const sub = AccessibilityInfo.addEventListener('screenReaderChanged', setScreenReaderEnabled);
  return () => sub.remove();
}, []);

<FlatList
  data={items}
  keyExtractor={(item) => item.id}
  renderItem={({ item, index }) => (
    <Pressable
      accessibilityRole="button"
      accessibilityLabel={`${item.title}, item ${index + 1} of ${items.length}`}
      onPress={() => onSelect(item)}
    >
      <Text>{item.title}</Text>
    </Pressable>
  )}
  // Required for VoiceOver swiping
  accessible={false}
/>

// Required on every interactive, non-standard UIView
view.isAccessibilityElement = true
view.accessibilityLabel = "Submit form"
view.accessibilityTraits = [.button]
view.accessibilityHint = "Submits the payment form"

// Grouping: card with image + text + action
cardView.isAccessibilityElement = true
cardView.accessibilityLabel = "\(title), \(subtitle)"
cardView.accessibilityTraits = [.button]
// Hide children redundantly
imageView.isAccessibilityElement = false
titleLabel.isAccessibilityElement = false

// UIKit - set container's accessibilityElements
containerView.accessibilityElements = [firstView, secondView, thirdView]

// SwiftUI - use accessibilitySortPriority (higher = earlier)
Text("Summary").accessibilitySortPriority(2)
Button("Details").accessibilitySortPriority(1)

// BEFORE: Icon button with no semantic name
IconButton(onClick = { close() }) {
    Icon(Icons.Default.Close, contentDescription = null) // BAD - null hides it
}

// AFTER: Named icon button
IconButton(
    onClick = { close() },
    modifier = Modifier.semantics { contentDescription = "Close dialog" }
) {
    Icon(Icons.Default.Close, contentDescription = null) // null OK - parent has description
}

<!-- ImageButton: always set contentDescription -->
<ImageButton
    android:contentDescription="@string/close_button"
    android:importantForAccessibility="yes" />

<!-- Decorative image: hide from TalkBack -->
<ImageView
    android:contentDescription="@null"
    android:importantForAccessibility="no" />

<!-- Group elements - parent absorbs children -->
<LinearLayout
    android:focusable="true"
    android:contentDescription="Product: Laptop, $999, Add to cart"
    android:importantForAccessibility="yes">
    <!-- children set to noHideDescendants -->
</LinearLayout>

Xcode -> Xcode menu -> Open Developer Tool -> Accessibility Inspector
- Run audit: Audit tab -> Run Audit
- Inspect elements: Inspection tab -> hover element
- Simulate VoiceOver: +F7 in Simulator

Install: Play Store -> "Accessibility Scanner" (Google)
Use: Overlay -> tap blue checkmark -> scan screen
Output: Issues list with severity and suggested fixes

# Android TalkBack via ADB
adb shell settings put secure enabled_accessibility_services \
  com.google.android.marvin.talkback/com.google.android.marvin.talkback.TalkBackService

# Check accessibility tree (RN)
# In Metro: press 'a' for Android accessibility report

import { render, screen } from '@testing-library/react-native';

test('close button is accessible', () => {
  render(<CloseButton onPress={jest.fn()} />);

  const button = screen.getByRole('button', { name: /close/i });
  expect(button).toBeTruthy();
  expect(button).toHaveAccessibilityState({ disabled: false });
});

// Check accessibility label
await expect(element(by.label('Submit form'))).toBeVisible();

// Verify role
await expect(element(by.id('submit-btn'))).toHaveRole('button');

- assertVisible:
    label: "Close dialog"
- tapOn:
    label: "Submit form"

## Mobile Accessibility Audit - [Component/Screen Name]
**Platform:** React Native / iOS / Android
**Date:** YYYY-MM-DD
**Severity Filter:** All Issues / Errors + Warnings / Errors Only

### Summary
| Severity | Count |
|----------|-------|
| Error | N |
| Warning | N |
| Tip | N |

### Issues

#### [RN-001 / iOS-001 / AND-001] [Short Description]
- **Severity:** Error | Warning | Tip
- **File:** path/to/Component.tsx (line N)
- **WCAG:** [SC number] - [Name]
- **Impact:** [Who is affected and how]
- **Current code:** `<code snippet>`
- **Fix:** `<corrected code snippet>`