Welcome back. Now that we've taken a look at a number of the design challenges and design solutions for Universal Design, we wanted to spend a couple of minutes looking at tools and standards that were designed specifically to make it easier to create accessible, universally designed interfaces on standard platforms. So we're going to do this in two parts. First, talk though a few of the resources that we're giving you links to here. And then second, give you brief tours of both the iPhone and the Windows desktop and laptop interfaces and control panels, specifically for accessibility. Because we recognized, many of you who have never looked at those and probably aren't aware of all the features that they software you may be developing is designed to interact with. But let's start here with guidelines, tools, and standards, and I'm going to ask Phil to give us his sense of a number of these and some of them we'll visit. But let's start with what might be perhaps the best stone of these, which is the Web Content accessibility Guidelines, or the WebCAG or WCAG20 standards, and how have these been useful, and what do you find them covering? >> Well, WebCAG has been developed over a couple of decades now and developed with input from business, academia, several other areas. And originally, in WebCAG 1.0, the guidelines were extremely dense and really difficult to understand. Time consuming, for sure. With WebCAG20, they broke accessibility into four key areas. They use the acronym POUR, P-O-U-R, for perceivable, usable, operable, and robust. So perceivable are standards that talk about how persons with sensory disabilities can access information. In another words, captioning for individuals who were deaf or hard of hearing, alternative text labels and like for people using screen readers. >> And I have this up on the screen for people to see You see four principles underneath perceivable as we go forward. >> Excellent, so O for operable. Operable, so controls must be operable through a variety of means. In our last segment, we talked about mouse use, touch pad, touch screen, and keyboard navigation. So we need to make sure that our layouts, our designs, our widgets are all operable through a variety of approaches or techniques in order to cover not only variety of disabilities but also user preferences and the devices that are available to the user. >> And in fact, this is where the example you had mentioned of do not design content in a way to cause seizures pops up. And I'm just going to click through that, and you'll notice that it has a bunch of specific guidelines about the number of flashes in a certain amount of time in order to comply with this guideline. So third, we get understandable. >> Understandable. Obviously usable, but you have to understand information in order to be able to use it. So this is about keeping your designs simple, identifying information correctly, using those heading tags so that a non-visual user knows that one block of information is a subsection of another or that an aside relates to the article it's contained in. Heading tags, landmark regions, things of this nature. Keeping text brief, bullets rather than large blocks of text. Your interface and its content need to be understandable in order to be usable. >> And this is also where you get into language issues of not using unfamiliar acronyms of other things like that. And then finally, with robust, we're really focusing on make this compatible with not only current tools but potential future user agents including assistive technology. >> And the cross tools. So I want to design a webpage that will display okay on a mobile phone, smart phone screen, on a tablet screen, a laptop screen, a desktop screen, and an LCD projector. I want to make sure that it's robust across devices and across time. >> Excellent. So virtually, all platforms have set of such guidelines. Apple has a top level accessibility page, which we're linking to and showing you here that's broken down into accessible concepts of vision, hearing, physical and motor skills, learning and literacy, but also to products. MacOS accessibility, iOS, watchOS, tvOS. And these are things you can explore depending on the platform that you're likely to be using. Android, similarly, has multiple pages. I happen to like the one that talks about patterns of design for usability. Where it talks about the accessibility tools built into Android but also talks about guidelines about touch target sizes, about how to label things effectively. Many of the same principles that we've been talking about in the past several lectures are brought up for Android. But these particular guidelines are never going to be enough if you don't have tools to help you test the accessibility of your pages or software. Unfortunately, there's a huge number of those tools out there. Phil has recommended a couple of them that I'm going to point you to here specifically focused on the web domain, and we will talk through those, but there's a large collection of them for all of the platforms that are out there. Why don't we start with Wave, which I will take us to right here. So Wave, among other things, is a Chrome extension that is there to help identify accessibility problems. What have you found it useful for? Yeah, well, both Chrome and Firefox, it also has an online alternative. So if you're not doing something That requires authentication, the online one may be good to check out. The way it presents accessibility aspects, components in a visual type representation. So it will break your web page into blocks. And it will number those blocks to show you what the reading order will be for a text-to-speech engine or screen reader. It will put up various icons to indicate when a image does not have alternative text. It will put up an icon when labels are not programmatically associated with their corresponding form controls. So it's a good way to get a visual. Quick way to look at the accessibility of different components of your site. As well as gaining that understanding of, okay, well, this is the order it will be read in. And when I get to this point, they're non visual users, going to hit an unlabeled image. So it really shows you what the impact of an accessibility issue or perhaps maybe I should call it oversight is and where it's located. You can also drill down for more information on how to fix that particular issue. >> And another one you'd recommended was AInspector, which we're now going to go to, yep. >> An AInspector is a Firefox plug-in. They probably have one for Chrome now as well. And that adds a menu in your tool section of your toolbar in Firefox. And you can look at a variety of components. So you tell it you want to look at headings. You click on Headings and it will highlight only the headings and gray out everything else. And then it will show you each of those headings with a number corresponding to it. So it lets you know, this is a level one heading. This is a level two, this is a level three, and so on. You can also use it to get a summary report. And again, just like the WAVE, you can drill down for more information of why something is an accessibility issue. And information on how to correct the issue. >> Great, so as we now move forward, we're going to take a look at two devices. And I think it would probably make sense first, Phil, if you would just give us a brief tour of some of the accessibility settings on the iPhone. Because as you've pointed out, among mobile devices, this is a device that's remarkably designed as far as paying attention to accessibility by diverse users. >> Yeah, when Apple started out and said they were going to make the touchscreen accessible. Everyone was like, we can't make the touchscreen accessible to someone with visual impairment, particularly if they're completely blind. Got a smooth surface, what are you going to do? And Steve Jobs really said, we're going to make this device universally accessible. And that means providing features that will enable people with all types of preferences, impairments, disabilities, etc to access the device. So if we start, I'm going to be using VoiceOver myself. The built-in screen reader comes built-in to the OS, nothing to download. And it does change the interaction of the phone. Normally, you would touch a control to activate it. In VoiceOver, I have to be able to touch a control to hear what that control is. I activate it by touching or tapping, created a new word here. Okay, so I'm in my settings. >> Settings heading. >> And it tells me settings. >> 11:27 PM. >> I'm going- >> Personal Hotspot, Notifications, Control Center, Do Not Disturb button, General button. >> I'm going to move to General and activate that. >> General, Settings back button, Handoff button, CarPlay button, Accessibility button. >> And here we have Accessibility settings, we'll go in here. >> Selected Accessibility, General back button. >> And I'm going to turn on a virtual rotor. >> Streaming Rate, Headings. >> And it says Headings, so I can now flip down with one finger. >> Accessibility heading. >> Accessibility is first heading. >> Vision heading. >> Vision is a section. >> Interaction heading. >> Interaction, which pertains to people with motor impairments. >> Hearing heading. >> Hearing, people who are deaf and hard of hearing. >> Media heading. >> Media, here's where I can turn on or off captioning, audio description. >> Learning heading. >> Learning, so people with learning disabilities, cognitive impairments, and the like. >> Heading, out. >> And that's the last of our headings. So let's go back up to Vision. >> Heading, Hearing heading, Interaction heading, Accessibility heading. Vision heading, VoiceOver On button. >> So I have VoiceOver on, there's a number of settings in there. >> Zoom Off button. >> Zoom, so here's our screen magnifier. We can turn on Zoom and have things enlarged beyond the simple pinch gesture. >> Magnifier Off button. >> Magnifier, this came out with the latest iOS. If you turn on the Magnifier switch, you can double-click the Home button on the phone. And your phone becomes a magnifying glass. So using the camera, you can hold it up to something. You can turn the light on or off. You can put different color filters if you have a contrast issue. You can maybe give it a little blue hue or green hue. You can change the degree of magnification, all by simply double-clicking the Home button. >> Display Accommodations Off button. >> Display Accommodations, this is where I can set color filters, and things of that nature. >> Speech, button. >> Speech, so this is different than VoiceOver. This allows you to turn on the feature when you highlight text or select text. It will present a Read button, and it will read whatever is highlighted. This is a great tool if you're proofreading a document. Because your ear is going to pick up on things that are mispronounced that your eye is going to skim over. >> Larger Text Off button. >> Larger Text, so I can pick a standard view or increase all of the text on the device. >> Bold Text off. >> Bold Text, I can again make the text bold. So someone with low vision, maybe I need to put a filter in place. I need to make the text larger, and I want to make it bold. Regardless of what application or where in the OS I am. >> Button Shapes off. >> Button Shapes, so having color versus a shape, or having circles, rectangles. Don't remember all the selections in there. Increase contrast. So, here's a single feature, rather than putting color filters in place. [SOUND] Reduce motion. On the iPhone, whenever you open an app, it kind of slides into place. And this can be very disconcerting, disorienting, can even lead to motion sickness for some users, particularly those with low vision. It also eats battery life like crazy. So, do yourself a favor, go in accessibility options and [SOUND] turn off that reduce motion. Your battery will thank you. [SOUND] On/Off Labels, so knowing that an item has been turned on or off. I want a label that my screen reader voiceover can pick up on, [SOUND] and then we get into the interaction. [SOUND] Switch Control, so a mobility impairment, they can't move their hand around. So, they have maybe switches that they press or sip and puff, which is a device that someone quadriplegic or someone with extreme upper body mobility limitations. They sip or suck in to produce one action and blow out or puff to perform another action that can interface with the device. [SOUND] Assistive touch, this is much like sticky keys and being able to move things or move two areas of the screen. [SOUND] Touch accommodations. I don't remember all that's in there, but again, explore. Most of these items will either tell you what they do or have pretty explanatory labels, so I'm not going to go. I mean, we'd be here a while to go through all of these. [SOUND] I have Accessibility Shortcut set to VoiceOver. What that means is that my Home button, I can press three times quickly to turn on or off. This voiceover screen reader, you could have it set to any of these accessibility features. Zoom, assistive touch, hearing assistance, all kinds of things. So, lots of possibilities there, lots that can make the iPhone interface much more enjoyable, if not more usable for the average user. So invite you to explore that. Again, if you're going to turn on voiceover, be aware that the gestures do change, that it requires a double-tap. Just moving, [SOUND] moving, touching an item doesn't activate it, reads it. I can swipe left to move active item at a time. And again, I've got that router. I can change the speaking rate, I've got mine pretty fast. [SOUND] I can change the language, if you like a British. [SOUND] So there's lots of fun you can have with it, besides being an important or key feature for those individuals with disabilities. >> And of course, a key message here is, with all of this here, it makes your life much easier as a developer. Just don't get in the way, and let these features do what they do. Why don't we come back to the laptop here and I'm going to show you the comparable settings in the Windows world. This is their ease of access control panel and you'll notice that many of this are similar things. There's narrator which is a screen reader. You can choose a voice, a speed, a pitch and what you want to hear, is it words you're typing, characters you're typing and so forth. The main thing we're going to get to here is that while some things are quite similar, like a magnifier and what you're doing with the colors on it. And do you want your magnifier to follow the keyboard. Some of them are very different because of the keyboard interaction and the mouse interaction. And so, I'm going to skip through things like all of the different context options. We do have a whole bunch of settings for closed captions, but then you get keyboard settings. Do you want the on-screen keyboard so that you don't type on this keyboard but you use you're pointing device, whatever that is, to point to letters on screen? Sticky keys, so that you don't have press two keys at the same time. Toggle keys, which is hearing when you put a lock on because you might not have been able to see that lock. And do you want to ignore or do things to filter out repeated key strokes that might be a result of a poorly controlled motion. And there's a whole bunch of other examples there, including things like how you see keyboard shortcuts. There's a whole set of examples for the mouse as well. The ones that are here or about the size of the pointer and the color but also the ability to use your numeric keypad to move the mouse around the screen. This is something that is a real life saver for somebody who doesn't have the dexterity to use a mouse or a track pad, which can be rather challenging. There's lots of other options as well, not just here, but under the direct controls. So when you're controlling a mouse, you can control how much do you have to move it for it to move a certain amount on the screen. If you have difficulty with precise pointing, you might decide, okay, I'm willing to move the mouse a lot further, so that when I move it a little bit, it doesn't actually move anything on screen. There's a whole bunch of examples like that. So, the point we have by looking at these two, it's not that there aren't a whole bunch others. There're accessibility settings if you go to Android, if you got to Windows phone, if you go to Mac OS, if you go to any standard platform today. But taking a little time to explore some of those settings will give you a feel as to what the experience is like for somebody who doesn't interact with these devices in the same way. And at the same time may give you some features that you find out make your life easier for you, as you interact with these devices. Really driving home the idea that this is universal design. >> And it's also giving you another set of testing tools. We've talked about some of the automated tools, WAVE, AI Inspector. There are many, many of those out there. But trying to get an experience of a screen reader user. You can sit down at a Mac, press Cmd+F5, your Mac will start talking to you. That will invoke, it's a toggle, turns voiceover on and off. There's a free screen reader Called NVDA, non visual desktop access, which is at nvaccesss.org., You can install that on a Windows based machine. But it's important not to rely on just testing with tools, but getting much like usability testing. That you try to, if you can't find a user with a disability who's willing to do some testing for you, then explore these built in accessibility features and see how your app performs while these are running. >> I will caution you that if you do this, take a nice piece of cardboard, put it over your screen, and try to use a screen reader, the first time you do this, you're going to find this immensely difficult. These are tools that take practice to gain proficiency in. I mean, as I sit here I can barely make out what Phil's iPhone is saying. He's listening to it, and I sometimes wonder if he's already figured it out before I know that it's saying anything at all. Practice is something that can be quite essential, but just recognizing quickly that wait a minute, why is it jumping from this, to this, to that, and skipping over this? Is something you'd be able to figure out just by navigating through a few simple steps with the screen not being displayed. So these tools can be very helpful. >> When you have voice over on on the phone, if you do a three-finger triple tap. [NOISE] It turns on what's called the screen curtain, and makes the screen completely black. Most people don't, they think the phone is turned off. But that way you can't use the screen but voice over, yep, works just fine. [NOISE] Three finger triple tap re-enables the regular display. So, little way to keep yourself from cheating or on a machine, desktop, just unplug your mouse. >> Yeah, I will warn you that some machines that if you unplug this hardware, they won't boot. But they actually do function once they've booted, which is a whole different story. So this brings us to the end of this sequence of lectures. We do have others coming in the rest of this module to talk about specific populations. Before we go, is there any parting thought you want to share with our learners Phil? >> Well, I think we've covered throughout these modules that what we do in terms of insuring accessibility for users with disabilities benefits everyone. Whether it's a personal preference, whether it's an environment that they find themselves in, whether it's the device they're using. That everyone has access, and we hear these days a lot about well, this lawsuit, or that lawsuit. Why not make your app accessible from the get go? Then you've inoculated yourself. And you don't have to worry about those things. So have fun, explore, make it a challenge. Make it fun, and make your creation accessible and usable for everyone. >> Well, that sounds like a great way to end. Thank you, and thank you for joining us. And we'll see you again next time as we move on to talking about older adults.
