We’ll be covering some of the basics to make our React Native apps more accessible to all users.
Accessibility has become a significant topic of discussion in the tech industry as more companies need to provide great experiences with their products for as many customers as possible. However, it’s sometimes regarded as an afterthought in the development life cycle of apps and software in general.
React Native is a core library being used for cross-platform development covering both iOS and Android. Due to the differences in architecture and processes, providing accessible components for both Android and iOS require different implementations in accordance with the platform being worked on. However, there are a number of properties that cover the creation of these components on both platforms.
Accessibility on mobile devices is mostly centered around the use of assistive technologies like VoiceOver for iOS and TalkBack for Android. This also applies to React Native as we need to create components that read out what they are, what they intend to do once they are interacted with, and how descriptive they are. React Native offers us a number of properties that can be used to make our apps more accessible, which we look at in the next section.
<View accessible={true}>
<Text>text one</Text>
<Text>text two</Text>
</View>
This code snippet shows that the View component is made accessible by just adding the property with a true value.
Accessibility Label tells users what they have pressed by using the screen reader assistive technology to describe it.
For example:
<TouchableOpacity
accessible={true}
accessibilityLabel="Tap me!"
onPress={onPress}>
<View style={styles.button}>
<Text style={styles.buttonText}>Press me!</Text>
</View>
</TouchableOpacity>
This code snippet shows that adding an accessibilityLabel with the value “Tap me” tells the user to tap the button once they interact with it.
The accessibilityHint property focuses on what the user is meant to do with a component by giving them a hint of what said component is capable of doing. For example,
<TouchableOpacity
accessible={true}
accessibilityLabel="Go back"
accessibilityHint="Navigates to the previous screen"
onPress={onPress}>
<View style={styles.button}>
<Text style={styles.buttonText}>Back</Text>
</View>
</TouchableOpacity>
The code snippet above sets up a hint that would be read out to the user by the screen reader when the user interacts with the component. This gives a hint to the user about what the component is set to do.
The accessibilityRole property tells the user through the screen reader the role of the property they’re interacting with, such as a button, an alert, a checkbox or an image. For example:
<TouchableOpacity
accessible={true}
accessibilityLabel="Go back"
accessibilityRole="button"
accessibilityHint="Navigates to the previous screen"
onPress={onPress}>
<View style={styles.button}>
<Text style={styles.buttonText}>Back</Text>
</View>
</TouchableOpacity>
The code snippet above sets the Touchable opacity component to read out to the user that this is a button. Similar to the accessibility hint, this tells the user exactly what the role is of what they’re interacting with.
These are just a few of the properties being offered in the React Native library that would make a big difference in making your apps more accessible to all users. To find out about more properties that could be utilised for accessibility, you should check out the official React Native third-party library.
Have fun and let's work towards making our apps more accessible for everyone.
Search over 400 blog posts from our team
Subscribe to our monthly digest of blogs to stay in the loop and come with us on our journey to make things better!
We develop intelligent mobile apps for iPhone & Android that deliver for you.
Want to connect? You can find us on Instagram, Facebook, X (formerly Twitter) and LinkedIn.
Here’s our privacy policy.
Here’s our Accessibility statement.
Copyright © 2024 Brightec Limited. All rights reserved.
