Our iOS and Android apps are the most popular Dutch apps in the Apple and Play stores. Millions of Dutch people use our app everyday, including those with visual impairments.
We thought that we had a good accessibility app as we used the Accessibility labels for our automated testing. Everything had a label so we thought that was good enough.
However, one of the unintended side effects of our iOS 3.0 app release was that we had unknowingly broken a lot of the functionality of our app when VoiceOver was on.
A visually impaired user contacted our customer services to complain that the app had become unusable and we asked him to help us. We visited him and watched how he used the app and where he got stuck.
Here is what we have learned.
Switch on VoiceOver shortcut.
Go to Settings > General > Accessibility > Accessibility Shortcut off > VoiceOver
This enables you to use the switch VoiceOver on anytime by clicking the home button 3 times quickly.
Learn the gestures.
The basic navigation is a swipe from left to right across the screen anywhere on the screen. When a page is loaded the first element is highlighted and the text is read out – if its an icon there should be an accessibilityLabel that is read out instead.
The swipe is used to move onto the next element to be read out and if they want to ‘touch’ that item then they double click with one finger anywhere on screen
Copy the native apps
For us the mail app was the closest to our own. We based how our app should behave by comparing to the mail app.
Each ‘result’ of the list should be read out as one VoiceOver text. The different elements making up the result should be read out in order of importance. The user want to be able to work out as quickly as possible if they want to keep listening or move onto the next.
Our app was reading each individual text element so of the user wanted to skip that result then they had to skip 4 or 5 times to get to the next result. The user should be able to drag a finger down the list and each click is a result – so they can skip the first 3 results in the list by dragging from top to bottom for 3 clicks.
We hadn’t realised that it was also important to know where you were when you returned to this list. In our app, the result opens an advertisement for an item for sale. When the user wants to go back to the list – the back gesture is a two-fingered backwards Z that starts from the bottom and goes to the top of the screen – then the same result should be still selected and VoiceOver should read out the contents again. This verifies to the user that they are back at the same point and can continue scanning the list.
Accessibility labels for icons
Our screen for a single advertisement has an action bar at the bottom.
To our eternal shame – even the Contact and Place Bid (Plaats Bod) buttons, the two most important functions on the screen, were not available to visually impaired users. All the actions on the bottom bar were obscured by one label that was read out as “VIP floating bar”.
We saw that the user had to switch off VoiceOver, and select Contact, then switch VoiceOver back on again to be able to contact the seller about the item for sale.
We fixed this so that the 4 actions are read out as individual elements, Contact, Place bid, Add ad to my favorites, and Share.
We had written our own custom image picker. This had given us the ability to select more than one image from the library at the time. A handy feature for most of our users but we lost entirely all the accessibility features the native image library has that we were not even aware of.
It was not possible to select a photo at all when VoiceOver was on. The user had to switch it off pick and image and switch it on again. There is meta data for an image which should be read out – containing the time it was taken and some idea of the sharpness and lightness of the image. Its also possible to add a label to a photo from the native image library. Our app should allow that label to be read out too.
Our solution is to detect if VoiceOver is on and use the native image library instead of our own. This way we get all the native accessibility features for free.
Adding a label to an image
Go to the native Photos app, turn on VoiceOver, navigate till an image is highlighted. This will read out the metadata. To add a label you need to tap twice with two fingers but hold down on the second tap till you hear three pings. A popup should appear where you can add text. This one takes practice, 2 taps on its own just starts your Music playing.
Our user had a simple request for this screen. When a photo has been added, read out the label and meta data – on the empty tiles say ‘add photo’. We had everything saying tile 1, tile 2, tile 3, no matter if an image had been added already or not.
Try it for yourself or even better watch a real user using your app with VoiceOver. For visually impaired people the technology in their iPhone makes life easier for them. Make sure your app does too.
This is a great blog by Matt Gemmell about Accessibility on iOS apps.