Accessibility/ADA testing in iOS

You can design your apps in such a way that every one can use that app, including people with vision, learning or hearing disabilities through accessibility.

Accessibility is implemented on all standard UIKit views and controls so that assistive applications can present them to users with vision and hearing disabilities.

voice over is gesture based screen reader used in accessibility.

What are the advantages of Accessibility?

• It’s easier for functional and UI testing
• Everyone can use your app, including people with vision, learning or hearing disabilities.

How you test ADA in phone?

1. Go to Settings -> Accessibility -> VoiceOver.
2. Turn on VoiceOver
3. Run your app.
4. VoiceOver speaks the contents of the element

How to use app when Voice Over is on?

• Single-tap anywhere on the screen : voice over reads the data
• Single-swipe right: Move to next element on the screen
• Single-swipe left: Move to previous element on the screen.
• Double tap: To select the element.

How can you implement accessibility?

Add following code to your custom view to make it accessible.

view.isAccessibilityElement = true

view.accessibilityLabel = “ ”

view.accessibilityHint = “”

view.accessibilityTraits = UIAccessibilityTraits type

Five properties of Accessibility Attributes:

1. Label: is the way to identify the control or view. Some examples are Back button and Hi welcome to accessibility app
2. Traits: These describe the element’s state, behaviour or usage. Some examples are .none, .button, .header, .isSelected
3. Hint: Describes the action an element completes. For example: Tap on button to change colour
4. Frame: The frame of the element within the screen, in the format of a CGRect. VoiceOver speaks the contents of the CGRect.
5. Value: The value of an element. For example, with a progress bar or a slider, the current value might read: 20 out of 25

How can you disable accessibility for a view?

Set isAccessibilityElement as false for the view to which you need to disable accessibility i.e view.isAccessibilityElement = false .

Consider a situation, where you have custom view i.e tableview cell with labels. If you need to focus the whole cell instead of subviews of the cell then keep isAccessibilityElement = true for cell.

Set isAccessibilityElement = true for child views or parent view according to your app requirement.

How to test accessibility in simulator?

don’t worry if you don’t have iPhone to test accessibility using voice over. You can test accessibility in simulator using Accessibility Inspector

Steps to use Accessibility Inspector:

1. Open accessibility inspector: Xcode -> Open Developer Dool -> Accessibility Inspector as shown in fig.1
2. Run your app
3. Change Accessibility Inspector target to simulator as shown in fig2.

fig.1 : accessibility inspector and fig2: changing target

4. Enable Inspected Element to find the focused element while the app is running in a simulator. Default accessibility inspector should look like this

5. You can press the Play button in navigation tab while the app is running in a simulator, let the Accessibility Inspector cycle through the app and voice over reads each elements. You can pause the audio at any time by pressing pause button

6. You can use backward and forward button for focusing next and back element.

In the above app, I’ve taken two labels and a button. First label is header in this app. I need to describe that label as header so i set the value for accessibilityTraits as .header , for button as .button and for normal text label as .none

Note: Voice over reads the text inside label, textfield or button with title automatically even though if your not using accessibilityLabel

To describe about Button with image or image view, you need to explicitly add accessibilityLabel for these views.

3 different tabs in Accessibility Inspector:

1. Inspection Detail pane
2. Inspector Audit
3. Settings

1. Inspection Detail pane:

It has everything you need to review and interact with the accessibility attributes in your app:

• Basic: Displays the attribute properties for the currently-highlighted element.
• Actions: Lets you perform actions like tapping a button or scrolling the view. Pressing the Perform button in this pane will perform the action on your target.
• Element: Displays the class, address and controller of the current item.
• Hierarchy: Shows the view hierarchy for the element, making it easier to understand complex views.

2. Inspector Audit:

It’s the most useful features due to its audit capability, which gives you warnings about accessibility problems within your app. To try out this feature, make sure your app is running in simulator. In the inspector, click the Audit icon and then Run audit.

How can you resolve these warnings?

• Click the Suggest Fixes icon, which looks like question mark in a circle against each warning and the inspector will offer suggestions about how to fix the issue. You can act on these suggestions later.
• Click the Eye icon to take a snapshot of the app. This is useful for anyone who needs to create bug reports.

3. Additional Inspector Settings

It provides few other accessibility option to test your app.

1. Invert colors: To preview what your interface looks like with dark and light theme. This is useful for people with light sensitivities, poor vision and colour blindness.

• If you want to change background colour of view or text in dark and light theme, create new color set in xcassets
• If you want to change images in dark and light theme, create new image set in xcassets
• Then add the following code to change appearance according to theme change.

Color set for label text color and view background color

code for changing colour with theme selected

2. Increase contrast: Contrast is a measure of the difference in perceived “luminance” or brightness between two colours.

3. Reduce transparency: Some apps use transparent and blurred backgrounds which can make text hard to read. It helps to test reduced transparency.

new viewcontroller is present after tapping on a button.Second view transparency change with reduce transparency accessibility

code for updating view transparency if isreduceTransparency enabled/disabled

4. Reduce motion: That limits the amount and intensity of animations.

Use of reduce motion in swift:

When Reduce Motion is on, certain screen effects are disabled on your device, including:

• Screen transitions and effects use the dissolve effect instead of zoom or slide effects.
• Parallax effect where your wallpaper, apps, and alerts that move or shift slightly as you tilt your device are disabled.
• Animation and effects in certain apps are disabled.

Animate and show label when button is tapped and reduce motion accessibility is not enabled

Disable animation if reduced motion is enabled.

5. Change font size: This is used to test dynamic font size changes for the users who prefer larger font sizes.

dynamic font change

code for dynamic font change

How can you test all these feature in phone?

1. Go to Settings -> Accessibility
2. Under accessibility -> Turn on setting which is required to test
3. Run your app.
4. Check the changes.

I hope you find this blog helpful. If you enjoyed it, feel free to hit the clap button below 👏 to help others find it! and follow me on Medium. Thanks for reading. ❤❤❤❤