Activity: Accessibility Implementation

Objective

Transform a basic app screen to be fully accessible for screen reader users and motor disabilities.

Starting Point

You have a food sharing app screen with these elements:

• Header: "Food Near You"
• Search bar
• List of 5 food items with photos
• "Request" button for each item
• Bottom navigation

Accessibility Checklist

Step One: Screen Reader Support (10 minutes)

Add Semantic Labels:

<View accessibilityRole="header">
  <Text accessibilityRole="heading" accessibilityLevel={1}>
    Food Near You
  </Text>
</View>

<TextInput 
  accessibilityLabel="Search for food items"
  accessibilityHint="Enter keywords to find available food"
  placeholder="Search..."
/>

List Structure:

<FlatList
  accessibilityLabel="Available food items"
  data={foodItems}
  renderItem={({item}) => (
    <TouchableOpacity 
      accessibilityRole="button"
      accessibilityLabel={`Request ${item.name} from ${item.donor}`}
      accessibilityHint="Double tap to request this food item"
    >
      <Image 
        source={item.photo}
        accessibilityLabel={`Photo of ${item.name}`}
      />
      <Text>{item.name}</Text>
      <Text>{item.donor}</Text>
    </TouchableOpacity>
  )}
/>

Step 2: Motor Accessibility (10 minutes)

Larger Touch Targets:

• Minimum 44x44pt for all interactive elements
• Add padding around small buttons
• Ensure spacing between adjacent buttons

Voice Control Support:

<TouchableOpacity 
  accessibilityLabel="Request apple pie"
  accessibilityActions={[
    {name: 'activate', label: 'Request this item'}
  ]}
>

Step 3: Testing Simulation (10 minutes)

Screen Reader Test:

1. Close your eyes
2. Navigate using only:
   • Swipe right (next element)
   • Swipe left (previous element)
   • Double tap (activate)

Motor Test:

1. Use only one finger
2. Try to hit all buttons accurately
3. Navigate without precise movements

Success Criteria

• Every interactive element has meaningful labels
• Navigation flow makes sense without visual cues
• All buttons are easily tappable
• Screen reader announces changes and states
• Alternative text describes images meaningfully

Reflection

• What assumptions about "normal" interaction did you discover?
• How does accessibility improve the experience for everyone?

📤 Submit Your Work

Complete this activity and submit your work through the Activity Submission Form