Using Accessibility Inspector on Mac OS X

Hey guys, this is Macad 101, and today I'm going to be showing you about a really cool application which comes built into Xcode called Accessibility Inspector.

This application lets you basically analyze the guts of an application's user interface and see exactly what that app is doing and how it's laying out all its UI components.

So the first thing I'm going to do is show you how to open up Accessibility Inspector. You have to have Xcode installed, but if you do, you should just be able to go into Spotlight, type "Accessibility Inspector," hit enter, and here it will appear. If that doesn't work for whatever reason, you can always open up Xcode yourself, go up to Xcode in the corner, open Developer Tool, and click on Accessibility Inspector from there, and it'll come right up.

Now that we've gotten Accessibility Inspector open, I'm going to be showing you how to use it to kind of analyze the user interface of Safari. So I have Safari open here just to, you know, google go.com, and what you'll notice is whenever I move my mouse around on this web page, Accessibility Inspector appears to be going nuts. You know, it's changing everything when I... but if I don't move my mouse, it stays still.

But the second I start moving it, it’s going nuts. What it's actually showing here is the hierarchy of the application. To explain what this is a little better, you might consider an application as a set of different levels. At the top level, you've got a window, and that contains everything. Then under the window, you might have a toolbar, which contains some buttons, and then, you know, it might contain a text box, and inside of that, there might be a button.

So you can picture how a hierarchy could kind of have multiple layers. That’s how Safari works, and that's how pretty much every application works. You have these layers, and this hierarchy is showing us the layers of UI components in an application. The attributes are telling us specific things about the exact lowest level component that we're hovering over.

So in this case, I'm hovering over a downloads button, and yeah, that might be inside a window or a toolbar, but the attributes showing is just for the button itself. So it's kind of annoying that it keeps changing whenever I move my mouse.

To lock it into a specific element, all we have to do is hit Command + F7, and now we can have a look at the properties of this button. We can see exactly where the button is because there's a little rectangle around it now. But we can also look at the hierarchy, and we can see that this button is inside of a toolbar, and that toolbar is inside of a window—presumably this full window—and the window is inside of an application, which I assume is Safari.

So instead of looking at the button, now let's go up the hierarchy and look at the toolbar. You can now see the toolbar is actually this entire top part. It includes all these buttons, but it doesn't include the tab bar. We could not have been able to figure out any of this information if it weren't for Accessibility Inspector because visually it's kind of hard to tell. You know, the tab bar and the toolbar are the same color and everything, but what this allows us to do is let us see that this is, you know, internally a separate part of the application.

But we just went up the hierarchy; we went from a button to its parent. We can also do the opposite and go from this toolbar to anything that's inside of it. So under attributes, we've got accessibility children, and this is everything underneath the toolbar.

So how about we go to this first ax group? You can see that it is these buttons left and right, and they actually have a children which is another ax group, which is just a smaller thing. You know, that doesn't seem very efficient, but I'm sure they have a reason for it. Then under that, we have two buttons, presumably the left button and the right button.

So that's just an example of how to go around the hierarchy. To unlock this, to get back into the mode where we can just move our mouse around, we just hit Command + F7 again. Now let's just take a quick look at how about the Google logo on Google's web page. We actually can find out a great deal about it.

So Accessibility Inspector tells us the URL of this image; you know, it tells us where the Google logo is located on the internet. We can also see that it's inside of a web area, which is Apple's UI component for displaying web pages.

Of course, we can see that it's inside of all these other things. I'm not entirely sure what these other things are. You know, I haven't played around with looking as far as user interface hierarchy very much, but I just think it's extremely cool that we can do this, where we can extract the user interface of an application using Accessibility Inspector.

So anyway, I really hope you enjoyed seeing a little bit about Accessibility Inspector. I hope in the near future to make another video which will follow up on this, where I'll show you how to use the information you can get from Accessibility Inspector to actually write Apple Scripts that can automate various processes.

The reason Accessibility Inspector is helpful for this is because it can tell you about the structure of an application so that you know what to do in Apple Script to, you know, actually click on the right buttons and go to the right screens. Because you actually can look at the structure of the app, and then Apple Script can manipulate the structure of the app.

But anyway, look forward to that! I hope to make it soon. So thanks for watching Macad 101. Subscribe and goodbye!