Student starter code (30% baseline)
index.html- Main HTML pagescript.js- JavaScript logicstyles.css- Styling and layoutpackage.json- Dependenciessetup.sh- Setup scriptREADME.md- Instructions (below)💡 Download the ZIP, extract it, and follow the instructions below to get started!
Make your Creative Studio accessible to everyone, including users who rely on screen readers, have motor difficulties, or need enhanced visual contrast.
By completing this activity, you will:
accessibilityLabel, accessibilityRole, etc.)AccessibilityInfo.announceForAccessibility() for dynamic announcements# 1. Install dependencies
npm install --legacy-peer-deps
# 2. Start the app
npx expo start
# 3. Press 'w' for web or scan QR code with Expo Go
The template includes a functional photo gallery app:
| Component | File | Status |
|---|---|---|
| AccessiblePhotoCard | components/AccessiblePhotoCard.js |
TODO 1 |
| AccessibleIconButton | components/AccessibleIconButton.js |
TODO 2 |
| AccessibleAlbumForm | components/AccessibleAlbumForm.js |
TODO 3 |
| AccessibleStatus | components/AccessibleStatus.js |
TODO 4 |
Make the photo card announce meaningful information to screen readers.
File: components/AccessiblePhotoCard.js
What to add:
// On the main TouchableOpacity:
accessible={true}
accessibilityLabel={photoDescription}
accessibilityHint="Double tap to view full size"
accessibilityRole="imagebutton"
accessibilityState={{ selected: isSelected }}
// Don't forget to announce deletions:
AccessibilityInfo.announceForAccessibility(`Photo deleted: ${photoDescription}`);
Success Criteria:
Add accessibility props to the icon button component.
File: components/AccessibleIconButton.js
What to add:
accessible={true}
accessibilityLabel={label}
accessibilityHint={hint}
accessibilityRole="button"
accessibilityState={{ disabled: disabled }}
Success Criteria:
Create an accessible form with proper labels and error announcements.
File: components/AccessibleAlbumForm.js
What to add:
accessibilityLabelledBy to connect labels to inputsAccessibilityInfo.announceForAccessibility() for errorsaccessibilityRole="alert" on error containeraccessibilityLiveRegion="polite" for dynamic contentSuccess Criteria:
Make loading, success, and error states announce to screen readers.
File: components/AccessibleStatus.js
What to add:
// In useEffect hooks:
AccessibilityInfo.announceForAccessibility(loadingMessage);
AccessibilityInfo.announceForAccessibility(successMessage);
AccessibilityInfo.announceForAccessibility(`Error: ${errorMessage}`);
// On containers:
accessibilityRole="progressbar" // for loading
accessibilityRole="alert" // for success/error
accessibilityLiveRegion="polite" // or "assertive" for errors
Success Criteria:
Settings → Accessibility → VoiceOver → On
Gestures:
Settings → Accessibility → TalkBack → On
Gestures:
Run through this checklist with screen reader enabled:
Create a high contrast theme toggle:
const highContrastColors = {
text: '#000000',
background: '#FFFFFF',
accent: '#0000CC',
};
Respect system reduce motion settings:
import { AccessibilityInfo } from 'react-native';
const [reduceMotion, setReduceMotion] = useState(false);
useEffect(() => {
AccessibilityInfo.isReduceMotionEnabled().then(setReduceMotion);
}, []);
Add accessibility actions for voice control:
accessibilityActions={[
{ name: 'delete', label: 'Delete photo' }
]}
onAccessibilityAction={(event) => {
if (event.nativeEvent.actionName === 'delete') {
handleDelete();
}
}}
activity-19-accessibility-implementation/
├── App.js # Main entry point
├── README.md # This file
├── package.json # Dependencies
├── components/
│ ├── PhotoCard.js # ✅ Non-accessible version (compare)
│ ├── AccessiblePhotoCard.js # ⚠️ TODO 1
│ ├── AccessibleIconButton.js# ⚠️ TODO 2
│ ├── AccessibleAlbumForm.js # ⚠️ TODO 3
│ └── AccessibleStatus.js # ⚠️ TODO 4
├── screens/
│ └── GalleryScreen.js # ✅ Main screen
└── utils/
├── ContrastChecker.js # ✅ Utility for checking contrast
└── SamplePhotos.js # ✅ Sample data
Once you've added accessibility to all components:
PhotoCard for AccessiblePhotoCardRemember: Over 1 billion people worldwide have disabilities. By making your apps accessible, you're ensuring everyone can use what you build!