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.
Press me!
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
Submit
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
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
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.
