Summary - Accessibility
- React Native course
- Expert
- Lesson 30/47
- 5 min
Combine Label, Role, Hint and VoiceOver to write an accessible button.
Summary - Accessibility
In this group you saw accessibilityLabel, accessibilityRole, accessibilityHint, accessibilityState and VoiceOver/TalkBack testing. An accessible component has four pieces: what it is (label), which type (role), what it does (hint) and its current state (state).
In the last lesson you will write a component that joins all four. This way screen reader users can roam the app smoothly. Accessibility is not an extra; it is part of every component. Do not leave it untested; walk at least one screen with VoiceOver.
Practice Combine the four props
Add four accessibility props to a TouchableOpacity: accessibilityLabel="Notifications", accessibilityRole="button", accessibilityHint="Open notifications", accessibilityState={{ selected: true }}. Include onPress too.
Starter code
import React from 'react';
import { TouchableOpacity, Text } from 'react-native';
function BellButton() {
return (
// add the four accessibility props
<TouchableOpacity onPress={() => {}}>
<Text>Notifications</Text>
</TouchableOpacity>
);
}Sample solution
import React from 'react';
import { TouchableOpacity, Text } from 'react-native';
function BellButton() {
return (
<TouchableOpacity accessibilityLabel="Notifications" accessibilityRole="button" accessibilityHint="Open notifications" accessibilityState={{ selected: true }} onPress={() => {}}>
<Text>Notifications</Text>
</TouchableOpacity>
);
}Practice Write an accessible image
Add accessibilityLabel="Logo" and accessibilityRole="image" to an Image component. The source prop is already given.
Starter code
import React from 'react';
import { Image } from 'react-native';
function Logo() {
return (
// add the accessibility props
<Image source={require('./logo.png')} />
);
}Sample solution
import React from 'react';
import { Image } from 'react-native';
function Logo() {
return (
<Image accessibilityLabel="Logo" accessibilityRole="image" source={require('./logo.png')} />
);
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which one gives a component's state?
accessibilityState={{ checked: true }}- accessibilityLabel
- accessibilityState Correct answer
- accessibilityRole
- accessibilityHint
Explanation: accessibilityState carries the state.
2 Match each prop to its role
| Term | Meaning |
|---|---|
accessibilityLabel |
Says what it is |
accessibilityRole |
Semantic type |
accessibilityHint |
Says what it does |
accessibilityState |
Current state |