WEBVTT 00:00:04.065 --> 00:00:07.002 (Steve Bruner) Alright, welcome to the WordPress 00:00:07.002 --> 00:00:09.679 New York City meetup! 00:00:09.679 --> 00:00:11.409 Okay, so tonight we are going to have 00:00:11.409 --> 00:00:25.339 Sveta present about accessibility with websites. 00:00:25.339 --> 00:00:26.749 (Sveta voiced by an interpreter) Hi, everyone! 00:00:26.749 --> 00:00:28.063 My name is Sveta. 00:00:28.063 --> 00:00:30.769 Actually it's short for 00:00:30.769 --> 00:00:33.094 a longer version of my name. 00:00:33.094 --> 00:00:36.086 I'm originally from Russia, that's why I have such a long name. 00:00:36.086 --> 00:00:39.074 And i'm presenting about web accessibility - something i'm very 00:00:39.074 --> 00:00:42.063 interested in as a deaf person. 00:00:42.063 --> 00:00:46.029 As someone who is disabled, naturally I'm very interested in 00:00:46.029 --> 00:00:50.077 web accessibility. 00:00:50.077 --> 00:00:53.045 And this is a logo created by some university 00:00:53.045 --> 00:00:55.039 that represent accessibility. 00:00:55.039 --> 00:00:58.053 Because not everyone uses a wheelchair, there are people who are blind or deaf, 00:00:58.053 --> 00:01:01.078 who have cognitive disabilities 00:01:01.078 --> 00:01:04.066 as well who aren't necessarily represented by the wheelchair logo 00:01:04.066 --> 00:01:07.068 that's usually used for accessibility. 00:01:07.068 --> 00:01:15.046 So you have the eye, the hand, and the ear, and the brain to represent cognitive abilities as well. 00:01:15.046 --> 00:01:20.027 So I am sure you all know who Tim Berners-Lee is. Is there anyone who doesn't know? 00:01:20.027 --> 00:01:24.002 Who knows who he is? 00:01:24.002 --> 00:01:28.009 OK many of you know who he is - and this is a quote from him: 00:01:28.009 --> 00:01:32.024 "The power of the web is in its universality. Access by everyone 00:01:32.024 --> 00:01:37.031 regardless of disability is an essential aspect." 00:01:37.031 --> 00:01:41.058 In the early days of the web 00:01:41.058 --> 00:01:44.092 it was actually more accessible than now 00:01:44.092 --> 00:01:47.084 because most of the websites were text and links, 00:01:47.084 --> 00:01:51.369 and not very many images and videos. 00:01:51.369 --> 00:01:56.098 So there wasn't a lot of audio, but today 00:01:56.098 --> 00:02:03.042 97% of websites are not accessible. 00:02:03.042 --> 00:02:06.051 Many people who are blind. They think: "Oh they can just 00:02:06.051 --> 00:02:10.094 use screen readers. That's good enough for them." But actually the web, 00:02:10.094 --> 00:02:12.719 the sites must be coded 00:02:12.719 --> 00:02:16.003 in order to be compatible with screen readers, or people 00:02:16.003 --> 00:02:17.349 who can't use a mouse, 00:02:17.349 --> 00:02:21.068 or who can't use a keyboard, need other devices. 00:02:21.068 --> 00:02:26.069 Automatic captions are not very accessible for deaf people. 00:02:26.069 --> 00:02:33.689 So 97% of websites as a result are not accessible. 00:02:33.689 --> 00:02:37.839 Maybe people think that people with disabilities are a small group of people, 00:02:37.839 --> 00:02:40.084 but actually disabled people can constitute the largest minority group - 00:02:40.084 --> 00:02:45.609 more than foreigners 00:02:45.609 --> 00:02:49.359 and the market here for people in the United States 00:02:49.359 --> 00:02:51.639 is $1 trillion. 00:02:51.639 --> 00:02:55.469 That's double the spending power of teenagers. 00:02:55.469 --> 00:02:59.669 Worldwide, people with disabilities constitute 00:02:59.669 --> 00:03:02.199 a $ 4 trillion market place. 00:03:02.199 --> 00:03:04.199 That's almost the size of China. 00:03:04.199 --> 00:03:12.619 So it's a really important group of people that should not be ignored. 00:03:12.619 --> 00:03:14.739 It's not just people with disabilities 00:03:14.739 --> 00:03:18.939 who benefit from web accessibility as you see from these pictures. 00:03:18.939 --> 00:03:22.889 You have a mother with a stroller and also a businessperson carrying 00:03:22.889 --> 00:03:24.609 a roller suitcase. 00:03:24.609 --> 00:03:33.459 Ramps are actually very helpful for people in all these situations. 00:03:33.459 --> 00:03:39.069 It also benefits people who use carts or any sort of wheeled devices. 00:03:39.069 --> 00:03:40.509 Ramps and elevators help 00:03:40.509 --> 00:03:42.095 these people as well. 00:03:42.095 --> 00:03:45.079 So it's not just for people who are using wheelchairs. 00:03:45.079 --> 00:03:49.082 Also captions not only benefit people who are deaf. 00:03:49.082 --> 00:03:52.024 Speakers of foreign languages also 00:03:52.024 --> 00:03:53.063 benefit from captions. 00:03:53.063 --> 00:03:54.031 People who are developing their literacy skills or 00:03:54.031 --> 00:03:58.021 if someone's in some sort of noisy environment and 00:03:58.021 --> 00:04:00.659 they want to watch something quietly on the web, 00:04:00.659 --> 00:04:10.099 that's another reason why captions for videos are so important. 00:04:10.099 --> 00:04:13.969 In talking about the spending power of people who have disabilities 00:04:13.969 --> 00:04:16.689 doesn't only affect people with disabilities, but their friends and 00:04:16.689 --> 00:04:18.065 family members as well. 00:04:18.065 --> 00:04:21.269 If products and services are not accessible 00:04:21.269 --> 00:04:24.002 then you lose those extra clientele as well because 00:04:24.002 --> 00:04:28.027 you have 2 billion people worldwide 00:04:28.027 --> 00:04:31.209 are connected to people with disabilities. 00:04:31.209 --> 00:04:35.429 That constitutes a disposable income of $8 trillion. 00:04:35.429 --> 00:04:39.909 So it's another benefit. 00:04:39.909 --> 00:04:41.689 The devices that can help 00:04:41.689 --> 00:04:46.969 people with independence in terms of computers or mobile phones - 00:04:46.969 --> 00:04:49.086 you have a large audience. This participation, 00:04:49.086 --> 00:04:52.049 this increased market opportunity, 00:04:52.049 --> 00:04:56.649 also having a positive image, not just waiting for someone to sue you 00:04:56.649 --> 00:04:58.093 because your website is inaccessible. 00:04:58.093 --> 00:05:04.074 If u show that you're making an investment for accessibility, 00:05:04.074 --> 00:05:09.499 it's a much better better investment than spending money on a lawsuit later. 00:05:09.499 --> 00:05:15.033 Improved visibility is another benefit, and also higher search engines results. 00:05:15.033 --> 00:05:20.159 Speaking of search engines - 00:05:20.159 --> 00:05:24.039 this is the largest accessibility needs user on the Internet, 00:05:24.039 --> 00:05:29.169 because Google, Yahoo!, and Bing - 00:05:29.169 --> 00:05:33.055 those sites can't see images and they really rely on captioning 00:05:33.055 --> 00:05:36.061 for the images. 00:05:36.061 --> 00:05:39.939 If a video doesn't have captions it does not appear in search results, 00:05:39.939 --> 00:05:43.003 because Google can't hear a video. 00:05:43.003 --> 00:05:47.015 Thus captioning and the tags 00:05:47.015 --> 00:05:56.027 are very important for search engines. 00:05:56.027 --> 00:05:58.259 And with javascript... 00:05:58.259 --> 00:06:06.289 sometimes the code in javascript is not compatible with some keyboards as well. 00:06:06.289 --> 00:06:13.249 How many of you are familiar with Web Accessibility Guidelines? 00:06:13.249 --> 00:06:16.139 It seems that there are a number of you. 00:06:16.139 --> 00:06:19.289 Perhaps it might be very overwhelming because the list 00:06:19.289 --> 00:06:20.099 of guidelines is quite long 00:06:20.099 --> 00:06:25.075 and even for myself I can be quite overwhelmed with that, so people tend 00:06:25.075 --> 00:06:28.041 to make these categorizations 00:06:28.041 --> 00:06:30.004 and create basic guidelines 00:06:30.004 --> 00:06:36.879 which are described as the acronym P.O.U.R. 00:06:36.879 --> 00:06:38.419 Perceivable. 00:06:38.419 --> 00:06:41.088 Meaning blind people who can perceive the image, 00:06:41.088 --> 00:06:45.229 they might need an audio to supplement, 00:06:45.229 --> 00:06:49.639 or for people who can't hear, they rely on captions. 00:06:49.639 --> 00:06:50.078 Operable. 00:06:50.078 --> 00:06:53.169 Means people who use a keyboard 00:06:53.169 --> 00:06:56.036 to make sure that everything - all the functions can be used 00:06:56.036 --> 00:06:59.011 by a keyboard not just by a mouse. 00:06:59.011 --> 00:07:03.379 You don't have to hover over something to be able to see the option. 00:07:03.379 --> 00:07:05.569 People can't rely on a mouse would then 00:07:05.569 --> 00:07:07.074 not be able to use that function. 00:07:07.074 --> 00:07:10.003 Understandability. 00:07:10.003 --> 00:07:14.929 Understandable means if text is there to make sure that text is easily 00:07:14.929 --> 00:07:16.062 understood by any user. 00:07:16.062 --> 00:07:18.729 Even though maybe you might think: 00:07:18.729 --> 00:07:22.072 "Well, there's a YouTube video - YouTube has automatic captions - 00:07:22.072 --> 00:07:24.189 that might be good enough." 00:07:24.189 --> 00:07:27.009 But automatic actions are usually unintelligible. They really 00:07:27.009 --> 00:07:29.469 do need to be cleaned up 00:07:29.469 --> 00:07:33.409 otherwise most deaf people will not be able to understand them. 00:07:33.409 --> 00:07:34.008 Robust. 00:07:34.008 --> 00:07:44.659 Means something that's compatible with current and possibly future technologies. 00:07:44.659 --> 00:07:48.939 So now talking a little bit about how to make a website accessible in terms of 00:07:48.939 --> 00:07:50.629 the technical aspects. 00:07:50.629 --> 00:07:52.719 The semantic web. 00:07:52.719 --> 00:07:56.008 In terms of the semantic web, content is king. 00:07:56.008 --> 00:07:57.082 Perhaps someone has 00:07:57.082 --> 00:08:00.639 a fabulously beautiful looking website 00:08:00.639 --> 00:08:03.979 but the functionality in the content is weak. 00:08:03.979 --> 00:08:08.349 We have these three elements: html, css, and javascript. 00:08:08.349 --> 00:08:11.078 The html provides a very strong foundation first, 00:08:11.078 --> 00:08:14.979 and then you can use style sheets with css, 00:08:14.979 --> 00:08:17.319 and then javascript - it's probably 00:08:17.319 --> 00:08:20.979 best to use javascript only when necessary. 00:08:20.979 --> 00:08:24.039 I know it might seem fun to add some more fun functions, but 00:08:24.039 --> 00:08:28.019 the less javascript, the more accessible a website could be. 00:08:28.019 --> 00:08:31.008 How many of you are familiar with 00:08:31.008 --> 00:08:34.092 that WordPress has this word 'role' - R-O-L-E 00:08:34.092 --> 00:08:38.088 - how many of you have noticed that in WordPress? 00:08:38.088 --> 00:08:40.033 A few of you? 00:08:40.033 --> 00:08:43.099 I've noticed that role 00:08:43.099 --> 00:08:47.879 equals main role banner 00:08:47.879 --> 00:08:50.949 and I thought that perhaps some people think you can just delete that but that's very 00:08:50.949 --> 00:08:53.098 important part of the web accessibility. 00:08:53.098 --> 00:08:57.044 Here's some examples of role - 00:08:57.044 --> 00:08:59.004 like body, 00:08:59.004 --> 00:09:02.003 the role document, 00:09:02.003 --> 00:09:03.082 header 00:09:03.082 --> 00:09:06.014 has a role, banner, 00:09:06.014 --> 00:09:08.084 and if main will have a role, main, 00:09:08.084 --> 00:09:11.087 footer has its content info. 00:09:11.087 --> 00:09:13.077 So on the WordPress 00:09:13.077 --> 00:09:18.078 template keep the role, don't get rid of that. 00:09:18.078 --> 00:09:25.091 There are more examples of this role as well. 00:09:25.091 --> 00:09:29.074 In terms of the html structure, it's important to have a good structure 00:09:29.074 --> 00:09:31.031 to the website. 00:09:31.031 --> 00:09:32.008 Many of you might 00:09:32.008 --> 00:09:35.024 skip links, but it's important 00:09:35.024 --> 00:09:38.031 that it's in the top of the html page, 00:09:38.031 --> 00:09:43.000 because many people who use screenreaders 00:09:43.000 --> 00:09:47.058 don't want to hear link over and over. again for every page. 00:09:47.058 --> 00:09:51.023 So they prefer to have the option of 'skip link' 00:09:51.023 --> 00:09:55.025 to the main content or other parts of the webpage. 00:09:55.025 --> 00:09:57.061 You can also hide that 00:09:57.061 --> 00:10:00.063 with the css style sheets, 00:10:00.063 --> 00:10:04.005 but don't use 'display none' 00:10:04.005 --> 00:10:06.071 or 'visible none' 00:10:06.071 --> 00:10:12.097 because that will cause the screenreader not to show the content. 00:10:12.097 --> 00:10:16.048 If you indent over - 00:10:16.048 --> 00:10:18.076 over position - 00:10:18.076 --> 00:10:22.033 then you can hide 00:10:22.033 --> 00:10:26.006 those commands that only the screenreader will be able to distinguish. 00:10:26.006 --> 00:10:28.097 Talking about images - 00:10:28.097 --> 00:10:33.093 navigation - all the navigation buttons must have bullets 00:10:33.093 --> 00:10:35.064 and 00:10:35.064 --> 00:10:42.078 for the screenreader. 00:10:42.078 --> 00:10:45.058 You can style with css, 00:10:45.058 --> 00:10:48.013 but it's important to have those bullet points. 00:10:48.013 --> 00:10:55.065 Drop-down menus - it's best if you use html and css not javascript for those. 00:10:55.065 --> 00:10:59.007 You can have the drop downs in css, 00:10:59.007 --> 00:11:04.055 but it's also important to keep the drop downs limited to maybe two levels, 00:11:04.055 --> 00:11:07.003 because the screenreader is going to repeat 00:11:07.003 --> 00:11:10.049 that over and over again. 00:11:10.049 --> 00:11:13.093 Header , , - 00:11:13.093 --> 00:11:15.068 it's best to use that 00:11:15.068 --> 00:11:19.009 for the content organization, not for decoration. 00:11:19.009 --> 00:11:23.003 The keep that just for the page title, 00:11:23.003 --> 00:11:27.027 and for subcategories - 00:11:27.027 --> 00:11:29.068 not using that for the menu 00:11:29.068 --> 00:11:31.026 or for anything other than 00:11:31.026 --> 00:11:36.021 just the content. 00:11:36.021 --> 00:11:39.086 It's really annoying to see 'click here'. 00:11:39.086 --> 00:11:44.009 To download you don't need that. Just click here to download is very annoying. 00:11:44.009 --> 00:11:47.024 Or click here to download with check list. 00:11:47.024 --> 00:11:51.063 You can just have download checklist and the kind of file that it is because the 00:11:51.063 --> 00:11:55.018 screenreader reads click here, click here, and the screenreader isn't sure what 00:11:55.018 --> 00:11:57.038 you're clicking for. 00:11:57.038 --> 00:12:02.003 So the message, if it's just very clear - download to a pdf - 00:12:02.003 --> 00:12:06.004 then the person who is using the website will know to expect the certain 00:12:06.004 --> 00:12:11.009 kind of document. 00:12:11.009 --> 00:12:12.086 For the content text, 00:12:12.086 --> 00:12:18.014 make sure it can be resized in terms of a percentage, or 00:12:18.014 --> 00:12:20.021 in the terms of em. 00:12:20.021 --> 00:12:22.088 This way people who have low vision, 00:12:22.088 --> 00:12:27.009 who have some vision but can't see very well, can resize the text. 00:12:27.009 --> 00:12:30.017 Similarly on mobile devices, 00:12:30.017 --> 00:12:31.091 don't have frames, 00:12:31.091 --> 00:12:33.034 image maps, 00:12:33.034 --> 00:12:35.007 or layout tables. 00:12:35.007 --> 00:12:39.037 Those are very hard for screenreaders to be able to detect. 00:12:39.037 --> 00:12:43.083 Make sure that all functions can be accessible all through the keyboard, 00:12:43.083 --> 00:12:46.579 and that javascript - if you have to use it - 00:12:46.579 --> 00:12:48.098 it's better if it's downgradable, 00:12:48.098 --> 00:12:54.012 because then it there is a problem with javascript the website is still functional. 00:12:54.012 --> 00:13:00.043 Write in simple language using bullet points. Most people - 00:13:00.043 --> 00:13:04.019 anyone could have a disability, or the general public doesn't 00:13:04.019 --> 00:13:05.017 necessarily have as 00:13:05.017 --> 00:13:07.299 much time to spend reading 00:13:07.299 --> 00:13:09.091 a lot of text on a web page. 00:13:09.091 --> 00:13:16.054 You'll also want to have the web layout consistent for each page. 00:13:16.054 --> 00:13:21.058 If you need to, it's best to use html 5 canvas instead of flash. 00:13:21.058 --> 00:13:24.019 You can make flash accessible, 00:13:24.019 --> 00:13:26.072 but html 5 is a better way to go. 00:13:26.072 --> 00:13:35.061 Flash is also not accessible to users of iPhones and iPads anyway. 00:13:35.061 --> 00:13:40.065 I'm talking about the images and logos. 00:13:40.065 --> 00:13:46.001 There's a lot of confusion between 'alt' and 'title'. 00:13:46.001 --> 00:13:50.037 alt means what you can't see. 00:13:50.037 --> 00:13:54.056 the title tag is an optional thing - you don't need to have that. 00:13:54.056 --> 00:13:57.659 If it's an image that leads to another page, 00:13:57.659 --> 00:14:01.499 like a logo on the top left of the the navigation, 00:14:01.499 --> 00:14:04.002 you could have a description of what the image is. 00:14:04.002 --> 00:14:06.779 Accessibility logo, for example, alt. 00:14:06.779 --> 00:14:13.005 And then the title will say "go to home page" or going to a different website. 00:14:13.005 --> 00:14:15.043 If the image is just decorative 00:14:15.043 --> 00:14:17.006 then you can keep the alt empty, 00:14:17.006 --> 00:14:20.979 but don't remove it. Just had it there, but it doesn't need 00:14:20.979 --> 00:14:22.054 to have anything in there. 00:14:22.054 --> 00:14:25.799 Also no text in the graphics - it's best to use 00:14:25.799 --> 00:14:28.529 html for the text 00:14:28.529 --> 00:14:33.069 as screenreaders will not be able to read the text inside of an image. 00:14:33.069 --> 00:14:39.057 Avoid image maps if possible, that would be the best. 00:14:39.057 --> 00:14:43.033 Providing text or shapes for a color button, 00:14:43.033 --> 00:14:46.011 and i'll talk about color in a moment. 00:14:46.011 --> 00:14:50.081 Don't use strobing, flickering, or any sort of optical illusion because 00:14:50.081 --> 00:14:52.539 people who have seizures 00:14:52.539 --> 00:14:56.041 will be sensitive to that, and they might not even be able to see that or detect that. 00:14:56.041 --> 00:14:59.018 If it's something that's a slower 00:14:59.018 --> 00:15:02.309 pulsating type of image that could be ok, 00:15:02.309 --> 00:15:05.042 but not something that's an optical illusion. 00:15:05.042 --> 00:15:09.057 I mean, I know maybe it's apropos for some websites but usually 00:15:09.057 --> 00:15:11.061 it's not very accessible. 00:15:11.061 --> 00:15:13.016 Talking about color - 00:15:13.016 --> 00:15:17.001 one in ten men are color blind. 00:15:17.001 --> 00:15:18.006 I've met a lot of men 00:15:18.006 --> 00:15:22.021 who are color blind, but actually I haven't met a woman 00:15:22.021 --> 00:15:27.004 who is color blind, and statistically it's only one in two hundred. 00:15:27.004 --> 00:15:29.058 If you notice a subway map, 00:15:29.058 --> 00:15:33.098 typically I'll say to my friend, oh I will take the green line, or take the red line, 00:15:33.098 --> 00:15:35.085 or the orange line. 00:15:35.085 --> 00:15:42.041 I rarely will reference the number but if someone's color blind it might be harder. 00:15:42.041 --> 00:15:46.072 Red and green are typically colors that people who are color blind are 00:15:46.072 --> 00:15:48.006 sensitive to, 00:15:48.006 --> 00:15:50.042 yellow and blue not so much, 00:15:50.042 --> 00:15:53.089 and rare that you would see black and white color blindness 00:15:53.089 --> 00:15:57.085 but this is sort of an image of what that might be like. 00:15:57.085 --> 00:16:01.004 So you don't want to rely on color only. 00:16:01.004 --> 00:16:05.027 For example these buttons - 00:16:05.027 --> 00:16:08.067 stop and go here - 00:16:08.067 --> 00:16:12.086 you can read it. It's a little hard, but for someone who is color blind, 00:16:12.086 --> 00:16:16.076 that's what it will look like. It just looks like brown on brown, 00:16:16.076 --> 00:16:20.007 and then the text gets lost in the color. 00:16:20.007 --> 00:16:23.086 Contrast is a better way to make something more accessible. 00:16:23.086 --> 00:16:26.001 Whether or not you want to add an image 00:16:26.001 --> 00:16:29.049 make sure that someone is not reliant on the color of the 00:16:29.049 --> 00:16:31.075 information for the information. 00:16:31.075 --> 00:16:36.054 I'm sure you're familiar that facebook is blue. Do you know why? 00:16:36.054 --> 00:16:40.066 Because Mark Zuckerberg is actually color blind, that's why facebook is blue. 00:16:40.066 --> 00:16:48.021 I just read about about that. I thought that was cool. 00:16:48.021 --> 00:16:51.009 In terms of tables I'm not going to go 00:16:51.009 --> 00:16:53.004 into great depth in terms of the code 00:16:53.004 --> 00:16:55.008 but here's a summary about it because 00:16:55.008 --> 00:16:58.056 some tables are more simple, some are more complex. 00:16:58.056 --> 00:17:03.064 Here is a summary just so you have a heads up about this. 00:17:03.064 --> 00:17:05.409 In terms of captions 00:17:05.409 --> 00:17:11.002 to explain what's in the table 00:17:11.002 --> 00:17:14.029 must be there for the header, 00:17:14.029 --> 00:17:18.018 and scope should be included. 00:17:18.018 --> 00:17:24.669 and also CSS has specific rules for the table. 00:17:24.669 --> 00:17:31.073 Tables should only be used for tabular data - 00:17:31.073 --> 00:17:35.075 like a spreadsheet or something that's in a matrix format. 00:17:35.075 --> 00:17:38.003 They shouldn't be be used for layout. 00:17:38.003 --> 00:17:45.015 You should just use css for the layout. 00:17:45.015 --> 00:17:50.024 In the past tables were used much more commonly but now not so much. 00:17:50.024 --> 00:17:55.072 In terms of these tags for the heads, body, footer, 00:17:55.072 --> 00:18:01.011 you can find more of these in google or online in other places. 00:18:01.011 --> 00:18:04.077 Forms. 00:18:04.077 --> 00:18:12.097 It's important to have labels for the input. 00:18:12.097 --> 00:18:19.015 It is also good because the screenreader user is reliant on the keyboard. 00:18:19.015 --> 00:18:22.061 Most of us are relying on the keyboard as well. 00:18:22.061 --> 00:18:25.012 The 'label for' tag 00:18:25.012 --> 00:18:27.076 might only be for 00:18:27.076 --> 00:18:30.013 these small radio buttons. 00:18:30.013 --> 00:18:32.007 If you use 00:18:32.007 --> 00:18:34.051 that means that you can also include 00:18:34.051 --> 00:18:37.064 the entire text. So if you click on the word - 00:18:37.064 --> 00:18:41.035 that also gives you the selection as well. It's great for the keyboard users 00:18:41.035 --> 00:18:47.051 and people using screenreaders. 00:18:47.051 --> 00:18:50.053 If you use groups like radio buttons 00:18:50.053 --> 00:18:52.032 checkbox 00:18:52.032 --> 00:18:56.022 or setting up a field - . 00:18:56.022 --> 00:18:58.043 and , 00:18:58.043 --> 00:19:04.099 those are basic rules for tables. 00:19:04.099 --> 00:19:08.061 Now we're talking about video and audio and as a deaf person this is something 00:19:08.061 --> 00:19:12.169 I've experienced a lot of frustration with - most videos online are not captioned. 00:19:12.169 --> 00:19:16.029 Many video broadcasts are not accessible to deaf people. 00:19:16.029 --> 00:19:18.048 Some people think, well YouTube has 00:19:18.048 --> 00:19:21.039 automatic captions - and I encorage people 00:19:21.039 --> 00:19:27.149 to use YouTube not Vimeo. Vimeo does not support captions at all, 00:19:27.149 --> 00:19:31.059 YouTube has some captioning support. 00:19:31.059 --> 00:19:34.053 I also recommend YouTube because it's very easy to use and it's an easy way 00:19:34.053 --> 00:19:36.009 to add captions, but 00:19:36.009 --> 00:19:38.015 do not reply on the auto-captions 00:19:38.015 --> 00:19:39.669 because they are 00:19:39.669 --> 00:19:41.098 really hard to understand, 00:19:41.098 --> 00:19:44.009 and I'll show you in a moment an example. 00:19:44.009 --> 00:19:49.027 It's important to have good quality captions and transcript - 00:19:49.027 --> 00:19:54.034 not just relying on speech recognition. You could use that perhaps but make sure 00:19:54.034 --> 00:19:56.056 that it's cleaned up. 00:19:56.056 --> 00:19:58.067 Or perhaps hire someone 00:19:58.067 --> 00:20:01.027 who can produce a good quality transcript 00:20:01.027 --> 00:20:05.669 beyond just what an automatic speech to text recognition can do. 00:20:05.669 --> 00:20:11.169 Also if you use radio podcasts 00:20:11.169 --> 00:20:13.098 you can have a good enough transcript for that, 00:20:13.098 --> 00:20:18.059 but make sure that you have the proper style - 00:20:18.059 --> 00:20:26.069 identifying speakers for example; make sure punctuation is correct; 00:20:26.069 --> 00:20:30.809 and if there are any sound effects like laughter or playing music, that that 00:20:30.809 --> 00:20:34.000 information is included as well. Because a deaf person is not going 00:20:34.000 --> 00:20:37.033 to hear those audio cues. 00:20:37.033 --> 00:20:40.006 For videos you should have 00:20:40.006 --> 00:20:43.055 both captions and transcript available. 00:20:43.055 --> 00:20:47.019 The reasoning is because if someone is both deaf and blind 00:20:47.019 --> 00:20:49.084 they're not going to be able to follow the transcripts - 00:20:49.084 --> 00:20:52.051 I mean the captions. 00:20:52.051 --> 00:20:57.026 They might be reliant on a braille display that pops up 00:20:57.026 --> 00:21:02.081 for them to be able to read the transcript as away to access the video. 00:21:02.081 --> 00:21:05.024 Transcripts benefit not only deaf 00:21:05.024 --> 00:21:09.061 people and deaf-blind people, perhaps for an hour long video somebody 00:21:09.061 --> 00:21:13.066 would be able to skim through the transcript a lot faster than watching 00:21:13.066 --> 00:21:15.094 the entire video. 00:21:15.094 --> 00:21:20.014 So it really in general is best to have both the transcript and the captions. 00:21:20.014 --> 00:21:24.044 Sometimes you want to be able to watch and hear the video, and then be able 00:21:24.044 --> 00:21:25.072 to read the captions, 00:21:25.072 --> 00:21:30.045 without first watching the video 00:21:30.045 --> 00:21:36.169 or just read the transcript. 00:21:36.169 --> 00:21:40.027 Just as it's important to have the audio and video in sync, 00:21:40.027 --> 00:21:44.037 it's important the captions be synced as well. 00:21:44.037 --> 00:21:47.159 In terms of webinars 00:21:47.159 --> 00:21:51.092 it's important to hire someone who's a professional transcriptionist, 00:21:51.092 --> 00:21:53.078 somebody who is professionally trained for that, 00:21:53.078 --> 00:21:57.062 so that they have 98% accuracy 00:21:57.062 --> 00:22:02.028 with 220 words per minute. 00:22:02.028 --> 00:22:08.006 That's the required speed and not everyone can do that. 00:22:08.006 --> 00:22:15.076 So if you want to have a video pick a player that supports captions, 00:22:15.076 --> 00:22:20.065 and if you want a transcript that may be too much for you to do yourself - 00:22:20.065 --> 00:22:24.022 this is a popular service CastingWords - 00:22:24.022 --> 00:22:28.021 and you can use that for podcasts and 00:22:28.021 --> 00:22:30.064 also YouTube videos. 00:22:30.064 --> 00:22:32.071 If there's a time stamp, 00:22:32.071 --> 00:22:35.036 you can then upload it to YouTube, 00:22:35.036 --> 00:22:39.096 and they have a way that you can sync ticket options with the video. 00:22:39.096 --> 00:22:43.019 I have more information on my own website. 00:22:43.019 --> 00:22:46.149 Usually I'll give a one hour presentation on this kind of information 00:22:46.149 --> 00:22:49.045 so I'm only touching on points here. 00:22:49.045 --> 00:22:57.099 I want to show you why automatic captions are not reliable. 00:22:57.099 --> 00:23:51.055 There's no sound on purpose, just for you to watch it. 00:23:51.055 --> 00:23:54.063 So I've actually listened with a person 00:23:54.063 --> 00:23:58.075 who could hear whether the captions matched, 00:23:58.075 --> 00:24:01.069 and they said that it didn't. 00:24:01.069 --> 00:24:04.083 The speech recognition is just relying on a machine. 00:24:04.083 --> 00:24:09.007 It's good that it does something, 00:24:09.007 --> 00:24:13.026 but it's hard to rely on the auto-captions. 00:24:13.026 --> 00:24:16.369 Most people think that it's no big deal, 00:24:16.369 --> 00:24:17.088 we can just use that, but they do really 00:24:17.088 --> 00:24:27.067 need to be cleaned up by a person. 00:24:27.067 --> 00:24:29.919 So here's some general information. 00:24:29.919 --> 00:24:34.001 WebAIM is a great resource 00:24:34.001 --> 00:24:36.089 for making your websites accessible, 00:24:36.089 --> 00:24:40.919 and very clearly presented, the information there. 00:24:40.919 --> 00:24:43.409 If you'd like to have an evaluation tool 00:24:43.409 --> 00:24:47.054 this is a very popular site - WAVE - 00:24:47.054 --> 00:24:51.023 developed by the WerbAIM team. 00:24:51.023 --> 00:24:55.028 I do have that on my computer and it's very helpful. 00:24:55.028 --> 00:24:57.025 It's not 100% reliable or accurate. 00:24:57.025 --> 00:25:02.016 Sometimes it might miss certain elements of the site. 00:25:02.016 --> 00:25:05.084 Firefox also has accessibility extensions, 00:25:05.084 --> 00:25:09.068 and the WAI has a lot of different tools here. 00:25:09.068 --> 00:25:12.919 Captioning, if you're more curious about that, 00:25:12.919 --> 00:25:15.011 I do have a website here with 00:25:15.011 --> 00:25:27.044 a lot of information and my contact information is there as well. 00:25:27.044 --> 00:25:32.084 If anyone has any questions? 00:25:32.084 --> 00:25:38.539 (Audience Member) Are there any WordPress templates 00:25:38.539 --> 00:25:47.038 and/or plugins that you recommend as being very accessible? 00:25:47.038 --> 00:25:53.015 (Sveta voiced by an interpreter) I'd have to google it in terms of accessibility and WordPress.. 00:25:53.015 --> 00:25:54.051 (Audience Member) Anything that you've used or come across 00:25:54.051 --> 00:25:57.082 that you're really comfortable with? 00:25:57.082 --> 00:26:00.072 (Sveta voiced by an interpreter) I've just started using WordPress 00:26:00.072 --> 00:26:08.022 earlier this year so i'm not as familiar. 00:26:08.022 --> 00:26:10.003 (Audience Member) What websites are potentially liable to being sued 00:26:10.003 --> 00:26:17.062 for not being accessible, and for what period? 00:26:17.062 --> 00:26:25.549 (Sveta voiced by an interpreter) There are so many. 00:26:25.549 --> 00:26:29.019 Well, ninety seven percent of web sites are not accesible, 00:26:29.019 --> 00:26:34.051 for example, Netflix. 00:26:34.051 --> 00:26:38.004 The deaf community's actually suing, in process with a lawsuit right now with Netflix 00:26:38.004 --> 00:26:41.023 because they refused to caption 00:26:41.023 --> 00:26:46.049 their streaming videos. Their dvds have captions, but they don't have streaming captions. 00:26:46.049 --> 00:26:50.022 CNN is also involved in a lawsuit right now, 00:26:50.022 --> 00:26:54.006 they have captions on television but they don't have captions on their web content. 00:26:54.006 --> 00:26:59.679 I know that blind people, they sued Target. There was a blind community 00:26:59.679 --> 00:27:02.036 involved in a lawsuit against the Target website. 00:27:02.036 --> 00:27:07.021 (Audience Member) So there's some examples, and like I say it's a better investment 00:27:07.021 --> 00:27:12.006 to make their website accessible than be liable and possibly be spending money 00:27:12.006 --> 00:27:22.073 on a lawsuit later. Are there any ways of tracking, 00:27:22.073 --> 00:27:25.019 using Google analytics, to see how many access-challenged users are coming to your site 00:27:25.019 --> 00:27:42.099 so you can say to a client, you need to address this? 00:27:42.099 --> 00:27:45.012 (Sveta voiced by an interpreter) I don't think there's any way 00:27:45.012 --> 00:27:49.033 to track using Google analytics. I think user testing is the only way 00:27:49.033 --> 00:27:51.017 to really track accessibility, 00:27:51.017 --> 00:27:53.085 and these accessibility valuation tools. 00:27:53.085 --> 00:27:58.039 (Audience Member) Aren't there separate browsers 00:27:58.039 --> 00:28:06.082 that can be used by accessibility... 00:28:06.082 --> 00:28:07.094 (Sveta voiced by an interpreter) What do you mean? 00:28:07.094 --> 00:28:10.013 (Audience Member) Uh... for the speech, 00:28:10.013 --> 00:28:13.073 it can read through.. 00:28:13.073 --> 00:28:14.096 There are certain browsers that can.. 00:28:14.096 --> 00:28:33.098 that, if you need it read to you, 0:28:18.430,0:28:25.430 you can..use that browser,but I'm not sure if it's capturable in analytics. 00:28:33.098 --> 00:28:36.089 (Sveta voiced by an interpreter) No, not that I'm aware. 00:28:36.089 --> 00:28:41.062 It's the same concept as if you design a regular website, 00:28:41.062 --> 00:28:47.062 and your user experience is not just about the people who are disabled but 00:28:47.062 --> 00:28:51.087 you might try to have some user testing to see whether or not 00:28:51.087 --> 00:28:53.073 the website conforms to the expectations 00:28:53.073 --> 00:28:57.002 of a certain user group that's very similar 00:28:57.002 --> 00:28:59.005 to people who are disabled. 00:28:59.005 --> 00:29:02.309 The only really way to find out is the survey people with 00:29:02.309 --> 00:29:10.036 disabilities and get their feedback. 00:29:10.036 --> 00:29:16.026 (Audience Member) That's one of the questions I am asking about developers asking the disabled community 00:29:16.026 --> 00:29:20.098 how to do certain things. I mean, I am beginning to lose my vision, 00:29:20.098 --> 00:29:27.018 and I've found it's very difficult to get somebody to say, 00:29:27.018 --> 00:29:30.056 well, it's very easy 00:29:30.056 --> 00:29:39.073 to do this because I see other technology 00:29:39.073 --> 00:29:44.037 being used broadly and maybe the inference about ramps, 00:29:44.037 --> 00:29:45.909 well everybody uses ramps and it's part of the culture 00:29:45.909 --> 00:29:57.014 not just about accessibility and those who need it and it's really for everybody. 00:29:57.014 --> 00:30:04.007 (Sveta voiced by an interpreter) I'm sorry. Is that a comment or a question? 00:30:04.007 --> 00:30:05.072 (Audience Member) The question is ... 00:30:05.072 --> 00:30:07.036 How do you get people's minds 00:30:07.036 --> 00:30:09.063 wrapped around that you should be developing for everybody all the time, 00:30:09.063 --> 00:30:11.047 rather than to step back and say I'm going to do this site for blind people, 00:30:11.047 --> 00:30:22.047 I'm going to do this site for deaf people. It's just that why shouldn't you just 00:30:22.047 --> 00:30:32.047 include all these accessibility tools as part of your regular development? 00:30:32.047 --> 00:30:35.005 (Sveta voiced by an interpreter) Well, because people aren't aware 00:30:35.005 --> 00:30:39.066 unless they have had that explicitly explained to them 00:30:39.066 --> 00:30:44.042 as it a deaf person I might say well I need captions, but I might be perceived 00:30:44.042 --> 00:30:46.047 as being just one deaf person asking for that. 00:30:46.047 --> 00:30:49.093 People don't realize that captions benefit speakers of other languages. 00:30:49.093 --> 00:30:52.025 My parents have perfect hearing 00:30:52.025 --> 00:30:55.006 but their first language is Russian, not English, 00:30:55.006 --> 00:30:58.001 and they watch television with the captions on, 00:30:58.001 --> 00:31:01.059 because it helps them understand and learn English better, 00:31:01.059 --> 00:31:04.004 The disability market is huge 00:31:04.004 --> 00:31:07.049 and so they shouldn't be overlooked. 00:31:07.049 --> 00:31:11.068 People who are becoming older, you'll notice the baby boomers 00:31:11.068 --> 00:31:15.006 are now a very large segment of the population and and more and more of them 00:31:15.006 --> 00:31:18.005 are developing disabilities as they age. 00:31:18.005 --> 00:31:20.049 So I mean it's not easy, 00:31:20.049 --> 00:31:25.033 I can overload people with statistics. People who care tend to really 00:31:25.033 --> 00:31:28.011 make the investment, and others 00:31:28.011 --> 00:31:32.011 don't, they won't. 00:31:32.011 --> 00:31:34.007 Do you want to do responsive, 00:31:34.007 --> 00:31:38.009 type of reactive design, or be like people who want to 00:31:38.009 --> 00:31:41.006 develop based on user experience? Those are two different 00:31:41.006 --> 00:31:44.259 approaches that people can take. 00:31:44.259 --> 00:31:49.023 (Audience Member) No. I am just making, I guess, the comment that the very fact that you are here 00:31:49.023 --> 00:32:02.072 raises the fact that a lot of people in this room probably never even thought about - 00:32:02.072 --> 00:32:09.072 I mean that may be just an assumption on my part, but - I think this is just a way of raising 00:32:09.072 --> 00:32:13.028 the awareness for the rest of the community. 00:32:13.028 --> 00:32:16.061 (Sveta voiced by an interpreter) Yes, right. And, for me, I'm a sighted person 00:32:16.061 --> 00:32:21.049 but sometimes, if a page is slow to load, 00:32:21.049 --> 00:32:25.559 I still like to have the description of the image 00:32:25.559 --> 00:32:28.199 because I might shut off images 00:32:28.199 --> 00:32:31.769 and still want to to be able to see what it is to make it 00:32:31.769 --> 00:32:36.429 load the page faster. 0:32:33.270,0:32:36.429 Just having "something dot jpg" 00:32:36.429 --> 00:32:41.779 isn't necessarily going to be very helpful. 00:32:41.779 --> 00:32:45.038 It helps the searchability 00:32:45.038 --> 00:32:49.049 as well if those tags are there in the descriptions. Even though I am not 00:32:49.049 --> 00:32:52.169 blind I benefit 00:32:52.169 --> 00:32:55.033 from accessibility for blind users. 00:32:55.033 --> 00:32:58.074 And even with captions, people think well they don't need that, 00:32:58.074 --> 00:33:03.001 and then later on when they use them, they'll realize how they 00:33:03.001 --> 00:33:08.068 appreciate it and they wish they had used them earlier. 00:33:08.068 --> 00:33:12.019 I think there was some in the back with a question? 00:33:12.019 --> 00:33:19.019 (Audience Member) I was just wanting to respond to something that the gentleman up there said earlier 00:33:19.019 --> 00:33:22.051 about why include it in everything that you do as kind of a default thing. 00:33:22.051 --> 00:33:37.021 Well why do we include mobile versions and responsive versions of sites 0:33:25.770,0:33:28.210 by default? I think it should be treated the same way. I'm not arguing with you. (laughter) 00:33:37.021 --> 00:33:37.093 (Sveta voiced by an interpreter) That's a good point. Yes. 00:33:37.093 --> 00:33:43.002 (Audience Member) Could you speak more about 0:33:40.419,0:33:43.200 responsive design? 00:33:43.002 --> 00:33:45.014 Are you saying that responsive has 00:33:45.014 --> 00:33:53.093 a better capability for the disabled? 00:33:53.093 --> 00:33:56.919 (Sveta voiced by an interpreter) Well, not exactly. It can overlap, 00:33:56.919 --> 00:34:00.023 but not exactly. 00:34:00.023 --> 00:34:05.022 Because if you use mobile phones 00:34:05.022 --> 00:34:09.119 but the code is not compatible 00:34:09.119 --> 00:34:13.559 for a mobile phone, I'm not sure how exactly people with limited vision 00:34:13.559 --> 00:34:16.529 even use the mobile phone. That's still new for me but that's another example 00:34:16.529 --> 00:34:19.091 in terms of having the code be compatible for 00:34:19.091 --> 00:34:26.119 what shows up on a mobile phone. 00:34:26.119 --> 00:34:30.379 I know how people with disabilities use an actual standard computer. I'm not as 00:34:30.379 --> 00:34:48.439 familiar with people with disabilities using mobile devices. 00:34:48.439 --> 00:34:51.439 (Audience Member) This is more in reference to how do we make accessibility 00:34:51.439 --> 00:34:55.439 more standard. I think we are at a good time now with html 5, 00:34:55.439 --> 00:34:57.439 css 3, and all these new additions. They are still in the works of 00:34:57.439 --> 00:35:01.439 being the global rule of the land, compared to how html was very much 00:35:01.439 --> 00:35:04.439 do it until it looks right kind of thing, so right now, if we do push for it 00:35:04.439 --> 00:35:16.599 in as many places as we can I think it will potentially be more.. 00:35:16.599 --> 00:35:18.329 (Sveta voiced by an interpreter) Correct, but that isn't enough. 00:35:18.329 --> 00:35:21.559 We need to remember also about color - 00:35:21.559 --> 00:35:23.719 it's not just about coding, 00:35:23.719 --> 00:35:26.779 it's also about the design, and the visual aspects 00:35:26.779 --> 00:35:31.069 of the website as well. 00:35:31.069 --> 00:35:36.889 (Audience Member) That's a good point, thanks. 00:35:36.889 --> 00:35:40.019 (Audience Member) Are there tools? As a designer and front end developer, 00:35:40.019 --> 00:35:42.019 I'm always using tools like browser stats and from other devices because you can't 00:35:42.019 --> 00:35:44.019 possibly have all the devices.. and this is something I need 00:35:44.019 --> 00:35:47.019 to consider that there's even more devices that I'm designing for 00:35:47.019 --> 00:35:50.019 that we're not even looking at. So I'm wondering if there are tools 00:35:50.019 --> 00:35:55.019 that as developers we can access to get an experience of what 00:35:55.019 --> 00:36:08.259 a disabled person may be seeing. 00:36:08.259 --> 00:36:13.789 (Sveta voiced by an interpreter) Yes. You can download the free tools. 00:36:13.789 --> 00:36:18.319 I think if you have a Mac, 00:36:18.319 --> 00:36:22.269 Mac has screen reader software already built in. I just found this out. 00:36:22.269 --> 00:36:28.469 There is captioning support too which i was really amazed at. I'm curious 00:36:28.469 --> 00:36:32.799 as to what the screenreader with captioning is going to look like. 00:36:32.799 --> 00:36:37.339 The Mac screenreader also has captions, 00:36:37.339 --> 00:36:41.449 that's telling me what it says. It's really cool. So if you have a Mac 00:36:41.449 --> 00:36:45.069 you use the VoiceOver 00:36:45.069 --> 00:36:49.053 that's the Mac feature 00:36:49.053 --> 00:36:51.499 you can select as an option. 00:36:51.499 --> 00:36:55.229 I think in windows, I'm not sure what it's called because i don't use windows 00:36:55.229 --> 00:36:57.569 there might be something that's 00:36:57.569 --> 00:36:59.079 parallel that does 00:36:59.079 --> 00:37:06.049 the same thing for windows. 00:37:06.049 --> 00:37:13.049 (Audience Member) Can I just comment, add to that? 00:37:13.049 --> 00:37:15.289 Because I do use windows, can I just follow up, is that ok? 00:37:15.289 --> 00:37:16.829 (Sveta voiced by an interpreter) Sure, go ahead. 00:37:16.829 --> 00:37:19.829 (Audience Member) OK. On windows there are a couple of speech 00:37:19.829 --> 00:37:21.829 detects software. One is called Natural Reader, that will read the text on a page, 00:37:21.829 --> 00:37:25.599 detects software. One is called Natural Reader, that will read the text on a page, 00:37:25.599 --> 00:37:28.379 and also turn it into a wav file, so that you can automatically... 00:37:28.379 --> 00:37:37.169 So, it will read through the copy you've written, turn it into a wav file, and 00:37:37.169 --> 00:37:42.044 you can repost it on the site. So you've automatically turned it into something for 00:37:42.044 --> 00:37:50.599 people who can't see but would like to hear what you've just written. 00:37:50.599 --> 00:37:52.569 (Sveta voiced by an interpreter) Thank you for saying, that. 00:37:52.569 --> 99:59:59.999 OK, I think that's it (Applause)