WEBVTT 00:00:08.000 --> 00:00:14.311 So, let's look at the 10 principles of  accessibility for both web and mobile design. 00:00:14.311 --> 00:00:21.055 The first principle is that blindness  gets you 80% of accessibility issues. 00:00:21.055 --> 00:00:30.000 Now, there are four major types of disabilities: *blindness*,  and that includes low vision and color blindness, 00:00:30.640 --> 00:00:36.453 *hearing*, *cognitive* and *motor  impairments*. 00:00:36.453 --> 00:00:40.193 Now, blindness is 00:00:40.800 --> 00:00:45.600 actually across a spectrum; they're  like 22 different types of blindness, 00:00:45.600 --> 00:00:50.798 but we basically differentiate between blind – and  there are different levels; like I said, you can be 00:00:51.200 --> 00:00:56.738 on the *edge* of blindness – you can still  be legally blind but you can still have some sight; 00:00:56.880 --> 00:01:01.520 and then you may require screen  magnification, which would be low vision; 00:01:01.520 --> 00:01:10.400 so, basically your vision  is impaired to whatever percent: 60, 70, 80, 90, 00:01:10.400 --> 00:01:14.135 95%, 97% – you know – 00:01:14.135 --> 00:01:20.000 but then there's a little  bit of magnification that can help. 00:01:20.000 --> 00:01:28.211 So, you'll have low vision users using screen magnifiers to, like, 300% or 400% magnification, 00:01:28.400 --> 00:01:35.040 and a lot of those tools, those  magnifiers have a screen reader in them 00:01:35.040 --> 00:01:41.553 as well, so blind users will use just the screen reader. And just like we saw in that last example, 00:01:41.920 --> 00:01:49.159 the screen reader is, for example, VoiceOver on the iOS operating system, 00:01:49.159 --> 00:01:53.514 which talks – essentially reads to you; that's a screen reader. 00:01:53.514 --> 00:01:59.086 So, why blindness of all these different disabilities? 00:01:59.086 --> 00:02:02.957 You might think, "Oh! Accessibility –  it's too difficult! There's so many different disabilities; 00:02:02.972 --> 00:02:08.019 how do you tackle the different ones?" 00:02:08.515 --> 00:02:15.679 Blindness helps you get almost the whole way there because of keyboard and the screen reader. 00:02:15.679 --> 00:02:22.701 So, blind users will use a keyboard so you can test keyboard access, which is what motor/mobility users. 00:02:22.701 --> 00:02:29.060 Hearing – so, deafness and hard of hearing is essentially a captioning thing. 00:02:29.060 --> 00:02:35.690 So, that's pretty straightforward. And then cognitive issues – they're a little bit more complex. 00:02:35.690 --> 00:02:39.069 They're a little bit more complex to test for. 00:02:39.069 --> 00:02:48.578 And there's such a difference – you know – so we're talking about dyslexia, ADD, Asperger's, things like that. 00:02:48.578 --> 00:03:00.649 And so, yeah, so blindness is, in terms of core accessibility, the way to get there, in terms of testing. 00:03:00.762 --> 00:03:06.880 So, for example, if you're testing with users,  you can recruit – you know – 80% of your users can 00:03:06.880 --> 00:03:13.271 be blind and you'll be getting a really good  understanding of accessibility. 00:03:13.483 --> 00:03:21.546 So, *alt-text* is classic on images – classic accessibility can  be summarized with alt-text. 00:03:21.546 --> 00:03:30.000 Now, here's a little quick quiz for  you: what alt-text would you give this image? 00:03:30.480 --> 00:03:33.940 Let's take a minute and play here. 00:03:33.940 --> 00:03:37.818 So, "ALT..." 00:03:51.360 --> 00:03:58.000 So, "Man looking at wall with  complex graphics or infographics." 00:03:58.000 --> 00:04:00.778 What did you give it? 00:04:00.778 --> 00:04:07.023 So, the classic issues with alt-text: 00:04:07.023 --> 00:04:12.423 you want to describe, not the picture, but you want to describe the *information in the picture*. 00:04:12.423 --> 00:04:16.880 So, what's the man doing? Like the fact that  he's wearing a suit or his age or 00:04:16.880 --> 00:04:22.011 the type of brick wall it is – it's not  really important, the color of the wall. 00:04:23.027 --> 00:04:28.160 You know – "Man staring at wall." It might  be a little non-descriptive; it really depends 00:04:28.160 --> 00:04:35.840 on what the *function* of the image is. If this is an image that's required for the user 00:04:35.840 --> 00:04:41.005 to understand the content on the page, then it's  going to have to be a little bit more descriptive. 00:04:41.808 --> 00:04:50.000 So, my alt-text: "Man looking  at wall with complex graphics or infographics." 00:04:50.000 --> 00:04:54.833 I think should cover it. 00:04:54.833 --> 00:05:01.415 If it's too short, like "Man looking at wall." – we talked about that, that might be a little – you know... 00:05:01.604 --> 00:05:09.150 If you add something like "Picture of man looking at wall." – you don't need that; you don't need the "picture". 00:05:09.150 --> 00:05:15.718 So, or "photo" or "image" – you don't need 00:05:16.080 --> 00:05:21.680 to say "image" – "Image of man looking at wall." You don't need to say that, either. 00:05:22.460 --> 00:05:25.680 So, yeah, *alt-text*. 00:05:25.680 --> 00:05:30.536 It's classic to accessibility because a lot of people forget it. 00:05:30.536 --> 00:05:35.249 They miss it; it's just classically overlooked. 00:05:35.249 --> 00:05:40.000 And alt-text is actually critical to SEO. 00:05:40.000 --> 00:05:45.865 So, it's really, really important that alt-text is addressed. 00:05:46.007 --> 00:05:50.790 Let's look at the third one, then, so classic on mobile is the *hamburger menu*, 00:05:50.790 --> 00:05:56.422 the hamburger menu being the three lines in the top left of the screen. 00:05:56.792 --> 00:06:01.920 The easy fix is to just properly  tag it; so, typically those menus, the user, 00:06:01.920 --> 00:06:06.997 their screen reader just skips over them; users don't see them. They can't actually access them. 00:06:06.997 --> 00:06:14.674 So, the classic one for mobile there is tagging those  mobile elements when they become responsive. 00:06:15.200 --> 00:06:19.229 And the fourth one here is *Content  that gets placed "out of the way" 00:06:19.279 --> 00:06:24.371 might not be found on the screen."  And so, what does "out of the way" mean? 00:06:24.640 --> 00:06:28.891 Well, think of this, the screen reader reading this screen – this is a map. 00:06:28.891 --> 00:06:35.829 So, you're looking for the location of this restaurant. This is from an actual usability or accessibility test, 00:06:35.829 --> 00:06:41.865 and I've included the kind of findings  here; so, the screen reader doesn't see the location list. 00:06:41.865 --> 00:06:46.880 That's the important content. The map is not  really important; it's a visual paradigm. 00:06:46.880 --> 00:06:50.833 Blind users are not going to see the map. This Google map's not going to be accessible. 00:06:50.833 --> 00:06:57.361 It's like a million images that are not tagged; it's just like a big soup. 00:06:57.361 --> 00:07:06.171 So, the important thing is the *list of locations that are on the screen* so that you know, "Oh yes, there's a restaurant near me." 00:07:06.640 --> 00:07:16.560 And the location list is after the map, and it should be *before the map* in the code. 00:07:16.560 --> 00:07:22.480 So, the way that the screen reader is – the screen reader is parsing, reading the code, and so this is 00:07:22.480 --> 00:07:30.265 what we mean by "out of the way content" –  content that's hard to find. 00:07:31.120 --> 00:07:38.648 The fifth principle is that accessibility testing with users – so *actually testing with users* – can reveal huge gaps. 00:07:38.648 --> 00:07:44.123 Now, this is a huge revelation  for accessibility, by the way, because a lot of people 00:07:44.123 --> 00:07:50.438 think they can handle it with checkers or with code reviews; I used to think that I could do that too. 00:07:50.496 --> 00:07:57.244 And I need to tell you after 17 years  of practice of this in business with 00:07:57.280 --> 00:08:05.600 my company Experience Dynamics, we've come to the  overwhelming *mandatory* recommendation, conclusion, 00:08:05.600 --> 00:08:11.329 revelation that *you have to accessibility test* – you  have to test with actual users. 00:08:11.329 --> 00:08:17.680 It shouldn't be a surprise. In usability, you test with users. You don't just try and guess or follow a guideline. 00:08:17.680 --> 00:08:23.200 It's the same with accessibility testing;  it's *even more important* I think because 00:08:23.200 --> 00:08:31.476 *accessibility is twice as risky as usability*. Here, you see a usability test on the left; 00:08:31.476 --> 00:08:38.093 and on the right, you see an accessibility test with blind users completing the same task. 00:08:38.093 --> 00:08:43.476 So, you see task 3 here and we have just – you know – 00:08:43.476 --> 00:08:54.556 it's almost three times as easy for users who are sighted than users who are blind to complete this task. 00:08:54.556 --> 00:09:00.502 The sixth principle is that *disabling zoom on mobile makes it inaccessible*. 00:09:00.502 --> 00:09:04.800 So, low vision users using screen magnifiers 00:09:04.800 --> 00:09:12.049 won't be able to actually do the zooming if you disable it. 00:09:12.049 --> 00:09:19.214 So, a lot of people will disable that on mobile, and it locks users out. 00:09:19.214 --> 00:09:25.401 This is an image of a 400 times magnification by a user with low vision, 00:09:25.401 --> 00:09:30.903 and that's literally how the screen is being digested. 00:09:31.040 --> 00:09:36.320 The seventh principle is that *accessibility is easily learned*. Remember that close to 20% 00:09:36.320 --> 00:09:42.263 of the US population and 10% of men are colorblind, by the way. 00:09:42.263 --> 00:09:46.810 So, clean coding can be learned with a little practice. 00:09:46.810 --> 00:09:52.117 Accessibility is actually cheaper if you do it upfront compared to if you try and do it later. 00:09:52.117 --> 00:09:59.982 So, it should be part of your coding, but also it should be part of your UX design strategy too. 00:09:59.982 --> 00:10:06.406 So, the next principle is  *accessibility doesn't mean ugly*. 00:10:06.406 --> 00:10:14.675 It may require you to rethink kind of the layout – again,  this is where UX design can be very helpful. 00:10:14.675 --> 00:10:20.026 But one of the things I've realized is that *visual  bias is your worst enemy*; 00:10:20.026 --> 00:10:27.040 that because you're so familiar with seeing  things and the layout of a screen – you know – 00:10:27.040 --> 00:10:31.680 the more creative you are, the more of a designer you are; the more creative designer, visual designer, 00:10:31.680 --> 00:10:37.088 the more biased you're going to be because you can *handle*, just like you can handle gray on gray and 00:10:37.088 --> 00:10:49.533 – you know – clean UIs that people that need very high contrast, very definite articulation of UI elements are requiring, 00:10:49.533 --> 00:10:53.069 and for you, it's fine if they're not there. 00:10:53.200 --> 00:10:59.706 The ninth one here is to *check mobile accessibility separately* – we've talked about a few mobile accessibility issues here. 00:10:59.706 --> 00:11:05.770 This is the same accessibility test where the link is underneath the map; 00:11:05.770 --> 00:11:13.819 for some reason, the responsive view pushes the search UI to a link 00:11:13.819 --> 00:11:18.721 underneath the map into a collapse, and then you're  supposed to click on that link and open it up. 00:11:18.721 --> 00:11:27.443 Now, it's even hard to see for sighted users. Even when I was observing it, I barely noticed this link. 00:11:27.443 --> 00:11:33.397 What was happening with our blind users was it was skipping right past it; so, it was reading the screen – you know – 00:11:33.397 --> 00:11:39.012 so, it was like *search results, a map, edit search*, and then... and then it was continuing on. 00:11:39.012 --> 00:11:44.505 And it was just the fact that it said "edit search", 00:11:44.505 --> 00:11:50.513 here you're seeing the user was turning down her speaking rate because she thought – she went over it like five times 00:11:50.513 --> 00:11:55.204 and didn't catch it. 00:11:55.204 --> 00:11:59.716 It actually was there. I thought it wasn't there; I thought it wasn't being picked up, but it was there. 00:11:59.716 --> 00:12:05.825 When she turned down her speaking rate, you could hear it being said, but it was sort of mashed in. 00:12:05.840 --> 00:12:10.157 And the question was – this is like  definitely a usability question and a 00:12:10.157 --> 00:12:15.182 responsive design decision is: *Why would you need to collapse it?* 00:12:15.182 --> 00:12:22.161 Why not just have the UI – you know – *above the map would be better*, so you have it where it was before? 00:12:22.350 --> 00:12:32.208 Even below – if it was there – the actual just UI as opposed to collapsing it and making it a link that said "edit search". 00:12:32.208 --> 00:12:40.601 So, you can see here really where usability in UX plays into accessibility when you're thinking about it. 00:12:40.601 --> 00:12:45.381 It actually requires you – in the same way that SEO responsive web design, 00:12:45.381 --> 00:12:50.621 accessibility requires you to be thinking about things the way a screen reader, 00:12:50.621 --> 00:12:58.004 the way a user accessing this website with a screen reader would think about it. 00:12:58.004 --> 00:13:01.990 And it's really tricky to think that way – I need to tell you this. 00:13:01.990 --> 00:13:06.753 It's super tricky to think that way, because you're *not used to it*. 00:13:06.753 --> 00:13:11.109 You know – you're used to your visual bias; you're like, "Well, I can see the link... what's the problem?" 00:13:11.109 --> 00:13:20.733 And so, this is where accessibility testing can help you get to that last mile of insight. 00:13:20.733 --> 00:13:26.208 So, the tenth principle here is *embrace the access attitude*. 00:13:26.208 --> 00:13:30.400 It's *People First* – design for differences. 00:13:30.400 --> 00:13:35.837 *Clear Purpose* – so, well-defined goals, and  that means understanding your audience. 00:13:35.837 --> 00:13:39.674 So, we'll be talking about personas later on in this course. 00:13:39.674 --> 00:13:47.426 *Solid Structure* – so building to standards; there are great standards. Accessibility is based on good clean coding. 00:13:47.426 --> 00:13:52.913 So, just like alt-text, every image  needs an alt tag – *every single image*. 00:13:52.913 --> 00:14:01.378 That's just part of clean coding, and it'll make things accessible and Googlebot will be happy as well. 00:14:01.680 --> 00:14:09.277 *Easy Interactions* – everything works across devices. Interoperability baked right in. 00:14:09.277 --> 00:14:13.886 *Helpful Wayfinding* – so, it's navigation: clear navigation. 00:14:13.886 --> 00:14:22.401 One of the things with accessibility is a lot of sites and web apps make it hard for users to navigate. 00:14:22.401 --> 00:14:28.895 So, just like we saw with that comparison of the  usability test versus the accessibility test, 00:14:28.895 --> 00:14:35.345 it's like twice as hard / three times as hard to navigate  a site if you're using a screen reader, for example. 00:14:35.520 --> 00:14:39.907 *Clean Presentation* – supporting meaning; that's a huge one: supporting meaning. 00:14:39.907 --> 00:14:49.883 *Plain Language* – plain language is really important, especially for the cognitive disabilities such as dyslexia or ADD or ADHD. 00:14:50.403 --> 00:14:55.091 And then, finally, *Accessible  Media* – so, supporting all the senses. 00:14:55.091 --> 00:15:00.675 So, offering captioning for deaf and hard of hearing users, 00:15:00.675 --> 00:15:09.235 offering alternative formats – for example, if the media or if the image is too complex 00:15:09.235 --> 00:15:14.780 or the table is too complex, you'll need to offer a  different way for users to get to it.