Accessibility Inspector Tutorial for iOS Native Mobile Apps


all right hello everybody my name is
Chris McMeeking I’m a senior software engineer here at Deque systems and I am
here today to talk to you about iOS accessibility in particular a cool tool
in the iOS keychain tool chain that helps you do accessibility stuff and and
explore the accessibility properties of your application one of the things that
that frustrates me about the iOS environment is how difficult it is to
test on a device to keep the device to set up and manage your manage your
profiles and your development stuff and you never know when that tool chains
going to broken here your team agent has to go in and accept some new updated
agreement and how long is it going to be until you can test on a device again and
it’s very frustrating so I find myself testing on the simulator a lot but when
you’re testing on the simulator you do not have access to voiceover or the
other assistive technologies on the device and so I find myself exploring
the accessibility of my app using the accessibility inspector a lot and so
what I’m going to talk today is about how you can use the accessibility
inspector not only to help you make more accessible voiceover applications but
also it helps you explore the accessibility all of the accessibility
properties that are available for other assistive technologies such as switch
control Braille boards alternative input devices and all of that you can see all
of the properties at once whereas voice over really only cares
about a subset of those properties so this is going to help you explore all of
that information in one place it really is a more valuable tool for developers
than ways that we should always test with Voiceover present part of your tool
chain but I use voiceover at the end of that process and use the accessibility
inspector throughout that process and so what we’re going to do is we’re going to
bring up Xcode we’re going to go to open developer tool and we are going to start
the accessibility inspector this is the accessibility inspector let me bring
back up my simulator so so I have my simulator here notice we have our Deque
University for iOS app run this is an application that just demos
simple accessibility api’s and how you can do things poorly and how you can do
things well and then notice over here the accessibility inspector I can
connect it to a lot of different processes I am going to connect it to my
iOS simulator and when you connect it you can run it in against your MacBook
Pro but what’s going to happen is you’re going to get different types of feedback
so it’s going to it’s going to treat these objects as desktop objects rather
than notice when I go into the simulator I get a much simpler view and so
basically what we’re doing is in the accessibility inspector this is in
desktop mode so it’s treating the simulator like a desktop app which in
itself is valuable if you’re if you’re a desktop application developer the
accessibility inspector is still a valuable tool but we are concerned about
iOS today and this is the simpler iOS view of those accessibility properties
and so notice I have this target icon up here and what we can do is we can go and
we can highlight certain things we can see the accessibility information so
let’s go into one of these stories here let’s go to conflicting traits this
one’s interesting and notice I’m driving to UI with this right much like you can
drive the UI with voiceover I can drive my UI with this I can click on things
and then if I so right now I have two selected so I have targeted this menu
button and I can go in and I can target new things or I can go in here and I can
click on this just like so but you have to click twice right so if I want it if
I want to activate my conflicting traits tab here with the accessibility
inspector I click on it once so now it’s the thing that’s highlighted or this
focus isn’t updating and then I click on it again and we have activated that
control in that same activation as available over here notice I could
perform this activation over here so if you if you click twice on the same
control you’re doing the basic activation and I don’t have to follow
that I can still swipe once once where we don’t have this focus this target
thing if that’s not selected we can just swipe back and forth just like
our iOS device is running normally the cool thing to point out here is that the
accessibility inspector when in this targeting mode is going to focus the
same thing that voiceover focuses so any of these controls as I’m as I’m cruising
my mouse over these controls it’s just like you were interacting with voiceover
on a device running your finger over the application doing that voiceover focus
it’s going to focus the same things you’re going to get the same navigation
as you’re going to in voiceover and then what we can do is we can select one of
these and we can go in and we can see interesting things about it right so we
can see the label here we have the labels conflicting traits notice this
case it’s just the text right it has no value a text control having two value
doesn’t really make sense and it has the trade of header the trade of headers
wilt rate is going to mark it as a navigation landmark and announce as a
header so we can see that we could get information from this tool about the
accessibility of our application and so one of the things I said was that each
of these stories is designed to demo a unique accessibility violation that you
can run across right and so let’s see if we can use the accessibility inspector
to find violations right so button and link example this is another just kind
of static text example a label button and linked rates tatak text the trade of
static text doesn’t really do anything for UI labels they’re always static text
but it’s a default tree on that value so this is all this is all up to stuff this
is all what we’d expect visit this site let’s take a look at this visit this
site labeled visit this site traits button in links so here we have an
accessibility violation you would not expect the traits of button and link to
be on the same control what you really want is just to have the treat of link
on this control so what’s going to happen is a link in iOS I think is
pretty well defined as anything that you click on and that’s going to take you
out of the context of your current running application that’s a that’s a
very important bit of information to communicate to a voiceover user that
the application is going to change context and take them out of the current
thing right because it’s not like desktop where if you click it you can
open up a new window and you’re still in the same context in mobile when you
click on a link a completely new application opens
and that’s really important information to share and the fact that it’s a button
in this case is redundant right a link is a special type of button and so when
voice over announces this what it’s going to say is visit this site button
link right we don’t need the announcement of button you just need the
announcement and so those two traits you should just never use those two traits
together anytime you want to say button and link you always just want to save it
and so down here notice that we have this other bit of information trades
link so that button successful and have used the accessibility inspector to
identify that okay so now let’s point out another cool feature of the
accessibility inspector and that is the ability to run audits we can do
automated accessibility analysis so we bring up the page that we want we’re
already connected to the simulator and we can run an audit on this and so this
is cool it helps you identify things but I will warn you that actually I think
pretty much all of these announcements are false positives in this case so take
the take the violations that you see with the grain of salt but let’s do
let’s confirm that right so so when we when we change this notice that the the
audit thing that we have here is dynamic font sizes are unsupported right so it’s
claiming that dynamic font sizes are not supported and notice when we go over
here we scan this let’s update our our font sizes and so when we go here notice
that our font size is over here our font sizes are actually updating everything
is working the way we would expect in terms of dynamic font sizing so the
audit to is cool is a good tool to use but you’ve got to take it
output with a grain of salt and make sure that you actually do that
confirmation that is actually that those are actually issues right and actually
one of the things that tools that I develop is is automated tools that do
the same things that do not have these false positives and you should
absolutely look into a test for iOS but we are talking about the accessibility
inspector and I think that’s pretty much all I had to share about it I mean it’s
a cool tool you can use it to test a lot of things I mean even just the fact that
you can test this dynamic type thing and control it in here without having to go
and change the device on iOS it’s always been frustrating for me to test iOS
dynamic type and all of these other accessibility issues that you can that
you can spot just by using this information and the fact that again it’s
all confined within the realms of a simulator and you can run this against a
device if you have a device connected you can’t absolutely run it and connect
it to your device which is cool but I think it’s real valuable to a developer
when you have somebody on your user experience side you saying hey there is
an accessibility issue on this control you can come in and see the
accessibility properties of those controls and see why it is behaving the
way it’s behaving because for a developer I think the why part of that
equation is the most important part of that equation that is the information
went to the accessibility inspector and so that is all I have today be sure to
check out my other videos this is the actually the first one in the iOS line
but I have a couple of Android videos done and there will be more iOS and
Android videos to come we’re on about a video every other week pace right now so
thank you for listening and have a good day

4 thoughts on “Accessibility Inspector Tutorial for iOS Native Mobile Apps

  1. It would be valuable to also mention the ability to check the focus order by using the left/right chevrons to navigate the accessibility tree the way VoiceOver does and the way a user might using left/right swipes with VoiceOver on. I have found inconsistencies in the focus order VoiceOver has vs. my former experience on web accessibility where document order is the focus order.

  2. Thanks for the tutorial, Chris! I had given up on the Accessibility Inspector after it kept crashing when I tried to use it with an app on the device. It's much better on the simulator.

  3. Do you know any way (either with the Accessibility Inspector or another tool or method) to inspect and/or navigate the keyboard tab order of a mobile app? The keyboard tab order only includes elements that a user would interact with, such as links, buttons, form fields and controls. I'm testing apps (both native and embedded web views) by using a Bluetooth keyboard (Logitech K480) paired with an iPhone 6 (iOS 11.1.1) and can't find a way to check keyboard tab order. I'm not sure if it's possible.

Leave a Reply

Your email address will not be published. Required fields are marked *