Quick tips for IOS app accessibility

In our previous posts we have discussed about the gestures and few functionalities of the inbuilt screen reader voiceover on IOS devices. Now let us have a small journey that shows how to make a native app of IOS accessible.

Accessibility of a native IOS app

The SDK of IOS 3.0 and above has provided extensive support for accessibility features in the interface developer. All the accessibility controls that are provided in the interface developer are enabled by default for the native control kit. However the controls that are customized should be paid more attention on accessibility perspective. The following 4 tips need to be kept in mind while developing an native app to ensure that the app is accessible.

Enable Accessibility

Accessibility is enabled by default for all the native UI controls but it should be enabled by the developer when a customized control is used in the app.

Accessibility Label

An accessibility label is a simple description that can be provided for any native UI element. For example to provide a description for an image an accessibility label can be used. In certain instances an icon is provided to convey the information to the user. Unless you provide some description to it via accessibility label voiceover cannot pick it up and hence an voiceover user will miss that information.

Generally a plus mark will be shown as an indication for “Add”. For this icon an accessibility label such as “Add” or “New” can be provided. Depending on the context this label can be “New mail”, “Add a file”, “download the document” etc. As a good practice the accessibility label should not be more than 3 words.

Now voiceover announces “Add a file” for the control that has an plus icon.

  • Native UI element: Image
  • Accessibility label: Add a file.

Assigning Accessibility Traits

A trait is a type of control. Links, buttons, images are few common type of controls that are usually observed across any app. When accessibility is enabled the accessibility trait is selected by default. For a custom control accessibility trait should be selected as appropriate. Also when the developer thinks the default trait is not the appropriate for the control, it can be changed as appropriate.

For the same above example of an plus (+) icon the accessibility trait can be a button. Voiceover will announce the trait along with the accessibility label.

Now voiceover announces it as “Add a file button”.

  • Native UI element: Image
  • Accessibility label: Add a file.
  • Accessibility trait: button.

Accessibility Hint

Though accessibility hint is an optional accessibility feature in certain situations the hint provide the extra information for the user. Voiceover reads the information in the hint with a pause after the accessibility trait. Voiceover users can enable or disable the hints option from the rotor. Remember that hints are different from instructions.

For the above example the hint can be “Adds a new file to the directory”.

Now the voiceover announces the control as “Add a file button, Adds a new file to the directory”.

  • Native UI element: Image
  • Accessibility label: Add a file.
  • Accessibility trait: button.
  • Accessibility hint: Adds a new file to the directory.

Hope you enjoyed the journey how a simple icon became the accessible native element with accessibility label, accessibility trait and accessibility hint.