I heard from a user this week that some screens in Epilogue aren’t very accessible with VoiceOver. To be honest I was so focused on getting this release out, I didn’t test accessibility. Most of the buttons and views do have good defaults for accessibility, provided by iOS, but there was one pattern I was using with React Native’s <Pressable> that needed to be updated.
This is the JSX code I have for showing the profile photo in the navigation bar, which can be tapped to show the profile screen:
<Pressable onPress={() => { onShowProfile(); }}>
<Image source={{ uri: avatar_url }} />
</Pressable>
To fix this, I first tried adding an accessibilityLabel attribute to the <Image>, but I found it works better on <Pressable>, where the role can also be set to “button”:
<Pressable onPress={() => { onShowProfile(); }} accessibilityRole="button" accessibilityLabel="show profile">
<Image source={{ uri: avatar_url }} />
</Pressable>
There is more I could do, but as a first pass these kind of tweaks should make Epilogue much more usable in VoiceOver. I did a quick run-through with Accessibility Inspector to catch similar problems. After I test on my iPhone, I’ll roll these into a bug fix update.
