iOS Accessibility Inspector: Beyond Automation
Mark Steadman

Mark Steadman @steady5063

About: Squad Leader - Accessibility Squad. I am a major JS Framework, Automation and Mobile #a11y advocate. Just livin the dream! #a11y #accessibility

Location:
United States
Joined:
Mar 12, 2021

iOS Accessibility Inspector: Beyond Automation

Publish Date: Jun 20
1 0

Xcodes accessibility inspector has long been thought of as only an 'automated' issue tool. This thought has led to its full potential never being fully met by developers and testers. So if it's more than just automated issues, then what should users be doing with it to catch more accessibility bugs? Let's dive right in.

Simple Testing List

Keeping it simple, there are 3 main categories of tests you can do to ensure you are getting the most out of the accessibility inspector:

  • Action Name/Role
  • App Navigation (Screen reader light)
  • Dynamic Type (Font size increase)

Setup Before We Begin

To access the XCode accessibility inspector, you must have Xcode open and then go to Xcode > Developer tools > Accessibility Inspector.

Once open, it may default you to the "Audit" function of the application. You need to navigate to the "Inspection" tab and ensure your screen looks like the one shown below in the image. If it does, you are ready to test!

Default view of 'Inspection' tab of accessibility inspector that includes Navigation, basic, and actions

Action Name/Role

Automated checks can only tell if an action has a label or has a trait, but what it cannot do is tell you if the label or the trait actually describes the purpose of the action!

Action Test 1: Proper Label

Once the action item is selected (highlighted) in the inspector, ensure the label properly describes the action item. For example, if the button is a "Search" icon, the label should be "Search" NOT "IC Search, icon".

The label also MUST NOT include the trait in the label. Using the search example above, we would not want it to read as "Search, button". As it would actually read, "Search button, button".

Ic search icon image example

Action Test 2: Proper Trait

Once the action item is selected (highlighted) in the inspector, ensure the trait for the action properly correlates to the expected action.

One prime example, buttons vs links. A button should keep you within the application while a link should take you to a WebView or out of the application.

Action Test 3: Over-riding Label

The final test, check that the label that is set does not override the visible text. Overriding visible text can make it confusing mainly for voice control users. Who can use "show text" to be able to tap a button.

For example, if the login button on your app visibly says login but the accessibilityLabel for it says "login to your application" it may not function with voice control.

Example of login button being overridden with improper label of 'Login to your application'

App Navigation (Screen reader light)

Accessibility inspector comes with a screen reader built in (similar to that of Voice Over) that allows you to hear and navigate the application as a screen reader user would! The advantage of this, is not all iOS developers have access to physical phones to test with VoiceOver!

Navigation Test 1: Accessibility focus order

Pressing the "Play" button on the Navigation group, let the navigator go through one by one of each item in the application and highlight each item.

Navigation bar example, that shows left/right and play buttons that are in the accessibility inspector

As long as the accessibility focus order goes from left to right in a concise and simple order that matches that of the visual order, then you are good! If it jumps and skips around the view while using it, then you have focus order issues.

Navigation Test 2: Proper grouping

Using the Navigation section, use the arrows right and left to navigate each item one by one in the view. While doing this, look for groups of content that could easily be put together.

The example image below shows a card component that can have the name, image, and description grouped as one, and then the "Add to Cart" button as the next accessibility focus stop. However, in this case they are all individual accessibility focus stops.

Accessibility grouping example, that shows  a card component that can have the name, image, and description being all separate focus stops

Dynamic Type (Font size increase)

The final test is for dynamic type! Which is a very simple test to ensure that your application properly is using dynamic type in your mobile application and the text resizes!

Different than the other tests, you will have to navigation in the top right to the "Settings" (the third button to the right). Once there, you will notice a number of different accessibility settings. Go to the bottom and select "Dynamic type".

Using the dynamic type resize function to test an application to ensure the text doesn't break accessibility rules

Once you do that, simply move the slider up and ensure that the text does not do the following:

  • Overlap over other text
  • Addition of trailing ...
  • Overflow its container and get cutoff

In Summary

Accessibility inspector is much more than just automation. Using these simple tests in daily development and QA, can help ensure that your application goes beyond the basics of automation and does more to ensure its accessibility!

Comments 0 total

    Add comment