Crystal Preston-Watson:
This video is the second part of getting started with iOS and Android development environments for mobile accessibility testing. Today’s video covers Xcode and demonstrates how to create simulated iOS devices and use the accessibility inspector to test native iOS applications. While there might be more advanced techniques, these videos are for those just starting with accessibility testing and don’t require any coding or a particular language. It also gives those working on teams and initiatives with tight budgets the viable option to conduct mobile accessibility testing without setting up a physical device lab or using cloud testing platforms. Let’s get started.

Crystal Preston-Watson:
The first step is getting Xcode installed if you don’t already have it. It’s available for free in the Mac App Store. However, Xcode is only for Mac OS, so if you have Windows, the only way to get Xcode on your computer would be a virtual machine. Note that if you haven’t already upgraded to the latest version of Mac OS, you might not be able to download the latest version of Xcode. If that happens, older versions of Xcode are available. I’ll share the link to find older Xcode downloads in the video description’s box below.

Crystal Preston-Watson:
The installation is straightforward, but you need to give Xcode some admin permissions. If you’re installing on a work computer, you might have to check with your employer’s IT department for necessary access and policies.

Crystal Preston-Watson:
I already have Xcode installed, so I’m just going to go ahead and launch the program. The splash screen comes up and here is where you’ll open the app via a Git repository or project files on your machine. Today, I grabbed a demo project from Apple’s Worldwide Developer Conference. They have demos of different features they premiere every year. So this particular demo was large text challenge. It was for an accessibility feature rollout, and it was from 2021.

Crystal Preston-Watson:
What I would do is just select this project. When the project loads, you’ll have seven different sections within Xcode. On the left is a file navigator, in the middle is a code editor. The code editor is in a split screen. That’s because you can also run a actual simulator within the code editor. I’ll talk about that a little bit later. On the right is a utility area. And then to up top is a toolbar. The toolbar includes a field that lists the project and the simulated iOS device. It will run on when you build the project. If you want a different device, you’ll select the simulated device and a sub menu will display what’s available.

Crystal Preston-Watson:
Here are all simulators that are available. You also have the option to connect a physical device as well. If you don’t see the iOS device you need, you can add it by going to add additional simulator or download simulator. Add additional simulator are simulators that you already have on your computer or a physical device you have connected. I don’t have a physical device connected so this is empty, but you can see all the different simulators I do have available. Note that you’ll have the latest iOS version included by default, current to your version of Xcode. So for me, what was default for me was 15.5. For my particular version of Xcode, that came default with it. But there were other simulators that I had to download. And let’s actually take a look at how to download those simulators.

Crystal Preston-Watson:
Download simulators will bring up a modal name components. Here is where you’ll have a list of iOS versions, tvOS, and watchOS. As I advise in the Android Studio video, you shouldn’t download these all in one go because that will take up a lot of space. I think it’s best to download a few versions and just switch between them as needed, just because this will… As for example, when I downloaded the iOS 12.4 simulator, it was around three gigs. That took about 10 minutes to download. When I downloaded 14.5, that took 20. So when you’re trying to download multiple simulators, it’ll take quite a bit for all of them to download completely and they will take up a decent chunk of space. If you have that space go ahead and do that. If you have a lot of time again, go ahead to do that.

Crystal Preston-Watson:
Since it does take a lot of time to download one of these simulators, I’m not going to show that, but we can pretend that I selected one of these simulators. A progress bar has popped up. It’ll pop up on the right part of the screen. It’ll slowly fill up over some minutes and when it finishes, then you can go ahead and go back to the add additional simulator menu. And let’s do that now.

Crystal Preston-Watson:
Once you have that iOS version simulator downloaded, you go back into the additional simulator menu, and you’ll get an updated list of devices that are available with that new version that you downloaded. For example, for iPhone 8, if I say had just download 12.4, that would pop up and it would show that yes, with that particular, I can run it on the iPhone 8 simulator. And so for iPhone 8, I actually have four different versions that it can run, depending on what iOS version I need to test on. And you can also create a customized devices for your needs. So there’s at the end, in this particular view, there is a plus icon. And if you select that, it brings up a little modal that says, “Create a new simulator.” You can give that simulator to name. You can select the device type, and then it’ll give you the iOS version.

Crystal Preston-Watson:
So depending on which version that you select and you have available, if you select that version, the device type might not be available for that. So just be weary of that. Also, if you have an application that can sync with Apple Watch and you need to test that out, you can actually create a simulator for an Apple Watch. I’m not going to do that today. I’m not going to create a simulated device. So what we’ll do right now is just cancel all of that. And then I’m going to select, for this, let’s just do an iPhone 13. Here, actually, it does show in this particular view, iPhone 13, it actually gives you the paired watches you can test with. Again, I’m not going to demo that. I don’t really have an application to demo that, you know, kind of sick, and that’s not the point of this demo. But I am going to select the iPhone 13 to test with today.

Crystal Preston-Watson:
So clear out of that. And so actually though I selected that in that particular modal to make sure that, that is the simulator that runs when you build the project, you need to go back up to the toolbar. And in this field where it lists iPhone 12 Pro, I need to go and select iPhone 13. Now, it’s time to build the project. And you can select the run button at the top of the file navigator, or you can do it via product run in the Xcode main menu. I’ll just go out. Let’s just do run here.

Crystal Preston-Watson:
Cool. So we’ll get a popup that our build was successful. And then the iPhone 13 simulator will load and the app will open. Just notice, usually, when the simulator does load, it will load behind Xcode. So I had to select it to bring it to the front. And as the simulator will load, it’ll also open the app as well. So there we go. With our simulator running and the app loaded, we can open the accessibility inspector and we do that by going to Xcode main menu, then open developer tool, and then accessibility inspector.

Crystal Preston-Watson:
And so first off, before we get into the inspector outright, you want to make sure that you’re pointing the inspector at the right place. And so in this field at the top of the inspector, it’ll have a dropdown. They’ll have the name of your particular… What your computer name is. So mine is just a very straightforward, MacBook Pro, and it’ll list all the processes it can actually access and then it’ll have a dropdown for the simulator that you’ve created. And you want to make sure that you’re selecting simulator here versus here, within the MacBook Pro, your computer processes that are running. Because if you select the simulator here, it selects the simulator itself. Whereas, if you select the simulator via the dropdown, it’ll select the application that’s running within the simulator.

Crystal Preston-Watson:
And so before I get into anything, there is this target icon, which helps you select the element. This part I find a little bit buggy. What you want to do is… I usually have to do this quite a bit. Okay, so what I did is I went to that target icon, then I then clicked on the application and then that brought in a focus indicator. And that’s how I know that I am actually focused within the application.

Crystal Preston-Watson:
And so this first component that is visible in the inspector. This is called the inspection pointer, or inspection component. I don’t know, navigation. It’s a lot. I don’t know the technical term. But what it does, it lets you select the UI elements and reveal their attributes. And in this component, you have the navigation that emulates the screen reader voiceover, and will audibly announce the target element. And there is a icon dialogue button. And if you select this button right here, what will happen is that, if possible, it’ll audibly announce the element text. You couldn’t hear it, but it did say, “Welcome to the Large Text Challenge.” And then you have a forward and backward navigation and also you can autoplay. So it will just play every focusable element that can be announced in the visible app screen.

Crystal Preston-Watson:
What I want to stress is that this isn’t voiceover, this just emulates voiceover, and it doesn’t replace testing voiceover on an actual device. Under navigation, this is where you get into the information of what you’re targeting. The first section is basic and it gives you the basic information. Pretty straightforward heading of what you’re targeting. So the label, you get values, traits. This is static text. Identifier, hint. Those don’t have anything to reveal, and user input labels. Again, the user input label is the same as the main label, which is Welcome to Target Text Challenge.

Crystal Preston-Watson:
The next section is actions, and actions allow you to interact with a target element like select buttons, check or uncheck check boxes, and scrolling. So right now, it’ll have… And this section has activate, scroll right, scroll left. That’s pretty much the only things you can do within this inspector when it comes to actions. The element I have targeted right now doesn’t have any actions with it. But if I scroll down to the very end of this view, there is a button. Now, if I select perform next to activate within this section, it’ll perform the action associated with that element. So that would be continue to a different screen. And let me select that right now.

Crystal Preston-Watson:
And then that’s what it did. So it went to the next screen and focus went to the first focusable element in that next screen. And so continuing on, we have the next area, which is element. Honestly, I haven’t seen much displayed here in this section, other than the class of accessibility objects. I’ve read some resources that state that this section has an active bug. So just be mindful of that. I think this is very useful for developers when they’re working on accessibility to know exactly what class it might be looking for as a tester and working hand in hand with developers. If you’re finding bugs and issues, being able to give that level of information is always very good. But if you’re expecting anything else, you wouldn’t get it from here. And just be mindful, it might not be correct because there might be active bug surrounding this section. If you’re really wanting more on that, I would probably do some Google searches around this. I think it is useful for that, revealing the class of the targeted element.

Crystal Preston-Watson:
And then last in this particular inspection pointer is hierarchy, and hierarchy displays where the target element lies in the hierarchy. It’s the label. So as I scroll down within the app, it highlights in orange. So the hierarchy highlight has the color orange. And the main target, the highlight is green. Right now, if I go just… Since I’m in a very high level part of the hierarchy, the whole screen is highlighted. But now. As I get more granular, the highlight becomes more focused. So right now, I’m at the UI navigation bar. So only that bar is highlighted. And as I go even more granular, wherever I’m highlighting, it’ll just highlight that on the application itself. Right now, I’m at the question mark circle button. So there we go. And that’s it for this particular part of the inspector. If we go to the next component, that is the audit.

Crystal Preston-Watson:
If you are familiar with semi-automated accessible testing tools like WebAIM’s WAVE, Deque’s axe DevTools, Chrome Lighthouse accessibility reports, you know how this works. Here, you’ll just target an app view. And then under options, you’ll select a run audit, and this will generate a list of warnings about accessibility problems with your app. So now, with under options, going back to this for just a second, there’s a list of things that you can have the audit look for. There’s quite a bit. There’s element descriptions, contrast, hit region, element detection, clip text, traits, and large text. I’m going to keep all those selected, and then I’m going to select run audit.

Crystal Preston-Watson:
And so cool. So there’s the list of warnings. And then when you select a warning, you’ll get additional information and it’ll highlight exactly where the issue is on the simulator. So right now, there’s an orange highlight and it is the question mark icon. And then in the bottom of the accessibility inspector, it gives a zoom in view where that particular issue might be. And you can also take screenshots. Especially if you’re making a report, doing some testing, you’re doing testing, you have to reproduce or show a developer where the issue lies. You have a screenshot right there. Very, very useful.

Crystal Preston-Watson:
There is also suggestions on how to fix the problem. So there’s this question mark icon here. And if you select this, it has a fixed suggestion. Since this was about contrast, it’s telling you how… If you make sure the text font size is at least 18 point regular or 14 point bold. And it gives you a color contrast calculator, so you can actually play around with different colors to see what would pass. So it’s a very useful feature right there. But I do want to say, this audit component, just like the other semi-automated accessibility tools I mentioned previously, do not find all the issues you might have, and it’s important to make sure you aren’t relying on this alone for your accessibility and testing.

Crystal Preston-Watson:
The last component is settings, and these are provided to you as common options you might want to test for. What options are displayed depends on the particular build of the app. For this demo one I have, I have things like inverted colors, increased contrast, bold fonts, quite a bit of options available to me. But also know that not all of the options might be valid for the particular app that you’re testing can be tested for, or, you know, there other things that you… And again, there are many other things you might need to test for when it comes to accessibility that are not provided as an option for you to test with within this inspector as a whole. But for this application, some of the things that actually can be tested for are bold fonts. And if I select it, the font becomes bolded and also button shapes. And if I select button shapes, as I select and unselect, the shape of the setting, the help, more info button is toggled off and on.

Crystal Preston-Watson:
And dynamic type, and dynamic type is a slider. So as I slide it either to smaller type or larger type, it will reflect that in the app. Given that this particular sample application is dealing with large text, it really does handle the dynamic type slider very well in no breakage whatsoever.

Crystal Preston-Watson:
And before I end this demo, I really did want to point to something that’s debuted with newer versions of Xcode, and that is within… Let me move out this here. And that is where, within the utility area, now you can actually get accessibility information within the utility area. This inspector is new to, as I said, newer versions of Xcode. It wasn’t there. Actually, when I upgraded to this version, that’s when I noticed that this had been added to this utility area. I don’t know exactly when it was added to this area, but I know it wasn’t there at least probably a year and a half, maybe two years ago.

Crystal Preston-Watson:
So if you’re in your code and this particular view, which is, for this project, if you select a line of code and then you can resume, or if I hadn’t already done this before, it’ll say build a simulator. And it’s going to use the one that’s listed in the toolbar field. So it’ll simulate at iPhone 13. So if I select resume… It may take a little bit. It will take a few little bits.

Crystal Preston-Watson:
Okay, cool. So now, you get the same view that you would get with the standalone simulator, but it’s within the code editor. And there’s focus indicator on the line of code that you selected. And in the utility view, under accessibility, you get the basic information that you get in the first component view of the standalone accessibility simulator.

Crystal Preston-Watson:
And with that, you are ready to start testing iOS applications using the Xcode and the accessibility inspector. I just want to stress again, that testing on simulators or simulators aren’t replacement for testing on real devices, especially when it comes to accessibility. There are many use cases and tests that are best done on an actual device. But as someone who has spent many years in quality engineering, I know there are some times that actual devices are just out of reach. So I’d definitely rather you test on a simulator than not test at all. If you’re interested in accessibility testing for Android, please see my previous video, Getting Started with Android Studio for Mobile Accessibility Testing.

Crystal Preston-Watson:
If you enjoyed this video, please hit that like button and also think about subscribing to my channel. I think you are required to say that now in like every YouTube video. I don’t currently have a schedule of when I put content out, but I’m trying to get more content out on the regular. If you’re interested in learning more about accessibility, check out my website, http://www.crystalprestonwatson.com. You can also find me on Twitter, @ScopicEngineer. Until next time.