American Printing House for the Blind: Know Your Audience - Learning how your users without sight use technology and how you can optimize the experience for all (sponsored breakout)

Today technology users who are blind or low vision can utilize most technology thanks to inclusive design practices and assistive technology. Whether they are shopping online or adjusting their fantasy football lineup, users without sight can access the same apps and technology as everyone else. They access it using an alternative interface. Joe Hodge and Greg Stilson from the American Printing House for the Blind will introduce you to common ways that blind or low vision users use mainstream technology. They will also demonstrate challenges created by app developers who are not familiar with universal design principles.

• Greg Stilson, Senior Director, Global Innovation and Strategy, APH
• Joe Hodges, Software Quality Assurance Analyst, APH 

LISA MILGRAM: Welcome to the American Printing House breakout if you’re here for the session titled Know Your Audience, learning how your users without site use technology and how you could optimize the experience for all you are in the right place. My name is Lisa Milgram, I’m a volunteer with Sight Tech Global and we’re thrilled to have you here today. And in the next 30 minutes you’re going to be hearing from Greg Stilson the Senior Director of Global Innovation and strategy at the American Printing House and Joe Hodge Software Quality Assurance analyst at American Printing House.

Before we begin, I just want to share a couple of housekeeping housekeeping items. The session is being recorded and will be available post event. So if you have to leave early. Or if you have a colleague that came in late. Don’t worry, we’ll make sure this content is available. We ask that you please remain on mute. If you have a question, we’re going to try to leave time for questions at the end. Please use the Q&A box. So when it comes time to ask those questions will either pull them out or you can use the raise my hand feature found in the participants panel. If you’re using a screen reader the keyboard shortcuts are option, why on Mac on all why on PC. And that’s all I have to say I want to turn it over now to Greg.

GREG STILSON: Sounds great. Well, thank you so much. Lisa and thanks everybody for joining us. Good morning, good afternoon. Good evening, wherever you are. I am so excited to be here today. We are. This is going to be a fast and furious. We are going to talk about a number of things. But this is really meant to be an introduction into understanding who your audiences and their different workflows. Because depending on who you’re trying to reach if you’re a software developer or if you’re an app developer a tester, any of those type of things.

You’re going to have users of varying, you know, using different technology do using different features using different things. And they’re all going to be accessing your content in different ways. And so it’s crucially important to really know who your audiences know who the potential users that you’re going to be reaching are and how they’re actually going to be interacting with your content.

So today about the number one thing that I always say is accessibility is not enough. There’s, there’s an entire concept of usability that goes along with that, but. Just read. Read what is a screen reader. So as I said, this is an introduction session.

So what is a screen reader. For those of you who don’t know what it is. We’ll do a brief introduction to that different ways might have different ways blind and low vision impaired users interacting with x apps and websites using the screen readers and different ullet common frustration point to talk about the common frustration points and do a couple of demos, just to demonstrate some some very common.

I would say challenges that that people who are blind or low vision encounter with with different apps and websites on a daily basis. So who are we, I’m gonna let Joe Hodge introduce himself.

JOE HODGE: Everyone good to be here today. My name is Joe Hodge, I’ve been at the American Printing House now for. Oh my gosh. Four years it’s felt shorter than that, but I do quality assurance. So I do a lot of testing with hardware and software so as Greg mentioned a lot of the different operating systems that we have out there, iOS, Android, Windows, Mac, I use all of them to test the APH apps and also do a little bit of software testing for the Braille note takers. So excited that kind of show you some demos today and and be part of the presentation.

GREG STILSON: Awesome. Thanks, Joe. I’m Greg still so I’m the head of Global Innovation here at the at the American Printing House been here since January of this year was hired during the before time before the pandemic was the thing. And I’m a product manager by trade, I’ve been in the assistive technology industry for about 15 years working on everything from hardware to software solutions for really solving problems so [inaudible].

Who’s the who’s APH. So the American Printing House for the Blind is 163 year old Louisville. Louisville based. Provides we are federally backed federally funded by by the federal government here and we will Education Resources for students and and teachers of the visually impaired and enables. How does the federal quota fund system work well basically APH is the provider of anything related to solutions to help teach students who are blind or visually impaired, along with tools to assist the teachers who do the teaching as well.

And so basically APH is a is a resource that products can be purchased from using federal dollars that are provided to states based on their population of students with blind or who are blind or low vision.

And our products, honestly. They range from the lowest tech to some pretty high tech stuff so we we sell braille paper. For example, we sell slate and stylus all the way up to refresh double Braille displays that can connect to mainstream devices and provide braille that that pops up on pins so APH is one of the largest resources here in the United States and and in growing internationally. I will say as well. We have partners.

Who are working with us to sell product around the world as well. So my to expect a slightly accessibility. So one of the main points that I want you to leave if you leave with one thing today is that exit accessibility does not equal, usability, you can say that your app or your product is is accessible.

And putting you know things like alt text on on on on graphics and things like that, or or labeling buttons does provide an accessible experience as the tools that a user are using or the user is using will be able to get the information, but whether the user can find that information in an efficient manner is a totally different ball game and the workload visual workflows are very different than the workflows that users who have low vision or who are blind.

The visual workflow is very different than their workflow, but it makes you all elements of the other people, it’s important to make sure that all the web elements all the app elements that you’re creating can be accessed by both a mouse or tapping or a keyboard, depending on the meat. The, the medium that you’re using. A device that you’re using the same device, you need to make sure that the accessibility flow makes sense because they will go through that and a little bit, but there are many pitfalls where you may have a fully accessible app, but the accessibility flow doesn’t follow the flow that you as a developer want the user to follow with different work. I always say use screen readers work with testers who are screen reader users who have different workflow usability or you workflows that they use to access your content and that can be of users who have any — you know, any disability or any any us using different tools that they they use. So if you have a blind or you you have an audience that could be blind, you have an audience that could have motor impairments.

Make sure that you immerse yourself in those problem or in those, those, those use cases as well. So you know that you’re going to have users who are using switches to access your content or you’re going to have users that use magnifier is to use to access your content or screenwriters right so I always say, make sure you you work with testers who are efficient in those tools. So what our screen readers, as I said, this is an introductory kind of presentation.

Is a tool that takes the text or other visual elements on screen and turns them into audio or braille feedback, but it’s been resolved and resolve any mainstream devices today, screen readers are often pre installed on many mainstream devices. Some examples of that would be with computers. You look at Mac voiceover for max or Narrator For Windows optional. Optional computer screen readers that can be installed and those are for for PC, you have NBA and jaws and vda is a free open source screen reader and Jaws is a as one of the longest standing screen readers out there, tablet, smartphone phones you have for iOS, you have the voiceover screen here that’s included on on every iPhone or iOS device out there and with Android devices, you have the TalkBack screen reader that’s included on the vast majority of Android devices as well. But look smart TV LG Samsung doesn’t stop there. And this is why I always tell people that today.

And I don’t think I mentioned this earlier. Joe and I are both blind users of technology, along with with our with with being a product manager and a quality assurance analyst. You know, I always tell people today is one of the most exciting times to be a blind or low vision person because technology people are thinking of inclusive design from the start of the creation of technology.

And it’s really exciting to be able to look at these type of devices or tools or entertainment devices that are there and know that you know when you open that device out there do take it out of the box. You as a blind user as a low vision user would be able to use it and get it set up so what’s exciting here is that it’s not just computers or tablets or smartphones. Now, but it’s it’s smart TVs. I bought specifically an LG TV because it had a built in screen reader on the TV that turned on the second that I set that TV of the first time. And that allows me to interact with the different apps that come on the TV the menus. This they know that kind of thing. But media streaming device. With media streaming devices. So Apple TV Fire TV and streaming devices Apple TV amazon fire tv. So, you know, you look at those devices in the same same screen screen readers apply with Apple TV of voiceover/ With Chromecast you have TalkBack and with Fire TV, you have the voice view screen reader that’s included with all of those. So it’s not just computers and smartphones. Now, but it’s screen readers are making their way on to a lot of home devices which is extremely exciting for both users, but also also for content providers and app developers, because now you’re expanding your, your reach of users, right. So you’re not just limiting yourself to those who have vision but your, your, your reach is growing like a weed screeners on computers but you know the biggest thing that a screen reader does is it allows for full access of apps and websites using the keyboard of the computer.

So Joe and I do not use the mouse. We all go an entire day without using a mouse. But screen readers allow if the web developer or the app developer follows the, the general guidelines of accessibility. That’s the Web Accessibility Guidelines, which I’ll put a link into this at the end. You know those guidelines are ways of making sure that your content is readable by a screen reader right and and it makes it gives suggestions to ensuring that your workflows makes sense but it’s not the be all end all, you still want to make sure that your content is usable by these by users and by making sure that the workflows makes it more commands because this custom keyboard commands to navigate the content.

Right. So how do we navigate without a mouse. Well, the keyboard has special commands that allow the screen reader to get to content faster. You know, in the previous slide, I said that visual workflows are very different than workflows that a screen reader uses and the reason being is because a sighted person when they look at a screen. They see everything coming in all at once. Right. And so a blind sighted person sees everything whole two part. What that means is that you see everything at once, and you have to narrow it down or filter, what the what you want to see.

Right. And so an app designer. A web designer may put a giant Add to Cart button in the middle of the screen because that’s what’s going to draw your attention quickly right. But a screen reader isn’t going to land on that it’s going to land at wherever the, the default point in the website is going to be for it to land or if you specifically draw the screen readers focus to the element that you as an app developer want the user to see first. So if you want to work with this the the workflow and have helped raise that workflow. You would, you would be able to take control or help that workflow along and so that whole part to hold and hold two part concept a blind user sees things part to hold, meaning that I don’t see everything at once. I have to go through element by element using the screen reader to really understand the layout of a website or an app.

Now we are given custom keyboard shortcuts to be able to navigate by headings, or by form elements or to jump to the search field immediately and skip over a lot of the stuff we know we’re looking for. But in general, we’re a blind or low vision user is navigating very linearly through the content blueprint.

Right, so you would have content or shortcuts that allow us to jump from HTML element HTML. So headings lists and things like that. And so you are able to do that screen readers also really heavily dependent tab order. And that means that if you’re filling out a form for example, I know a lot of sighted people do this as well as you’re filling out a form you type in, you know, first name tab last name tab email address tab so you’re not actually clicking a mouse, you’re much more efficient because you’re keeping your hands on the keyboard.

But it oftentimes what we see is that tab borders can get sort of out of whack. And so what’s confusing. Is that a user may encounter a situation where it says first name tab email address tab city tab last name right. And so that workflow gets completely jumbled up and the user doesn’t understand where they are there. They’re saying where’s my last name field. Where’s my home address field that they expect to see, but because the the tab order or the accessibility order hasn’t been looked at it’s creating a barrier at that point, like my like my readers and rely on very similar type of content.

So touchscreen screeners have the ability to jump from element to element I can navigate an app by browsing through the headings are the controls are the buttons to make things a lot easier. But there’s really two types of users who are blind or low vision, who are who are blind or have low vision that when they navigate a touchscreen. There’s really two ways of doing it. They either swipe because what happens is when you turn the screen reader on your touch screen now no longer works like a touch screen does with us when a sighted person is using it so tapping an icon, for example, doesn’t activate that icon tapping that icon puts the screen reader focus on the I icon reads it and then lets the user choose to interact with it. They can double tap to execute that icon or not.

Having said that users of touch screens. There’s really two different types of users. Those who swipe. And that means navigating from one element to the next level people retire from the you know screen elements. So if they start in the top left corner, they’ll navigate from that first element swiping right to the next element swiping right to the next element to sort of build that part to whole layout understanding. Then you have the other users who are what I would say the the Explorer by touches. Those are the users who run their finger all over the screen to really grasp the understanding of where things are located spatially and and you as an app developer need to understand that those both both types of users are there and that you need to really understand both types of workflows. At that point, like to read news on TV. Yes.

Please, just a brief overview, there is that they use the the TV remote the same fashion to navigate around and read the content, but it does allow for all the menus and settings and apps, if the app is as created with accessibility in mind to be fully, fully used like 11 points bullet points and then we’re gonna jump right into demonstrations labeled buttons on labeled buttons images and things that use graphics for buttons.

Are one of the more common frustration points out there. I can tell you that almost every day I’ll encounter an app that has unlabeled. Button bullet exclusive activities that require exclusive activities that require a mouse click action or an on down event action. And those are things that require you to physically tap or click on an element you the keyboard won’t do it for you. Unfortunately, and those are a huge roadblock at that point for a screen reader a keyboard user keyboard keyboard traps are always a fun one. This is it your situation that I know Joe is going to demonstrate here in a second.

Of us you get into a section of a website or an app and it never lets you out. Again, you have to do some some backwards sort of workaround to get yourself back to a good starting point, but as I said, use of images for buttons. So not having an actual button element that says, Submit. But having a nice looking graphic that is your Submit button. That doesn’t actually say submit at all. It’ll say graphic 275 or something like that. So at this point I’m gonna make my way up to the contact contact information here. My, my contact is gstilson@aph.org you can go to www.aph.org and then we put the link for the Web Content Accessibility Guidelines. If you are interested in in that kind of in those guidelines as well.

There’s a ton of UX resources out there for accessibility elements. And I think our accessibility design, but I think that, you know, what I want to do today is really show you some of the downfalls of situations where accessibility may technically be there, but there’s usability challenges. So what I’m going to do now is turn it over to Joe, who’s going to share his screen and he’s going to walk you through that keyboard trap example. Okay.

JOE HODGE: Alright, so let’s go ahead and share my screen here. There we go. I am on Amazon is apparent to me quite that down there. I’m on Amazon’s website here, the main Amazon page. So I’m going to just do a simple test that we all probably did recently. And that is, I’m going to search for an item that I want to buy as a gift. And I’m going to show you how somewhat difficult that is with the Mac. So I’m using voiceover on the Mac, and I am just as Greg mentioned earlier, I’m totally blind so typically you would tab through a web page. So if you look at this as if I am a novice or a beginning person.

You would start at the top and either arrow or tab through. So if you press Tab, you’re going to go to elements such as links web fields. If you’re hitting the arrow keys, you’re going to go sort of line by line and discovered and parts as as Greg mentioned so with this here I’m using a voiceover on the bottom left. If you, if you can see, and you’re not sort of used to hearing speech, you’re going to actually be able to read what voiceover saying as we do this. So the first thing I’m going to do, I’m going to make this a little quicker is I need to find the search field. So I’m going to turn quick navigation on.

VOICEOVER: quick nav off

JOE HODGE:With not long ago and now I’m going to turn the rotor. It’s called so I’m going to go to forms

VOICEOVER: words

JOE HODGE:and I’m doing that by hitting up and left

VOICEOVER: characters

VOICEOVER: Navigation, landmarks, web spots, form controls

JOE HODGE: and I’m going to just press the down arrow key

VOICEOVER: all departments, search, and pop search, text field search

JOE HODGE: There’s our search box. Now if I started typing because quick nav is on, it’s actually going to, it would. So for example, if I hit T here. It would try to look for a table because we have quick navigation on so you’re actually using first letter navigation, so T would be jumping to the table. H would be jumping a heading, etc. So I’m going to turn that back off

VOICEOVER: quick nav off

JOE HODGE: by hitting the left and right arrow key, and I’m going to type in BOSE 700

VOICEOVER: BOSE 700

JOE HODGE:and I’m going to press enter. So, I’m going to go ahead and turn quick nav on. Now, with the headings. I know that with Amazon, I could just it’s a Heading level two. So I’m going to press the number two on my keyboard

VOICEOVER: heading level two, Sony, WHOA1000X. Wireless industry-leading noise cancelling overhead headphones with Mic for phone call.

JOE HODGE: So that’s not it, that’s actually Amazon’s choice there I have I have those already. So now I’m going to press the number two again.

VOICEOVER: heading level two, BOISE noise cancelling wireless Bluetooth headphones 700 with Alexa voice control black.

JOE HODGE: And that’s the one we want. So if from here what we would normally want to do. And if you’re sighted

JOE HODGE: You could probably see the price of these because that’s the next important thing, like, I’m not gonna buy them if if they’re not on sale or there’s not a good price on them. But watch what happens when I go to the next line

VOICEOVER: load close, editing more items, dialogue close button

JOE HODGE: So we got into something that we probably don’t want to be going to just try again to hit the right arrow

VOICEOVER: 4.4 out of five

VOICEOVER: 4.4 out of 5, 12,238 global ratings

JOE HODGE: So we’re actually in we’re looking at ratings, which is not what I want to be. I’m gonna hit left twice. I’m gonna hit close and then it loads back up. So you can’t get out of this. So Greg was mentioning the key trap earlier. That’s exactly what this is. So the only way to get out of this that to actually go back.

VOICEOVER: back, search text field, search, search

JOE HODGE: And I’m going to hit forward

VOICEOVER: for clothes, editing more items

JOE HODGE: So what I’m gonna do is I’m gonna go back

VOICEOVER: all depart, search, quick Nav off

JOE HODGE: and do the search over again.

VOICEOVER: BOSE 7-0-0

JOE HODGE: I’m going to show you how to get it around this. So, I’m going to hit the heading level 2 again

VOICEOVER: heading level 2, Sony, heading level 2, BOSE noise-canceling wireless Headphones 700

JOE HODGE: I’m going to actually go one more past that VOICEOVER: Heading level 2, BOSE soundbar 700 with Alexa voice control built-in, black

JOE HODGE: So we don’t want the soundbar, obviously. But what I’m gonna do is now go backwards to the price

VOICEOVER: link, image, BOSE soundbar. End of Amazon link. Amazon choice, Amazon sort of link, $289 new and used options from, free shipping by Amazon and get it on Saturday, December, get that as soon as I get it, Amazon prime image link, 330, end of link, $339 and 00 cents $379 and 00 cents

JOE HODGE: So as you could tell I could do it, but it’s a little bit crazy because if you’re going down the page like like a normal person would when it first discovering this. Like logic would tell you to do you can get in that key trap which is very frustrating to buy something at that point. So, that’s the way around that but that shows you a little bit as if you were going element by element, you’re going to get into that trap and can’t get out of it. Where if you actually kind of the only way to do that as sexual past, we were navigating and then go backwards. So it’s a little work around, but it does work. But I just want to kind of demonstrate that and show you that. And now let me share to go ahead and stop sharing and let Greg show you a iPhone issue here.

GREG STILSON: Well, I actually just saw… I just looked at the time we only have about four minutes left. The example that I was quickly going to show was going to be on my my kids I have a four year old and a six month old on their daycare app. There is an, an app that you can go in and when you look at their profile. I look at their day’s activity. There’s a messaging button a calendar button and a learning button or something like that. All three of those buttons are completely unlabeled and it’s probably one of the most common things that a blind user of mobile apps today encounters is where you just simply here. Button. Button. Button. That’s it. And it’s a it’s a guessing game to understand what what those would be so I want to pause and I know this is fast and furious and an introduction. But I want to pause and take a few questions before we wrap up, but I wanted, I want to definitely want to thank you all for, for, for your time.

JOE HODGE: Yes, definitely.

GREG STILSON: So, Lisa, do we have any Q&A or chat?

LISA MILGRAM: Yes. We have a question from Glen Marcus who’s asked, “When designing of voiceover experience for mobile apps. I’m faced with choices to either one stay true to the visual layout (order, labels, granular elements) or two, optimize to minimize the number of focused elements, a no or low vision user has to navigate. When is it appropriate to favor optimizing over staying consistent with the visual UI?

GREG STILSON: So it’s it’s it’s a really good question. Um, I think that in I’ve seen it. I’ve seen it done a couple different ways. One. One example is a fantasy football app that I use and in the settings of the fantasy football app this this developer has chosen to create an optional Home Screen layout of the app that is a list view rather than a, you know, I think what you’re kind of describing is really a visually appealing kind of structured Layout View and you can do both.

I think he saw it as an I had worked with him on the development of the process or of the of the app. That he found it better that some users who are sighted or less less visually stimulating view or something like that. And so what he did is created a list view of all the elements that you can go through and you can go one by one really really quickly. It creates a different workflow, but it’s also a workflow that he found was, was beneficial for both sighted and blind user. It was sort of less — as I said, less stimulating or less visually stimulating for some users that that didn’t want that. But it really worked well with VoiceOver or with a screen reader. And that’s just a setting that he changed in in the accessibility settings of his app. So it’s really up to you, but I think it’s also really important that you work with users to identify. You know what he found is that as a you are an app that caters obviously to the primary, primary being you know surveyed users, he found that there was value to provide that for some of those users as well as the standard view. I hope that helps.

LISA MILGRAM: And Glenn has a follow up. If I keep one visual UI for all users, is it appropriate to have a different screen reader UX.

GREG STILSON: You know what, I think, I think it is. And it’s one of these things that your user can this is this is only really something that you can determine from by by testing with users, right. And so if a user tells you that the UI that you’re using visually is just not working. When you have the content labeled, you know, in a certain way and it’s not making sense than you. I don’t see a problem with you, creating a UX that you know caters to a screen reader workflow.

JOE HODGE: And one of the cool things that you can do with iOS and Android. I believe Android can do this, too, is you can detect if a square meters running. And so when your app launches it would just automatically switch into that. UX where you know the distributor person is taking advantage of that.

LISA MILGRAM: And we actually have one more question from Mike Silverman, who said a great presentation. What do you guys do when you run into an app that’s not accessible, do you reach out to the company, developer?

GREG STILSON: Yes

JOE HODGE: Yes

GREG STILSON: To answer your question, yes, especially you know apps that I can tell you that, as a parent, now there’s certain apps that have been become crucial, you know, I’ve used smart thermostat or thermometers now and things like that. Right. So things that I, you know, really find valuable. I’ll reach out to the developer immediately. Like I said that fantasy football app, you know, not, it’s not going to put that on the same level is like a smart thermometer, but you know, for my own workflow. I’m in a fantasy football league that uses this this specific app. I didn’t want to have to use a different app or different experience. So I reached out to the developer and the developer was super receptive of my situation and he saw it as somebody or as a way to improve his, his app and to improve his experience for all users. So yes, we we reach out to the app developers.

There are workarounds tools in the mobile devices today to try to compensate for for apps that don’t take accessibility into into account, but I would say those are Plan B, C and D options. It’s never even remotely as good as having the accessibility built in from the start. And if you want to [inaudible] go ahead, Joe.

JOE HODGE: Just adding on to that real fast. One thing I found that really useful as taking a screen video and actually just showing the issue happening. So like Greg was mentioning with the daycare app If it’s just a spot where there’s four and they will buttons, you’re able to create an account, you’re able to do everything else show those core enabled buttons and pointed out to the developer and just say, Hey, this would make my life so much easier. And here’s why that goes a long way just actually pointing out the flaws. They’re not having to go find them themselves if they’re if they never dealt with accessibility.

GREG STILSON: Absolutely and and i think that you know as as app developers or as you know folks who are are looking at creating content for for populations. It’s really good to jump into the accessibility settings of whatever platform you’re developing because we live in an age now where that’s the thing, right, like on every platform that you’re developing on pretty much there’s going to be an accessibility option, where you can turn on screen readers. You can invert colors you can use a screen magnifier, learn what tools are available and how that can make your population grow to really reach populations that you never thought you were reaching before. So with that, I know, Lisa. We’re, we’re running up on time.

I do want to thank everybody for, for your time and please reach out gstilson@aph.org. And if we didn’t get to your questions, please shoot them our way.

LISA MILGRAM: And I just wanted to share this wasn’t a question, but I thought it was a nice way to end from Kristin Chavez who said, I don’t have a question, but I am a sighted individual who works with a student who’s visually impaired. They really appreciate the information you provided it was enlightening and beneficial as I move forward. So thank you very much

GREG STILSON: Thank you all for attending. Thank you so much.

JOE HODGE: Thank you.

LISA MILGRAM: Take care.

GREG STILSON: Bye bye.