WEBVTT 00:00:00.429 --> 00:00:09.165 [ music ] 00:00:09.165 --> 00:00:10.792 You want these people. 00:00:10.792 --> 00:00:13.759 They order your products, sign up for your services, 00:00:13.759 --> 00:00:16.627 enroll in your classes, read your opinions, 00:00:16.627 --> 00:00:18.561 and watch your videos. 00:00:18.561 --> 00:00:24.165 You'll never see them, but they know you; through your website. 00:00:24.165 --> 00:00:25.891 Or maybe not. 00:00:25.891 --> 00:00:30.000 Your website's visitors aren't a faceless mass of identical mouse-clickers, 00:00:30.000 --> 00:00:35.297 but a vibrant community of individuals with varying tastes, styles, and abilities. 00:00:35.297 --> 00:00:38.500 To be successful in designing your site, 00:00:38.500 --> 00:00:42.759 you have to think about how those individuals access your information. 00:00:42.759 --> 00:00:45.462 We'll show you how to design websites that are usable 00:00:45.462 --> 00:00:49.396 by individuals employing a wide variety of technologies. 00:00:49.396 --> 00:00:51.231 This includes people with disabilities. 00:00:52.531 --> 00:00:54.693 It's important for web designers and developers 00:00:54.693 --> 00:00:58.759 to realize that what they see currently on their computer, 00:00:58.759 --> 00:01:03.000 at their resolution, with their browser and their operating system, 00:01:03.000 --> 00:01:05.561 is not going to be necessarily the same thing that everybody else sees. 00:01:05.561 --> 00:01:09.231 There's no "normal" or "standard" way 00:01:09.231 --> 00:01:12.825 to describe all the individuals who make up our society. 00:01:12.825 --> 00:01:16.825 And there's no single profile of people who use the Internet. 00:01:16.825 --> 00:01:20.000 Almost everyone uses it, and they use it all the time. 00:01:20.198 --> 00:01:22.429 Well, it's just to participate in society. 00:01:22.429 --> 00:01:24.528 More of what we're doing is online. 00:01:24.528 --> 00:01:27.396 You know, the way that we're interacting with people; 00:01:27.396 --> 00:01:28.891 the way that we're buying our groceries; 00:01:28.891 --> 00:01:34.627 the way that we're working, learning, paying our taxes. 00:01:34.627 --> 00:01:36.693 You know, it's all very important stuff. 00:01:36.693 --> 00:01:38.099 Hey, look at this. 00:01:38.099 --> 00:01:40.264 Not everyone will access your site 00:01:40.264 --> 00:01:42.825 using a keyboard, a mouse, and a monitor. 00:01:42.825 --> 00:01:46.264 Some people will be using cell phones or touch screens. 00:01:46.264 --> 00:01:49.462 Others may access the web using refreshable Braille devices 00:01:49.462 --> 00:01:51.891 or computer-generated speech for output. 00:01:51.891 --> 00:01:55.033 ...but you don't change the structure of the brain. 00:01:55.033 --> 00:01:56.330 ...for example, comma... 00:01:56.330 --> 00:01:58.462 Some users might interact 00:01:58.462 --> 00:02:02.231 using speech recognition, or other assistive technology, for input. 00:02:02.231 --> 00:02:04.297 They may navigate by keyboard alone, 00:02:04.297 --> 00:02:06.693 because they're unable to use a mouse. 00:02:06.693 --> 00:02:10.363 Nobody wants to make a barrier to their web page. 00:02:10.363 --> 00:02:14.660 However, it's very easy to do so without knowing everything 00:02:14.660 --> 00:02:16.594 that you might need to know about accessibility, 00:02:16.594 --> 00:02:18.924 and what are the things that affect the ability 00:02:18.924 --> 00:02:20.594 of somebody to visit a web page. 00:02:20.594 --> 00:02:23.033 Some of those potential barriers affect people 00:02:23.033 --> 00:02:24.825 with disabilities. 00:02:24.825 --> 00:02:26.726 They may not be able to see graphics 00:02:26.726 --> 00:02:29.495 because of visual impairments, or hear audio due 00:02:29.495 --> 00:02:31.297 to hearing impairments. 00:02:31.297 --> 00:02:34.330 They may be physically unable to use a mouse. 00:02:34.330 --> 00:02:35.891 They may have learning disabilities 00:02:35.891 --> 00:02:39.231 that make it difficult to navigate a cluttered web page. 00:02:39.231 --> 00:02:42.099 And you don't want them to give up on your site. 00:02:42.099 --> 00:02:44.495 It makes sense that you would want as many customers 00:02:44.495 --> 00:02:46.627 as possible to get through your doors, 00:02:46.627 --> 00:02:48.198 whether they're physical doors on the street, 00:02:48.198 --> 00:02:50.066 or virtual doors on the web. 00:02:50.066 --> 00:02:52.495 It's just intelligent thinking about your design 00:02:52.495 --> 00:02:55.165 and just making sure that you've considered factors. 00:02:55.165 --> 00:02:56.660 When you design a car, you've got to think 00:02:56.660 --> 00:02:59.627 about all the different places it's going to go 00:02:59.627 --> 00:03:01.594 and all the needs people will have with that car. 00:03:01.594 --> 00:03:03.396 It's the same thing with a website. 00:03:03.396 --> 00:03:05.231 Universal design is key 00:03:05.231 --> 00:03:07.528 to building web content that's accessible 00:03:07.528 --> 00:03:10.033 and usable for diverse visitors. 00:03:10.033 --> 00:03:13.462 Well, to me, universal design means 00:03:13.462 --> 00:03:16.231 addressing the needs of the widest possible audience, 00:03:16.231 --> 00:03:19.726 with all of their abilities, that you can possibly do, 00:03:19.726 --> 00:03:21.297 given the technology at hand. 00:03:21.297 --> 00:03:23.891 It's an approach that really benefits lots and lots of people. 00:03:25.363 --> 00:03:27.726 It has a semantic base, it has a good framework 00:03:27.726 --> 00:03:30.462 that can be flexible, in that people can take 00:03:30.462 --> 00:03:33.429 from it what they need, and they can change it 00:03:33.429 --> 00:03:35.528 into something that's going to work for them. 00:03:35.528 --> 00:03:37.858 So, it's just a well-designed site. 00:03:37.858 --> 00:03:40.264 If you can design a website, 00:03:40.264 --> 00:03:42.627 you can design an accessible one. 00:03:42.627 --> 00:03:44.759 The neat thing about web accessibility is 00:03:44.759 --> 00:03:46.495 that everything you might want to learn 00:03:46.495 --> 00:03:50.891 about it is available online, with some key searches 00:03:50.891 --> 00:03:54.132 and some resources that are out there. 00:03:54.132 --> 00:03:56.726 As detailed as you want to get. 00:03:56.726 --> 00:03:59.231 The most important thing to keep in mind 00:03:59.231 --> 00:04:01.924 in developing a website is to comply with standards. 00:04:01.924 --> 00:04:05.924 So, be aware of what the standards are, 00:04:05.924 --> 00:04:12.627 and develop websites that comply with those standards. 00:04:12.627 --> 00:04:15.165 The World Wide Web Consortium, known as W3C, 00:04:15.165 --> 00:04:21.627 has developed and published the Web Content Accessibility Guidelines, or WCAG. 00:04:39.957 --> 00:04:41.957 The point of that is, 00:04:39.957 --> 00:04:42.660 how are you making the information available? 00:04:42.660 --> 00:04:43.759 how are you making the information available to the person's senses? 00:04:43.759 --> 00:04:46.099 So if someone is not able to see, 00:04:46.099 --> 00:04:48.099 what information are they missing? 00:04:48.099 --> 00:04:51.495 Well, they won't be able to see color; they won't be able to see images; those types of things. 00:04:51.495 --> 00:04:53.825 So you need to provide equivalents, 00:04:53.825 --> 00:04:55.957 you need to provide text that the screen reader can use 00:04:55.957 --> 00:04:58.396 to make that information perceivable. 00:04:58.396 --> 00:05:01.264 Using good, semantic HTML is key 00:05:01.264 --> 00:05:03.396 to making information accessible 00:05:03.396 --> 00:05:05.660 to someone using a screen reader. 00:05:05.660 --> 00:05:07.660 If you're someone who's using a screen reader, 00:05:07.660 --> 00:05:10.396 and you come to a form where there's a checkbox, 00:05:10.396 --> 00:05:12.396 it won't be identified as a checkbox 00:05:12.396 --> 00:05:14.462 unless you put some code in there 00:05:14.462 --> 00:05:16.528 that says, "This is a checkbox." 00:05:16.528 --> 00:05:20.957 So for the person who's using the page visually, it will look and it will act like a checkbox. 00:05:20.957 --> 00:05:24.099 But for someone who can't see that and get that information, 00:05:24.099 --> 00:05:26.792 then you need to provide, in the underlying code, 00:05:26.792 --> 00:05:31.897 something that the screen reader can use to indicate that that's a checkbox. 00:05:31.897 --> 00:05:35.198 Images on a page need to have text associated with them. 00:05:35.198 --> 00:05:37.132 In this case, 00:05:37.132 --> 00:05:40.594 this is an image that, you know, even I, who can see, have no idea what it means. 00:05:40.594 --> 00:05:43.297 So, the alt attribute is actually helpful for me. 00:05:43.297 --> 00:05:45.627 The text equivalent for this image is 00:05:45.627 --> 00:05:48.128 "microorganisms from a Lake Washington mud sample." 00:05:48.128 --> 00:05:49.528 ...and some of them have disabilities... 00:05:49.528 --> 00:05:53.000 For users with hearing impairments, the perceivable principle 00:05:53.000 --> 00:05:57.066 requires captioning video and transcribing audio elements. 00:05:57.066 --> 00:05:59.627 When I'm going into a website, it'll go right past me 00:05:59.627 --> 00:06:02.066 if it happens, like, there's music or talking 00:06:02.066 --> 00:06:03.528 and there's no captioning there. 00:06:03.528 --> 00:06:06.231 I just get lost, and then I'll have to ask my friend, 00:06:06.231 --> 00:06:07.462 "Would you tell me what that says?" 00:06:07.462 --> 00:06:09.363 And then I really feel lost. 00:06:09.363 --> 00:06:10.891 If somebody can't hear that content, 00:06:10.891 --> 00:06:13.165 they're not going to have access to it. 00:06:13.165 --> 00:06:15.429 So, for video, we need captions. 00:06:15.429 --> 00:06:17.825 For audio, we need transcripts. 00:06:17.825 --> 00:06:20.227 And that also helps other people, too, 00:06:20.227 --> 00:06:22.198 who may be on a slow modem connection 00:06:22.198 --> 00:06:28.192 and don't have the bandwidth to support viewing a video 00:06:28.192 --> 00:06:29.396 or even listening to an audio podcast. 00:06:29.396 --> 00:06:32.231 Another benefit of captioning or transcribing 00:06:32.231 --> 00:06:35.561 is that it makes your multimedia content fully searchable 00:06:35.561 --> 00:06:39.792 using a text-based search, and that benefits everybody. 00:06:45.825 --> 00:06:47.231 If somebody can't use a mouse, 00:06:47.231 --> 00:06:51.660 or is using a technology that is not mouse based... 00:06:51.660 --> 00:06:54.660 maybe they're using speech recognition, maybe they're using a handheld device with a stylus, 00:06:54.660 --> 00:06:58.330 or lots of assistive technologies: 00:06:58.330 --> 00:07:05.033 eye gaze technologies, head pointers, mouth sticks, any number of different technologies... 00:07:05.033 --> 00:07:08.594 they still need to be able to operate the buttons, click on the links, 00:07:08.594 --> 00:07:11.627 make the menus appear. 00:07:11.627 --> 00:07:15.660 So the tab moves the cursor from link to link... 00:07:15.660 --> 00:07:17.594 Design your site to be operable 00:07:17.594 --> 00:07:21.363 with keyboard commands as an option for people who don't use a mouse. 00:07:21.363 --> 00:07:23.825 And unfortunately, many websites are designed 00:07:23.825 --> 00:07:27.066 so that you have to use a mouse and to click on a button, 00:07:27.066 --> 00:07:30.594 or to slide your mouse different ways to access a website. 00:07:30.594 --> 00:07:34.726 This is the College of Engineering website at the University of Washington. 00:07:34.726 --> 00:07:37.396 It's been designed using a standards-based approach, 00:07:37.396 --> 00:07:40.198 and it's incorporated accessibility features in it. 00:07:40.198 --> 00:07:42.561 There's a navigation bar across the middle of the page 00:07:42.561 --> 00:07:48.759 that includes About Us, Departments, Faculty and Research, Give to Engineering, and some other options. 00:07:48.759 --> 00:07:53.924 Using the mouse, when I mouse over these, a menu pops up. 00:07:53.924 --> 00:07:58.924 And under About Us, we have several options within that menu. 00:07:58.924 --> 00:08:02.165 What I want to show now is that I'm not going to use the mouse, 00:08:02.165 --> 00:08:05.198 but I still want to try to get to those menu items. 00:08:05.198 --> 00:08:08.957 And if I use the shift-tab key, I'll go back to Departments, 00:08:08.957 --> 00:08:13.099 and if I hit shift-tab again, I go to About Us. 00:08:13.099 --> 00:08:17.297 The menu hasn't popped up, but if I press return, 00:08:17.297 --> 00:08:21.396 I go to a new web page, and here are those options 00:08:21.396 --> 00:08:23.165 that had been on the previous page. 00:08:23.165 --> 00:08:27.231 So I can access all of the menus using the keyboard only, 00:08:27.231 --> 00:08:29.264 which is important. 00:08:36.693 --> 00:08:39.363 Understandable is making sure 00:08:39.363 --> 00:08:41.000 that the content is understandable both 00:08:41.000 --> 00:08:42.825 to the technology and to the people, 00:08:42.825 --> 00:08:45.264 but one of the main things you can do there is 00:08:45.264 --> 00:08:48.132 to mark what human language is used on the website. 00:08:48.132 --> 00:08:50.627 If it's a site that's written in English, you can mark it as English. 00:08:50.627 --> 00:08:52.594 If it's in French, it's French. 00:08:52.594 --> 00:08:57.297 And it becomes really important if it's a site that goes back and forth, 00:08:57.297 --> 00:09:01.330 you may have some English interspersed with some French, like the United Nations website. 00:09:01.330 --> 00:09:05.627 You have to figure out what task a person is trying to do 00:09:05.627 --> 00:09:08.825 when they come to your website. 00:09:08.825 --> 00:09:13.660 And then you try to design the page to make it easy for them 00:09:13.660 --> 00:09:19.330 to easily, effectively, properly do the task correctly the first time. 00:09:19.330 --> 00:09:23.066 I think everybody would like a simple web page. It's a lot more.... 00:09:23.066 --> 00:09:26.462 a lot less complicated and a lot less cluttered; 00:09:26.462 --> 00:09:28.327 it just looks a lot better. 00:09:34.627 --> 00:09:40.330 Robust is that the website and the technologies used in the website 00:09:40.330 --> 00:09:44.099 are going to work well with assistive technologies, 00:09:44.099 --> 00:09:46.825 and it's also looking forward to when new browsers and new devices come out, 00:09:46.825 --> 00:09:49.132 that it will continue to work. 00:09:49.132 --> 00:09:51.528 I got a laptop when I was a senior in high school, 00:09:51.528 --> 00:09:53.759 and I used that for everything. 00:09:53.759 --> 00:09:58.000 And then about a year and a half ago, I got the iPhone, 00:09:58.000 --> 00:10:03.462 and pretty much 90 percent of what I do is on my phone now. 00:10:03.462 --> 00:10:09.132 Another W3C standard is ARIA, Accessible Rich Internet Applications. 00:10:09.132 --> 00:10:11.099 ARIA provides methods for ensuring 00:10:11.099 --> 00:10:15.561 that dynamic web applications are accessible to individuals with disabilities. 00:10:15.561 --> 00:10:17.000 So the challenge now, 00:10:17.000 --> 00:10:19.561 with more interactive web content, 00:10:19.561 --> 00:10:24.033 is you have things changing, so it's not just a static page. 00:10:24.033 --> 00:10:26.594 You perform some action, as a user, 00:10:26.594 --> 00:10:30.396 and that triggers content changes elsewhere on the page. 00:10:30.396 --> 00:10:32.792 So things become a lot more complex. 00:10:32.792 --> 00:10:37.825 A key to making all this happen is standards and guidelines. 00:10:37.825 --> 00:10:42.627 Adopting standards, such as the W3C's Web Content Accessibility Guidelines and ARIA, 00:10:42.627 --> 00:10:46.264 is critical for accessibility. 00:10:46.264 --> 00:10:51.066 Another source is the United States Access Board's Section 508 standards. 00:10:51.066 --> 00:10:53.363 Section 508 of the Rehabilitation Act is a law 00:10:53.363 --> 00:10:58.561 requiring federal agencies to ensure that their information technology, 00:10:58.561 --> 00:11:01.495 including websites, is accessible. 00:11:52.561 --> 00:11:54.363 The way that I like to test things is, 00:11:57.363 --> 00:12:00.000 I inspect the website, and I look for the things that need to be there. 00:12:00.000 --> 00:12:03.000 So, do images have an alt attribute? 00:12:03.000 --> 00:12:05.231 And if they do, does it make sense? 00:12:05.231 --> 00:12:09.099 You can turn off style sheets, and you can look at how the page 00:12:09.099 --> 00:12:10.693 looks without the style sheets. 00:12:10.693 --> 00:12:13.957 What's the actual structure, the framework of that content? 00:12:13.957 --> 00:12:21.132 [ music ] 00:12:21.132 --> 00:12:23.099 You want as many people as possible 00:12:23.099 --> 00:12:25.396 to access your information. 00:12:25.396 --> 00:12:27.594 If your website is designed well, 00:12:27.594 --> 00:12:31.132 everyone who visits it will be able to do that successfully. 00:12:31.132 --> 00:12:35.091 The web is flexible. that's the beauty of it. 00:12:35.091 --> 00:12:37.192 And that it can transform; 00:12:37.192 --> 00:12:43.000 that someone can increase the font size, and someone else can change the color, 00:12:43.000 --> 00:12:45.058 is really the beauty of using all these bits 00:12:45.058 --> 00:12:46.561 and using digital media, 00:12:46.561 --> 00:12:48.227 is that it is flexible, 00:12:48.227 --> 00:12:50.092 and that's exactly what makes it accessible, 00:12:50.092 --> 00:12:52.000 and that's what makes it work on mobile devices, 00:12:52.000 --> 00:12:56.000 and over the phone, and however else you want to access it.