Hello developers!

My name is Marion and like every day, I am currently on my way to work. I am a software tester at ÖBB. My job is to help make various apps accessible so that they can be made compatible for the blind and visually impaired people. This is a very broad topic, and since I am completely blind, it is easy for myself to find the right access to the various areas of this subject. How exactly the final result looks and feels like is not the only top priority.
It is also important what conditions have to be met in order to properly develop an app and make it “barrier-free”. It has to be considered how to define the design and user interactions in a way that even a poorly sighted person can orient himself without difficulty.

My name is Stefan and like every day, I am sitting in my office and enjoy a large cup of coffee in the morning while reading my new emails. I am responsible for mobile services and especially for iOS software development at ÖBB. I always had a strong interest in user interaction and design topics. About six years ago, I had my first meeting with blind and visually impaired app users. I was impressed by how they used their iPhones and talked about different new apps they had discovered, their issues and workarounds with their daily life apps. I will never forget how grateful they were for our app improvements we made for them. Since then, my point of view for app development and usability has changed forever.

Establishment of mobile screen readers on iOS

In June 2009 the iPhone 3GS was presented. Technically this also was the first mobile gesture-controlled screen reader available. Visible content is read out aloud by the “VoiceOver” feature first integrated in iPhone OS 3.0. Initially only the English language was supported. Since then Apple has improved this functionality regularly and also added many new interfaces for developers. There are many more accessibility-features available beside “VoiceOver”.

iOS in Marion‘s everyday life

In the morning, the clock app with its wake-up feature makes it easier for me to get up early.
During the day, I always carry my iPhone with me. Some features of it such as the „Notes“ app make my life a lot easier. I often take notes on the go and can read them later like sighted people would do. The iPhone’s calendar app helps me to manage all my appointments. I read and compose almost all of my emails on my iPhone. This is all possible thanks to Apple’s deep integration of accessibility in iOS. For me the VoiceOver feature is very important. It enables voice output of the iPhone, which can easily be switched on and off. VoiceOver can read everything that is displayed on the screen.
During a train ride, I hold the iPhone to my ear or plug in my headphones to use it. To prevent others from watching what appears on the screen, I simply activate the screen curtain. This turns the screen black, but VoiceOver and the whole phone functionality remains active. That way I can answer my mails or enter passwords without anyone else reading.
Another nice addition is Siri. She helps me to quickly setup an alarm, tells me the current time and the weather conditions. She also calls my family and friends for me.

VoiceOver quick start guide

Configure the Accessibility Shortcut to toggle VoiceOver

  1. Open the iOS Settings-App
  2. Navigate to „General – Accessibility – Accessibility Shortcut“
  3. Select VoiceOver
  4. Press the Home button

Simply triple tap the Home button (right-side Button on iPhone X) to toggle VoiceOver on or off. If you are trying this on your personal iOS device, we recommend to select at least a second Accessibility Shortcut option. Doing so will display an action sheet instead of toggling VoiceOver on instantly. This prevents embarrassing situations in the public – trust us.
Alternatively, simply ask Siri to turn VoiceOver on or off.

Rotor settings

A quick accessible overlay menu for many VoiceOver options.
We highly recommend to change at least one Rotor setting before you start your accessibility exploration journey. Otherwise using VoiceOver will drive you nuts within the first minutes.

  1. Activate VoiceOver
  2. Put two fingers on the display and rotate them like you would open a bottle.
  3. A rotor will appear on the screen and every time you rotate further, a new option will be displayed.
  4. Rotate until you reach the option „Speaking Rate“.
  5. Lift your fingers and then swipe up/down with one finger until the speed of the spoken voice is adequate for you

There are many other settings you can change here. Check Apple’s documentation or simply try them out.

Exploration

Move your fingertip on the display and you will notice that iOS reads all the content below your touch area aloud. The area of the spoken content will be outlined. To perform an action you would normally simply tap on a certain UI element. With VoiceOver activated, you have to double tap (anywhere) on the screen and the currently focused area will receive the touch event.

Common gestures

  • Next item – Swipe from left to right with one finger
  • Previous item – Swipe from right to left with one finger
  • Scroll content – Swipe with three fingers at the same time
  • Adjust values – Select an adjustable control and swipe up/down with one finger
  • Drag items – Double tap and hold to activate
  • Back-Button shortcut – Swipe a Z-shape with two fingers

Screen curtain – stealth mode

To toggle the screen curtain triple tap the screen with three fingers while VoiceOver is running. If you want to prank your friends this is also a possibility to do so. Even rebooting the device does not disable the screen curtain.

Stefan’s app development quick tips

Make Views Accessible

  • Provide alternative accessibility text labels for images, icons and interface elements
  • Describe your accessible content very short and briefly
  • Do not include the type of the control or view in your “accessibilityLabel”
  • Begin your accessible text with a capitalized word
  • Do not end your accessible text with a period

Screen updates

  • Announce important changes when reloading data in your user interface
  • Avoid to implicitly change UI content (e.g. on button actions)

Focus & Order

  • Set the focus on the correct view to start with (e.g. first entry in a table view)
  • Provide a useful order for your UI elements for VoiceOver

User Interface

  • Use scalable fonts provided by iOS if possible
  • Don’t provide a different implementation for your UI when VoiceOver is active – not only complete blind people will use your app

Further reference

  • Watch Apple‘s WWDC Videos about „Accessibility“
  • Read Apple’s „Accessibility Programming Guide for iOS“
  • Read Apple‘s „Accessibility on iOS“

Embrace your existing app’s accessibility potential

Understanding how to properly make an app barrier-free is difficult for sighted persons. For me the usability depends on several factors. First of all, it is important that the information that VoiceOver reads is brief and concise. The statements must be clearly understandable, because too long and laborious texts confuse rather than help. However, the user must also be able to understand what kind of information is provided in the current context. Furthermore, a clear distinction must be made between switch, button, link, hyperlink, or even a field that is not available at the moment. Such fields are titled “dimmed”.
In addition, it is advantageous if individual fields or menu items are displayed clearly next to each other. If this is not the case, you quickly lose your orientation and it takes up unnecessary time to orient yourself again.

Common coding pitfalls

UIView – accessibilityHint

  • Can be disabled in the iOS settings by the user
  • Use short descriptions

UIView – accessibilityViewIsModal

  • The content below overlay views is accessible with VoiceOver per default
  • Set this value to true to prevent unwanted focus positions

UIView – accessibilityElements

  • Override accessibilityElements function to provide a custom navigation order

UIView – accessibilityTraits

  • Choose appropriate traits for your UI elements
  • Button, hyperlink, headline, image etc.

UIViewController – accessibilityPerformEscape()

  • Z-shape gesture custom implementation – perform a back-button action
  • Override accessibilityPerformEscape() and implement your own dismiss action
  • Provide it in modal presented view controllers or to close custom overlay screens

 

Marion meets a new app

When I download a new app on my iPhone, at first, I have to get a clear picture of it. I need to get to know the individual menus and their sub-items to understand their structure. This usually takes longer than a sighted person who can grasp certain things with a glance as I have to go through the app step by step. Therefore, it is even more important to make apps as easy to use as possible for blind and visually impaired people. The most important detail here is VoiceOver support. A “Confirm button”, is visible to a sighted person as such. For me it is read as the text “Confirm button” – if programmed correctly. It is also possible to define your own labels for individual UI elements as app user but this is only a bad workaround.

Interview with Hikmet

Now we’ve already talked a lot about what accessibility means for blind people. But what about people that are not completely blind? To find out, we conducted an interview with a visually impaired young man who explained to me what’s personally important to him about apps and how he uses them.

Interviewer: What is important for you to be able to use an app well and without any problems?
Hikmet: First of all, the app should be accessible in landscape mode, as it gives me a better view of the keyboard and makes typing easier for me. A well-chosen contrast is also extremely important. For example, if the background is gray and the font color is white, I have trouble to recognize details. A black background and a white font, however, would be much better. Of course, the app should also be clearly structured. Oh well, in some apps have noticed that a curved font is used, similar to a signature. This also causes me great problems reading. One more thing, when using login masks, one asterisk for each character appears in the password field. However, it should be possible to check later if you have entered the correct password. Only in some apps, this is supported.
Interviewer: What settings or help do you need to make it easier for you to work with different apps?
Hikmet: First of all, I use the built-in magnifier on Android for magnification. In addition, I use negative colors. This means that the colors of the background and the font are simply interchangeable. I do not need a language assistant like VoiceOver.
Interviewer: Thank you very much for this very interesting interview.

Awesome!

You now have an idea how blind and visually impaired people use their mobile devices and entered their world of app exploration. Keep in mind that you can achieve big improvements even with minor efforts for these users. Your app can greatly improve their quality of living and help them during their daily activities.