During an interview, I was asked how my application could be accessible to everyone, including people with disabilities. Before that, I had seen props like accessibilityLabel in some of the React Native Apis, but I never really paid much attention to them. I understood the importance of adding alt text to image tags from my web development experience, but I hadn’t fully explored how accessibility principles applied to mobile app development.
That question made me take a step back and dig deeper into mobile accessibility. I realized that making an app accessible is not just about ticking a box, it is about ensuring that every user, regardless of their abilities, can navigate and interact with the app seamlessly. In this article, I will share some best practices for building inclusive apps, especially for users with disabilities. Please drop your thoughts or experiences in the comment session, I will be looking forward to them.
1. Use Semantic Components and Proper Labels in your Application
What are semantic components?
Simply put, they are UI elements that clearly describe their purpose to users and assistive technology like screen readers. They are components that you structure and label in a way that reflects the intended function. A common example in web development is when you use <button> for actions instead of <div>, this ensures that they are recognized as an interactive element. Similarly, in React Native, when you set accessibilityRole=”button” on a TouchableOpacity, it tells screen readers that it behaves like a button.
Furthermore, a lot of accessibility issues come from poor labelling. Screen readers often rely on clear and meaningful descriptions to help visually impaired users understand app elements. If this is missing while developing your app, you make it extremely difficult for the app to be accessible to all.
Some of the props (labels) you can take advantage of include:
- accessibilityLabel: This is used to provide a meaningful description of UI elements in your app.
- accessibilityRole: This defines the purpose of a component. For example, if it would be a header or a button.
- accessibilityHint: With the use of accessibilityHint, you can give extra context on what an interaction will do.
Let us see an example of how you can set some labels in a TouchableOpacity component for a React Native App.
<TouchableOpacity
accessible={true}
accessibilityLabel="Tap me!"
onPress={onPress}>
<View style={styles.button}>
<Text style={styles.buttonText}>Press me!</Text>
</View>
</TouchableOpacity>
A snippet showing how you set accessible and accessibility labels to an element in React Native.
If you want to set roles for an element, this is also an example
<TouchableOpacity
onPress={handleSubmit}
accessibilityLabel="Submit form"
accessibilityRole="button"
>
<Text>Submit</Text>
</TouchableOpacity>
Setting roles to an element will help the screen reader clearly announce the button’s purpose to users.
2. Use Sufficient Color Contrast
Not everyone perceives colors the same way. Low contrast can make it hard for users with visual impairments to read text or even be able to recognize UI elements. This speaks both to the UI designer and the developer. A developer, most of the time will copy the color code from Figma or any of the tools that have been used to produce the design. It is your responsibility as a dev to ensure that your designer is aware of this rule of accessibility for all as well.
According to WCAG guidelines, the minimum contrast ratio should be 4.5:1 for normal text and 3:1 for large text. Furthermore, you should avoid relying on colors alone to indicate important information. You can adopt the use of icons and descriptions rather than description alone.
3. Make Your App Easy to Navigate with Keyboard & Gestures
Always remember that not all users will interact with your apps using touch screens, some rely on external keyboards, switch controls or voice commands. Therefore, while developing be careful not to deactivate some of these features that have been enabled automatically. For the features not available automatically, take the pain and time to activate them. I have always been a solution-oriented dev not one just building for building sake. You should be too!
Example of a focusable input field
<TextInput
accessible={true}
accessibilityLabel="Enter your email"
keyboardType="email-address"
/>
4. Help Everyone Enjoy Your Content with Text Alternatives
Many beginner HTML tutorials mention using the alt attribute for images, but they often don’t emphasize why it’s important. Visually impaired users rely on text descriptions for images, videos, and icons. It is best practice to always include alt text for images in web-based components, accessibility labels for icons and non-text UI elements while for videos and audio content use captions.
Example of an Image component (React Native) with an accessibility label
<Image
source={require('./logo.png')}
accessibilityLabel="Company logo"
/>
5. Carry out Accessibility Tests with Real Users and Tools
There are accessibility tools I often use to test my apps during development. In Xcode for instance, you can use the accessibility inspector while the accessibility scanner can be used for Android development.
You can also test how screen readers will interact with your app using VoiceOver (iOS) and TalkBack (Android) with your application.
Accessibility Is Not Just a Resolution, It is a Commitment!
As developers, we often set resolutions to write cleaner code, ship faster, or learn new frameworks. But in 2025, let’s go beyond resolutions and make accessibility a core part of how we build.
As you push your next update or start a new project, ask yourself: Is this app truly inclusive? If not, now is the time to change that.
