UIAccessibility is a set of methods that provide assistive information for the users with visual disabilities. It lets users access information about the views and controls in UI and let them take actions like UIButton tap etc, also helping to navigate through the app.

Accessibility is the most ignored part of the app development, but please remember any app we create is meant for all sections of users and code needs to be written to let the visual impaired users to experience your app. And I believe every responsible company should make their apps accessible for the users with the special needs.

One example of assistive functionality is VoiceOver which we will go in detail in this article. VoiceOver can be enabled in Settings->General->Accessibility->Voiceover.  VoiceOver (VO) can also be accessed via shortcut by tapping home button 3 times on non-iPhone X devices or by clicking right button 3 times on iPhone X.

Accessibility can be set either on UI InterfaceBuilder or in code. First part of this article covers the basics of UIAccessibility and how to add accessibility to simple views. Second part covers the accessibility for complex views.

Basics:

accessibilityLabel,  accessibilityHint, accessibilityValue, accessibilityTraits:

These are the four basic properties that define the accessibility of the view. Just for demonstration purpose, I created the below view that First Name and Last Name UILabels, first name and last name UITextFields, submit UIButton

 

 

 

 

And below is the func that I called in viewDidLoad(). 

func setupAccessbility() {
        firstNameLabel.accessibilityLabel = "First Name"
        firstNameLabel.accessibilityTraits = .staticText
        
        lastNameLabel.accessibilityLabel = "Last Name"
        lastNameLabel.accessibilityTraits = .staticText
        
        firstNameTextField.accessibilityHint = "Enter FirstName Here"
        lastNameTextField.accessibilityHint = "Enter LastName Here"
        
        submitButton.accessibilityLabel = "Submit"
        submitButton.accessibilityHint = "Tap here to submit"
        submitButton.accessibilityTraits = .button        
    }

 

Run the app on the simulator and open the tool “Accessibility Inspector” tool from Xcode-> Open Developer Tool. This tool lets tool let you see the accessibility properties and take action as needed. Here in the screenshot that shows the various accessibility sections. Select the highlighted button in the inspector and then select the UI element on the simulator to see its properties.

 

 

 

 

 

 

 

 

 

 

 

When run on the iPhone device and VO activated – VO highlights the frame of each element and you can navigate the app from top left to bottom right (by swiping right, left) in the sequence of the elements laid on the UI. The sequence can be altered which will be discussed later.

The VO reads out in the order below for each element:

1.  accessibilityLabel
2. accessibilityValue
3. accessibilityTraits 
4. accessibilityHint
5. default actions of the UIControl or the custom action defined programatically.

• First property that VO reads out is accessiblityLabel. In this example, “First Name” being a UILabel, its reads “First Name” as default. If you want to read the custom value, just change the value of accessiblityLabel.
• accessibilityValue is the value of the UI element. In this example, textfield’s default accessibilityValue is the text that is entered. If you need to read the value that is different from what is entered, give the custom value to accessibilityValue.  firstNameTextField.accessibilityValue = “Fixed Value“ reads  “Fixed Value” as the accessibilityValue no matter what the text user entered.
• accessibilityTraits defines the type of the data UI element holds. UIAccessibilityTraits is the enum that holds the possible values from the below screenshot. UILabels being the static data, it’s  accessibilityTraits property is assigned to .staticText. “Submit Button” is assigned the .button value. There are often scenarios where we need a UIView element that is tappable (with UITapGestureRecognizer added) and behave as a button. For accessibility, just assign view’s accessibilityTraits value to button. VO read out the view to the user as a button suggesting the tap action.

 

 

 

 

 

 

 

 

 

 

 

• accessiblityHint as the name suggests is the hint that we can provide the user about the UI element. Say in our case, when VO highlights textfield – we can explicitly read out to them the context, use of the textfield and what it is intended for.
• Last accessibility item that VO reads is the action that can be taken on the UI element. It is inferred from accessibilityTraits. For accessibilityTraits button, the default action that is taken is to double tap to execute the tap action. For the custom view, we can define our own custom actions like swipe up, swipe down etc. The details of this topic will be covered in part two of this article.

Feel free to let me know in comments if you need any help on implementing the accessibility in your project. Will be happy to help !