Recently in a meeting at my company, we were doing a retrospective — you know, the kind where you write "Start," "Stop," and "Keep" up on a board and everyone offers their thoughts on how we can improve moving forward. I raised my hand and asked, "Have we talked about accessibility lately?"
I quasi-knew the answer. We were so set on getting a prototypical version of our app out there in front of clients and the public that we hadn't focused on that particular detail, despite our mission being to make healthcare more accessible and understandable for everyone. The good news is, it landed in the "Start" column, and we set up a meeting with our architect, front-end devs, and designer to talk through accessibility guidelines and what it would take to make our React Native app more accessible.
Here's what I learned.
React Native's documentation is pretty good on this point! Essentially, the main thing (besides the guidelines for web accessibility, which still apply to mobile — think color contrast and other visual concerns) is making sure UI elements are exposed to native screen readers, which include VoiceOver for iOS and TalkBack on Android. This can be as easy as adding accessibility={true} as a prop on a component, and also adding an accessibilityLabel. That label is what will be read aloud when a user focuses on the element.
render() {
return (
<View
accessible={true} // fun fact: you don't need the "={true}" here!
accessibilityLabel="Benefits information section"
>
<Text>Plan information for 2018</Text>
<Text>More info here</Text>
</View>
)
}
What's really nice about this structure is that all those <Text> elements will also have their accessibility prop set to true, because they are nested inside an accessible component.
Another nifty feature is accessibilityHint. This prop is pretty self-explanatory; it provides a hint that will be read aloud after the label, which can be useful for touchable elements. You can alert the user as to what action will occur if they touch that element.
render() {
return (
<TouchableOpacity
accessible
accessibilityLabel="Benefits information"
accessibilityHint="Navigates to screen with benefits information"
accessibilityRole="link"
>
<Text>Plan info for 2018</Text>
</TouchableOpacity>
)
}
You'll notice I also included the accessibilityRole in this example, which tells the screen reader tool what kind of element you're presenting. Other examples include button, search, image, and header. Any clues you can give the screen reader about your content will help it to better interpret and present your app to the user. It can be super revealing to turn on VoiceOver on your iPhone and experience firsthand how it navigates your favorite apps!
There are plenty of other features specific to iOS or Android, and you can check them all out in the documentation. I definitely found it to be a useful starting point for making our app more usable for everyone.