WEBVTT 1 00:00:00.106 --> 00:00:03.396 >> So, this is the first of what we'd 2 00:00:03.396 --> 00:00:07.746 like to call a three-part series on EIT Accessibility. 3 00:00:07.746 --> 00:00:12.186 Today, we're going to talk about visual design and colors, 4 00:00:12.186 --> 00:00:16.506 and this can be in documents, online, different types 5 00:00:16.506 --> 00:00:18.666 of things that you might create. 6 00:00:18.896 --> 00:00:21.546 Next -- the next one that we're going to look 7 00:00:21.546 --> 00:00:25.416 at is going be accessibility with Word documents, 8 00:00:25.526 --> 00:00:29.226 and then we'll finish up the series with some accessibility 9 00:00:29.226 --> 00:00:30.646 with PowerPoint techniques. 10 00:00:30.646 --> 00:00:35.976 So today we're going to talk about visual design and colors. 11 00:00:39.346 --> 00:00:41.386 Okay. So, we're going to focus 12 00:00:41.576 --> 00:00:45.146 on visual accessibility techniques for people, 13 00:00:45.146 --> 00:00:47.356 mostly for people who can see. 14 00:00:47.356 --> 00:00:49.326 We are going to talk a little bit about some things 15 00:00:49.326 --> 00:00:53.716 for individuals that are blind and can't see a screen at all. 16 00:00:53.716 --> 00:00:56.426 But a lot of these techniques are going to be for people 17 00:00:56.426 --> 00:00:59.096 who can see, but may not have perfect acuity. 18 00:00:59.096 --> 00:01:02.156 They may struggle with color perception. 19 00:01:02.216 --> 00:01:05.036 They may process visual signals in ways 20 00:01:05.036 --> 00:01:07.876 that make things difficult to distinguish 21 00:01:07.876 --> 00:01:11.366 or have difficulty understanding because of colorblindness 22 00:01:11.366 --> 00:01:13.806 or low vision or even a reading disability. 23 00:01:14.196 --> 00:01:18.886 So we're going to break it down into different areas. 24 00:01:18.886 --> 00:01:22.236 We're going to talk about color, contrast, 25 00:01:22.656 --> 00:01:25.056 visual layout, and typography. 26 00:01:25.426 --> 00:01:28.546 And I'll explain each of those as I go along. 27 00:01:28.906 --> 00:01:35.606 So color. A lot of times we'll see that presentations, 28 00:01:35.996 --> 00:01:39.986 documents, different types of things, you might even see it 29 00:01:39.986 --> 00:01:45.066 in a textbook, use color to help to convey information. 30 00:01:45.126 --> 00:01:47.936 But color alone should not be the only way 31 00:01:47.936 --> 00:01:49.356 that information is conveyed. 32 00:01:49.356 --> 00:01:54.656 It should also not be the only way that we distinguish links 33 00:01:54.656 --> 00:01:56.006 from surrounding text. 34 00:01:56.006 --> 00:01:58.276 So, if you have a link inside of a text, 35 00:01:58.386 --> 00:02:00.696 color by itself should not be the only way 36 00:02:00.696 --> 00:02:03.566 that you would be able to distinguish that. 37 00:02:03.566 --> 00:02:07.796 Any information that we convey with color must be accompanied 38 00:02:07.796 --> 00:02:09.786 by some type of text alternative. 39 00:02:09.786 --> 00:02:13.186 So we'll talk a little bit about what that means. 40 00:02:13.306 --> 00:02:15.826 And if you do have a text alternative, 41 00:02:15.826 --> 00:02:20.306 so text that's explaining what you're showing, let's say, 42 00:02:20.306 --> 00:02:23.076 for example, in this wheel here, if it was like a graph, 43 00:02:23.076 --> 00:02:28.136 that text alternative must accurately convey the same 44 00:02:28.136 --> 00:02:31.466 information that -- without the color. 45 00:02:31.676 --> 00:02:33.946 So it needs to be -- 46 00:02:34.946 --> 00:02:37.496 mimic whatever you're showing in the color. 47 00:02:38.256 --> 00:02:41.986 Keep in mind that all white backgrounds can be difficult 48 00:02:41.986 --> 00:02:43.556 for some people to view. 49 00:02:43.816 --> 00:02:48.006 And it's helpful when you are using color to create things 50 00:02:48.006 --> 00:02:49.346 that it's customizable. 51 00:02:49.346 --> 00:02:53.676 So, someone, if they feel like they need to change the color 52 00:02:53.676 --> 00:02:56.036 or the contrast, or make something darker or lighter, 53 00:02:56.036 --> 00:02:58.446 that they can do that to assist them. 54 00:02:59.366 --> 00:03:03.806 So those are some kind of quick points about using color. 55 00:03:03.806 --> 00:03:06.126 It's not that you can't use it, but you have to be mindful 56 00:03:06.126 --> 00:03:06.976 of some of these other pieces. 57 00:03:10.046 --> 00:03:14.336 So, if color is the only means used to convey information, 58 00:03:14.696 --> 00:03:18.976 people who are color blind or are low vision even individuals 59 00:03:18.976 --> 00:03:21.126 who are blind will be unable to take advantage 60 00:03:21.126 --> 00:03:23.226 or make sense of that information. 61 00:03:23.226 --> 00:03:26.786 So again, as I mentioned a little bit, just a minute ago, 62 00:03:26.786 --> 00:03:30.496 colored tables, pie charts, they need to have visual labels 63 00:03:30.496 --> 00:03:33.926 to correspond to visual data. 64 00:03:34.316 --> 00:03:37.536 And again, color alone must not be used to distinguish links 65 00:03:37.536 --> 00:03:39.406 from surrounding text. 66 00:03:39.406 --> 00:03:42.006 And I have some samples from Deque U, which is going 67 00:03:42.006 --> 00:03:44.116 to be really helpful to take a look at. 68 00:03:44.116 --> 00:03:46.216 So, we'll look at those in a moment, 69 00:03:46.286 --> 00:03:47.786 and you can refer to those. 70 00:03:49.236 --> 00:03:52.476 So, text is the foundation upon 71 00:03:52.476 --> 00:03:56.596 which all other accessible content is built 72 00:03:56.796 --> 00:03:59.766 and everything must exist in a text format, 73 00:04:00.646 --> 00:04:04.466 either as normal text or what we call alt text. 74 00:04:04.466 --> 00:04:06.206 And again, these are some things that we're, 75 00:04:06.206 --> 00:04:08.296 as an OER, are learning about. 76 00:04:08.296 --> 00:04:10.906 We're going to talk more about in the future talk -- 77 00:04:10.906 --> 00:04:13.586 especially the alt text in the future. 78 00:04:13.586 --> 00:04:18.976 But if information is not in a text format, a screen reader, 79 00:04:18.976 --> 00:04:22.756 which is a tool that will read everything on a screen. 80 00:04:22.756 --> 00:04:26.026 So, if you're blind and you can't see the screen at all, 81 00:04:26.446 --> 00:04:29.526 you would use a screen reader and it would read out loud 82 00:04:29.526 --> 00:04:31.556 to you what is on that screen. 83 00:04:31.766 --> 00:04:33.506 And if it's not in text format, 84 00:04:33.676 --> 00:04:36.586 the screen reader won't be able to read it. 85 00:04:36.876 --> 00:04:39.736 And again, if you're color coding anything on a page 86 00:04:39.736 --> 00:04:40.846 or a webpage, you'll need 87 00:04:40.846 --> 00:04:45.096 to convey the meaning behind the colors in a text format. 88 00:04:45.096 --> 00:04:48.806 So you could hover over it or arrow to it 89 00:04:48.806 --> 00:04:53.306 and it will give you the text from that page. 90 00:04:53.476 --> 00:04:55.036 Any questions so far? 91 00:04:55.036 --> 00:04:55.976 If you do, throw them in the chat. 92 00:04:58.406 --> 00:05:02.666 Okay. So let's look at some examples from Deque. 93 00:05:02.666 --> 00:05:05.746 It's always helpful to have something that you can look at 94 00:05:05.746 --> 00:05:07.396 and say, okay, that makes more sense 95 00:05:07.396 --> 00:05:09.836 than just what I'm talking about. 96 00:05:09.836 --> 00:05:14.836 We're going to look at color that conveys meaning. 97 00:05:14.836 --> 00:05:19.646 So again, I'm going to have go to -- Yay, it's right here. 98 00:05:19.646 --> 00:05:20.836 We practice this. 99 00:05:20.836 --> 00:05:27.916 And it a little tricky when you go from page to page 100 00:05:27.916 --> 00:05:28.866 so I'm happy that was -- 101 00:05:28.866 --> 00:05:33.116 So again, as I've said a few times now, 102 00:05:33.116 --> 00:05:36.036 any information conveyed by color must be accompanied 103 00:05:36.036 --> 00:05:39.306 by a programmatically determinable text alternative. 104 00:05:39.306 --> 00:05:40.616 And I'm going to show you what that means. 105 00:05:40.616 --> 00:05:42.966 We're not going to go through all the narrative that's 106 00:05:42.966 --> 00:05:46.566 on this page, but I will mention that the -- 107 00:05:46.566 --> 00:05:48.956 these examples that I'm going to show you are 108 00:05:48.956 --> 00:05:53.296 from Deque University and it's a website that will be 109 00:05:53.626 --> 00:05:54.876 at the end of this PowerPoint. 110 00:05:54.876 --> 00:05:58.126 We've sent out links about it in the past, 111 00:05:58.126 --> 00:06:01.576 but it may not have been something you've been interested 112 00:06:01.576 --> 00:06:03.066 in looking at until now. 113 00:06:03.066 --> 00:06:06.416 So that's where we're getting our information and we'll talk 114 00:06:06.416 --> 00:06:08.506 about a resource at the end that comes from Deque 115 00:06:08.506 --> 00:06:11.426 that gives you some tips. 116 00:06:11.426 --> 00:06:14.536 So here -- let's take a look at a bad example. 117 00:06:14.536 --> 00:06:16.756 And that's what they call it, good example, bad example. 118 00:06:16.756 --> 00:06:18.696 It makes it easy. 119 00:06:18.696 --> 00:06:24.176 So here's a bad example of a colored data table 120 00:06:24.176 --> 00:06:26.626 that does not have text labels. 121 00:06:26.686 --> 00:06:33.626 And as you take a quick look at that, it seems like -- 122 00:06:33.626 --> 00:06:34.906 okay, some people might say, well, 123 00:06:34.906 --> 00:06:36.836 that's pretty straightforward. 124 00:06:36.836 --> 00:06:38.826 Red says advanced, yellow is intermediate, 125 00:06:38.826 --> 00:06:40.696 and green is beginner, right? 126 00:06:40.806 --> 00:06:43.916 But if you -- and if you're a sighted user 127 00:06:43.916 --> 00:06:47.256 and you're not colorblind and you don't struggle 128 00:06:47.256 --> 00:06:49.766 with any visual type of impairments, 129 00:06:49.766 --> 00:06:52.156 this may make perfect sense. 130 00:06:52.566 --> 00:06:54.776 But if you are colorblind, 131 00:06:55.136 --> 00:06:57.706 you may have difficulty differentiating between the red 132 00:06:57.706 --> 00:06:59.946 and green and it may all look the same. 133 00:06:59.946 --> 00:07:04.096 So, this key at the bottom is not going to be helpful for you. 134 00:07:04.096 --> 00:07:06.806 But it's an easy fix. 135 00:07:06.806 --> 00:07:08.696 And I'll show you what that fix is. 136 00:07:08.696 --> 00:07:11.646 If you add text labels, same chart, 137 00:07:11.646 --> 00:07:13.286 you can still use the colors, 138 00:07:13.436 --> 00:07:17.196 but now you are using the text label. 139 00:07:17.196 --> 00:07:19.296 So, you really don't need that key. 140 00:07:19.296 --> 00:07:24.576 You can have the color to make it interesting, 141 00:07:24.576 --> 00:07:27.716 but now you have the words that are going 142 00:07:28.166 --> 00:07:30.846 to help the person that's viewing this to be able 143 00:07:30.846 --> 00:07:33.406 to make sense of it, makes a lot more sense. 144 00:07:33.786 --> 00:07:36.306 So that's one example. 145 00:07:36.966 --> 00:07:38.246 And it talks -- you know, 146 00:07:38.246 --> 00:07:45.706 it gives you a little bit more information about that, here. 147 00:07:45.916 --> 00:07:48.316 And here's another example. 148 00:07:48.316 --> 00:07:50.196 So, we've all filled out -- 149 00:07:50.196 --> 00:07:54.516 So this is an example of when distinguishing links 150 00:07:54.516 --> 00:07:58.586 from other texts, this happens to be a highlighted form field. 151 00:07:58.586 --> 00:08:00.426 So we've all filled things out online. 152 00:08:00.426 --> 00:08:02.226 We think we're ready to go, go to hit submit, 153 00:08:02.226 --> 00:08:04.936 and it's like, oh, you're not done. 154 00:08:04.936 --> 00:08:05.546 You -- What did I miss? 155 00:08:05.716 --> 00:08:08.046 You scroll up. 156 00:08:08.046 --> 00:08:11.596 So, in this case, a sighted user is going to easily be able 157 00:08:11.596 --> 00:08:15.186 to see that highlighted field and the red text, 158 00:08:15.266 --> 00:08:18.526 but blind users will not. 159 00:08:18.526 --> 00:08:23.326 So, this is not a good way to create a form, 160 00:08:23.356 --> 00:08:28.736 just by having it highlighted down below where it says email. 161 00:08:31.606 --> 00:08:33.816 Here is a good example. 162 00:08:34.126 --> 00:08:38.246 You can still have it highlighted, but here it'll say, 163 00:08:38.246 --> 00:08:40.086 oops, and it'll give you the specific info. 164 00:08:40.086 --> 00:08:42.016 Please enter your email. 165 00:08:42.016 --> 00:08:43.776 And then you would scroll down 166 00:08:43.776 --> 00:08:47.006 and it would read, enter your email. 167 00:08:47.046 --> 00:08:48.566 And there -- Like this says at the top, 168 00:08:48.566 --> 00:08:52.316 it removes any ambiguities and makes it clear to blind users 169 00:08:52.316 --> 00:08:53.976 which field they must fill in. 170 00:08:57.046 --> 00:08:58.756 Here is another example. 171 00:08:58.756 --> 00:09:03.096 This one, we're going to talk about that text alternative. 172 00:09:03.216 --> 00:09:08.026 So here is some -- That's to convey information. 173 00:09:08.026 --> 00:09:11.106 So here is some color-coded information that's not 174 00:09:11.106 --> 00:09:15.976 communicated through alternate text or what we call alt text. 175 00:09:16.016 --> 00:09:19.016 So there's not a lot of information here. 176 00:09:19.366 --> 00:09:23.186 The alt text that's below that -- this is a descriptor. 177 00:09:23.186 --> 00:09:25.606 Don't worry about figuring out how to create these. 178 00:09:25.606 --> 00:09:29.426 We'll talk about those probably multiple times in the future. 179 00:09:29.426 --> 00:09:33.446 But there's not a lot of information. 180 00:09:33.816 --> 00:09:35.626 Sales units in the first six months 181 00:09:35.626 --> 00:09:39.236 of 2016, what does that mean? 182 00:09:39.306 --> 00:09:40.876 But if you scroll down, 183 00:09:40.876 --> 00:09:45.276 a good example is providing a lot more information. 184 00:09:45.306 --> 00:09:50.066 So, if you're going to create a chart, we can certainly help. 185 00:09:50.156 --> 00:09:53.396 This is one way to kind of think about it though. 186 00:09:53.396 --> 00:09:56.606 A text alternative is going to tell you everything 187 00:09:56.606 --> 00:09:59.596 that you're seeing on here, how many sales. 188 00:09:59.666 --> 00:10:03.896 It breaks it down from month to month for that year. 189 00:10:03.896 --> 00:10:06.296 And it makes it a lot clear and easier to read. 190 00:10:07.576 --> 00:10:14.966 Okay. And this is another quick example, a legend. 191 00:10:14.966 --> 00:10:17.796 This means nothing to someone 192 00:10:17.796 --> 00:10:20.516 who has difficulty differentiating colors. 193 00:10:20.546 --> 00:10:24.166 The labels are -- you know, it's just -- it's clunky. 194 00:10:24.166 --> 00:10:27.176 It's not going to help those -- even individuals -- 195 00:10:27.176 --> 00:10:29.426 Like for me, I have some issue. 196 00:10:29.426 --> 00:10:31.296 This is moving for me. 197 00:10:31.296 --> 00:10:33.846 It's a lot to look at and to navigate 198 00:10:33.846 --> 00:10:36.526 that strip of months here. 199 00:10:36.526 --> 00:10:39.776 But if you scroll down, this makes it a lot easier. 200 00:10:40.056 --> 00:10:42.486 And it makes it accessible 201 00:10:42.486 --> 00:10:45.266 for individuals using a screen reader. 202 00:10:46.626 --> 00:10:53.796 Okay. So I am going to go back to the PowerPoint. 203 00:10:53.796 --> 00:10:57.116 And I got to remember to share the screen. 204 00:10:57.576 --> 00:11:03.876 Okay. So color to distinguish links from text. 205 00:11:03.956 --> 00:11:07.586 We often see documents or websites 206 00:11:07.586 --> 00:11:10.596 that have a link that is included. 207 00:11:10.756 --> 00:11:14.356 So -- Or you might get something that's a PDF sent to you 208 00:11:14.356 --> 00:11:15.806 and the link is there. 209 00:11:15.806 --> 00:11:20.946 And sighted -- even if a sighted user cannot tell the difference, 210 00:11:20.946 --> 00:11:26.006 they're not going to know what items are clickable. 211 00:11:26.006 --> 00:11:30.516 And so they may need -- they may miss important links. 212 00:11:30.516 --> 00:11:32.646 And this talk about default styling, 213 00:11:32.646 --> 00:11:35.106 we're going to talk a little bit more again in the future, 214 00:11:35.106 --> 00:11:39.456 but you don't have to change the default styling 215 00:11:39.456 --> 00:11:42.646 to meet accessibility best practices, but you do need 216 00:11:42.646 --> 00:11:45.406 to make sure that you're using -- 217 00:11:45.406 --> 00:11:49.776 that someone who struggles with color or sight 218 00:11:49.896 --> 00:11:52.246 that is low vision is -- 219 00:11:52.736 --> 00:11:57.646 there has to be some way to distinguish the link from text. 220 00:11:57.646 --> 00:12:01.496 And -- Oops, this is going to get a little bit wordy. 221 00:12:01.496 --> 00:12:04.066 And again, this is an overview, so I don't want you to feel 222 00:12:04.066 --> 00:12:07.296 like you have to start doing math to figure it out. 223 00:12:07.296 --> 00:12:11.366 I know we have some math faculty on the Zoom, but -- 224 00:12:12.426 --> 00:12:14.306 So really what this is saying 225 00:12:14.306 --> 00:12:16.466 that color alone must not be used 226 00:12:16.466 --> 00:12:20.246 to distinguish links unless there's a color contrast ratio, 227 00:12:20.866 --> 00:12:22.056 so they say 3:1. 228 00:12:22.056 --> 00:12:23.516 I'll show you some examples, 229 00:12:24.016 --> 00:12:26.946 or there's another way to differentiate. 230 00:12:27.086 --> 00:12:29.306 So, you can keep that color contrast, 231 00:12:29.306 --> 00:12:33.126 but instead you put an underline or an outline so that 232 00:12:33.126 --> 00:12:38.336 if you are hovering over that link, you'll be able to -- 233 00:12:38.486 --> 00:12:40.586 the screen reader will be able 234 00:12:40.586 --> 00:12:42.956 to differentiate that this is a link. 235 00:12:42.956 --> 00:12:47.296 It's hovered over, and that's how you'll know to click on it. 236 00:12:47.546 --> 00:12:51.326 So, anyone who is sighted, sighted users must be able 237 00:12:51.326 --> 00:12:52.896 to tell the difference between -- 238 00:12:52.896 --> 00:12:56.996 visually between links and text to know what's clickable. 239 00:12:56.996 --> 00:13:02.466 This is another way that people can struggle with missing links. 240 00:13:02.466 --> 00:13:07.926 We don't want to have individuals miss those links. 241 00:13:08.036 --> 00:13:09.886 And there's a few common ways. 242 00:13:10.016 --> 00:13:12.146 These are, again, just sort of talking 243 00:13:12.146 --> 00:13:13.356 about what I just mentioned, 244 00:13:13.636 --> 00:13:15.796 using a different color plus an underline, 245 00:13:16.056 --> 00:13:18.956 different color plus underlining the links, 246 00:13:19.386 --> 00:13:22.556 different background color, hover and focus. 247 00:13:22.636 --> 00:13:25.826 Probably the best thing is for me to show you. 248 00:13:25.826 --> 00:13:29.926 You can also put links in a navigation menu. 249 00:13:29.926 --> 00:13:32.556 If you're going to start doing this and you're going 250 00:13:32.556 --> 00:13:34.946 to use a lot of links, please reach out. 251 00:13:35.586 --> 00:13:36.656 You know, we can help you. 252 00:13:36.656 --> 00:13:39.226 But I think it's going to be helpful for you 253 00:13:39.226 --> 00:13:41.816 to see the examples to have it make more sense. 254 00:13:51.166 --> 00:13:55.726 Okay. So here are some examples. 255 00:13:55.726 --> 00:13:57.656 This just talks about what we talked about. 256 00:13:57.986 --> 00:14:01.276 Here's a really good example of hyperlink text. 257 00:14:02.326 --> 00:14:06.036 So Deque University, it's in blue, it's in color, 258 00:14:06.086 --> 00:14:11.626 but it's also when you hover over it, it jumps out at you. 259 00:14:11.626 --> 00:14:16.146 It gives you -- it's very clearly shows 260 00:14:16.146 --> 00:14:17.516 that it's something you can click on. 261 00:14:17.516 --> 00:14:19.286 A screen reader will be able to know 262 00:14:19.286 --> 00:14:22.406 that this is clickable, and it's underlined. 263 00:14:23.196 --> 00:14:27.776 So it has that hover and underline altogether here. 264 00:14:27.776 --> 00:14:29.656 So you can see that. 265 00:14:29.656 --> 00:14:31.656 High contrast is another way. 266 00:14:32.356 --> 00:14:37.426 So, if you use the green, it's providing the high contrast. 267 00:14:37.426 --> 00:14:39.266 It's a different ratio. 268 00:14:39.556 --> 00:14:46.266 So, it shows you, it does stand out. 269 00:14:46.376 --> 00:14:48.816 It's not underlined, but when you hover over it, 270 00:14:48.816 --> 00:14:53.816 you can see that it's indicating that it is a link to click on. 271 00:14:56.306 --> 00:14:59.646 I personally think I would stay away from just the contrast 272 00:14:59.646 --> 00:15:01.606 and try to do an underline and hover, 273 00:15:01.606 --> 00:15:05.446 just pull out all the stops, but that is a good example. 274 00:15:05.446 --> 00:15:08.426 A bad example would be something like this. 275 00:15:08.426 --> 00:15:11.036 It's very difficult to differentiate. 276 00:15:11.556 --> 00:15:13.366 You can't even really tell. 277 00:15:13.516 --> 00:15:16.846 We -- you might be able to tell, but an individual 278 00:15:16.846 --> 00:15:20.046 that has low vision or someone that's blind using screen 279 00:15:20.046 --> 00:15:22.676 reader, or even colorblind might have difficulty. 280 00:15:29.086 --> 00:15:34.846 So, if you want to just do it in a hover, you can also do that. 281 00:15:35.206 --> 00:15:39.496 But it is important to rely -- to not rely only on hover, 282 00:15:40.186 --> 00:15:43.576 because you might not -- if it's not underlined 283 00:15:43.576 --> 00:15:46.516 or in another contrast, it's still going to be difficult. 284 00:15:46.516 --> 00:15:49.406 You might not even bother to try to hover over it. 285 00:15:49.526 --> 00:15:53.726 So again, pulling out all the stops -- 286 00:15:53.726 --> 00:15:57.816 Excuse me for the scrolling, this is a really good example. 287 00:16:00.076 --> 00:16:00.506 Okay. 288 00:16:03.186 --> 00:16:03.696 All right. 289 00:16:03.696 --> 00:16:05.256 So I'm going to keep going because I know we wanted 290 00:16:05.256 --> 00:16:06.386 to keep it to a half an hour. 291 00:16:06.386 --> 00:16:09.026 We are available till 4:00 for questions too. 292 00:16:09.026 --> 00:16:10.976 All right. 293 00:16:16.046 --> 00:16:20.246 Contrast. So, this is going to look at things 294 00:16:20.246 --> 00:16:24.946 like color deficiency, color blindness, things like that. 295 00:16:24.946 --> 00:16:26.526 And just some facts. 296 00:16:26.526 --> 00:16:30.836 One person in 12 has some sort of color deficiency. 297 00:16:30.836 --> 00:16:32.576 Usually, men more than women. 298 00:16:32.576 --> 00:16:36.116 So about 8% of men to about 0.4% of women. 299 00:16:36.116 --> 00:16:39.756 And a person who has low vision 300 00:16:39.756 --> 00:16:42.626 or colorblindness will not be able to distinguish text 301 00:16:42.626 --> 00:16:46.046 against a background if there isn't enough contrast. 302 00:16:46.046 --> 00:16:50.896 And if you take a look at this, I mean, I'm not color. 303 00:16:50.896 --> 00:16:52.156 This is fine for me. 304 00:16:52.446 --> 00:16:53.946 This word says, vibrates. 305 00:16:53.946 --> 00:16:55.546 This doesn't feel good on my eyes. 306 00:16:55.546 --> 00:16:57.776 I don't know about anyone else. 307 00:16:57.886 --> 00:17:02.636 I have this kind of weird visual thing that -- Anyway -- 308 00:17:02.636 --> 00:17:05.776 So we want to avoid things like that 309 00:17:05.776 --> 00:17:08.486 because it actually can look like it's moving 310 00:17:08.486 --> 00:17:14.436 and that can be -- make a person not feel good and not be able 311 00:17:14.436 --> 00:17:16.296 to read it accurately. 312 00:17:16.296 --> 00:17:19.076 It's not easy on the eyes, so to speak. 313 00:17:19.076 --> 00:17:20.406 And certainly, if you're colorblind, 314 00:17:20.406 --> 00:17:23.486 it's going to be very difficult to differentiate. 315 00:17:23.526 --> 00:17:26.706 And I'm going to show examples of this. 316 00:17:26.706 --> 00:17:28.596 So again, it's giving you specifics 317 00:17:28.596 --> 00:17:31.056 that I don't worry too, too much about. 318 00:17:31.056 --> 00:17:33.526 I think once you see the examples, it'll help. 319 00:17:33.526 --> 00:17:35.906 But they really sort of narrow down. 320 00:17:35.906 --> 00:17:39.986 All right, small text under 18-point font 321 00:17:39.986 --> 00:17:43.906 or 14-point bold must have a contrast ratio 322 00:17:43.906 --> 00:17:46.346 with the background. 323 00:17:46.456 --> 00:17:48.526 So this is a good guideline. 324 00:17:48.526 --> 00:17:53.306 And when we give you the handout at the end, it'll be on here, 325 00:17:53.346 --> 00:17:56.406 it'll go over some of these things, 326 00:17:56.406 --> 00:17:59.736 but I think the examples really help a little bit more. 327 00:17:59.906 --> 00:18:01.756 You don't have to necessarily memorize those. 328 00:18:02.746 --> 00:18:04.006 So back to the examples. 329 00:18:04.006 --> 00:18:06.806 I apologize for the back and forth, but -- 330 00:18:13.076 --> 00:18:13.796 Okay. No. 331 00:18:17.426 --> 00:18:18.896 Am I in the right one? 332 00:18:19.066 --> 00:18:19.376 Yes. Okay. 333 00:18:19.376 --> 00:18:23.336 So all this contrast. 334 00:18:23.336 --> 00:18:27.326 Let's just look at the examples, because that's a lot of numbers. 335 00:18:27.326 --> 00:18:29.156 So here's a bad example. 336 00:18:29.646 --> 00:18:32.806 Low contrast between the text and the background. 337 00:18:32.806 --> 00:18:34.526 You can sort of tell, as you're looking at this, 338 00:18:34.526 --> 00:18:36.136 that there's a lot going on. 339 00:18:36.456 --> 00:18:38.176 The white is very light. 340 00:18:39.136 --> 00:18:42.906 It's -- Again, a sighted person who is -- 341 00:18:42.906 --> 00:18:44.796 does not have issues is going to be able 342 00:18:44.796 --> 00:18:46.856 to navigate through this. 343 00:18:46.856 --> 00:18:49.236 But someone who struggles with color blindness 344 00:18:49.236 --> 00:18:53.656 or low vision is really not going to be able to. 345 00:18:54.226 --> 00:18:57.756 So, the headings here, they don't have enough contrast 346 00:18:57.756 --> 00:19:00.556 against the blue, so that's not a good way 347 00:19:00.976 --> 00:19:04.586 to do it, to set it up. 348 00:19:04.586 --> 00:19:06.416 And this is even telling you there's -- 349 00:19:06.416 --> 00:19:09.396 about the insufficient color contrast. 350 00:19:09.506 --> 00:19:12.176 Font size is low. 351 00:19:12.796 --> 00:19:16.846 So they must have a contrast ratio 4.5:1. 352 00:19:16.846 --> 00:19:19.156 So let's take a look. 353 00:19:19.156 --> 00:19:22.726 Now, we have -- the blue background was darkened, 354 00:19:22.726 --> 00:19:26.056 which really brings out the lighter colors 355 00:19:26.056 --> 00:19:30.416 and as well as for the headings. 356 00:19:30.606 --> 00:19:34.076 So, this, once it -- by increasing the contrast, 357 00:19:34.326 --> 00:19:36.296 this is going to be a lot easier to read. 358 00:19:36.296 --> 00:19:36.976 It's more accessible. 359 00:19:41.406 --> 00:19:43.386 Okay. Let's scroll through some of these. 360 00:19:43.386 --> 00:19:45.416 Here's another good example. 361 00:19:45.416 --> 00:19:47.126 This is a menu. 362 00:19:47.126 --> 00:19:52.986 And you see that the contrast ratio of the text 363 00:19:52.986 --> 00:19:56.616 and the background, it gives you this -- all these numbers. 364 00:19:56.966 --> 00:20:02.976 So, this is a good, enhanced color contrast example. 365 00:20:03.026 --> 00:20:05.736 But a bad example is something like this. 366 00:20:05.736 --> 00:20:07.886 This is really difficult to see. 367 00:20:07.886 --> 00:20:09.306 Won't even know it's a heading. 368 00:20:09.306 --> 00:20:12.976 And it's important -- We're going to talk more next time 369 00:20:12.976 --> 00:20:14.906 when we talk about Word documents, 370 00:20:14.906 --> 00:20:23.156 that headings are differentiated so that individuals know -- 371 00:20:23.156 --> 00:20:26.646 a blind user would be able to know, okay, this is a heading 372 00:20:26.646 --> 00:20:28.696 and this is a new topic. 373 00:20:29.106 --> 00:20:32.016 So again, it's contrast. 374 00:20:32.016 --> 00:20:37.396 This is a much better -- little bit easier to make -- 375 00:20:37.686 --> 00:20:41.266 wrap your mind around because if it looks faint to you, 376 00:20:41.506 --> 00:20:43.946 it's probably not in a high enough contrast. 377 00:20:44.896 --> 00:20:47.666 Okay. All right. 378 00:20:55.336 --> 00:20:57.606 Visual white space. 379 00:20:57.676 --> 00:21:00.806 So it's important to do a couple of things. 380 00:21:00.806 --> 00:21:03.606 One, when you're building visual content, 381 00:21:03.606 --> 00:21:09.506 it should be separated visually and distinct from one another. 382 00:21:09.506 --> 00:21:13.326 You can either use margins or something they call padding. 383 00:21:13.566 --> 00:21:16.786 There are some -- there's some good visual white space 384 00:21:16.786 --> 00:21:18.886 and then there's too much white space. 385 00:21:19.066 --> 00:21:23.376 So you want to have good visual white space. 386 00:21:23.376 --> 00:21:26.916 So, if things are nicely put into columns, paragraphs, 387 00:21:26.916 --> 00:21:30.246 it's easier to read and understand when you're distinct 388 00:21:30.246 --> 00:21:33.956 and a screen reader, it makes it a lot easier for a screen reader 389 00:21:33.956 --> 00:21:36.386 to be able to read it if they're distinct 390 00:21:36.386 --> 00:21:39.036 and separated from each other. 391 00:21:39.036 --> 00:21:42.376 If they're too close in proximity, it's very difficult 392 00:21:42.516 --> 00:21:46.646 to tell where one element begins and another ends, particularly, 393 00:21:46.646 --> 00:21:48.976 if that styling, the visual styling is similar. 394 00:21:52.046 --> 00:21:56.836 So, we'll go to, we'll go to this one. 395 00:22:01.186 --> 00:22:06.736 Okay. So here is a -- Now, these look a little light to me, 396 00:22:06.736 --> 00:22:10.246 so we're not going to worry about contrast and all of that. 397 00:22:10.246 --> 00:22:13.716 We're not looking at that right now, but what we are looking 398 00:22:13.716 --> 00:22:14.946 at is the sufficient space. 399 00:22:15.026 --> 00:22:16.866 It makes this easier to read. 400 00:22:16.866 --> 00:22:18.256 This is in a webpage. 401 00:22:18.546 --> 00:22:24.776 There's a good amount of space between the text and the images 402 00:22:24.776 --> 00:22:28.436 and the elements on that page to enhance the readability. 403 00:22:28.436 --> 00:22:30.696 So, this is going to be good for a screen reader, 404 00:22:31.026 --> 00:22:33.986 for someone that has low vision, things like that. 405 00:22:34.256 --> 00:22:37.906 A bad -- another -- Here is another good example. 406 00:22:38.176 --> 00:22:40.996 Sufficient spacing between columns. 407 00:22:40.996 --> 00:22:44.386 Not too much, because too much can also be problematic, 408 00:22:44.516 --> 00:22:48.756 but there's sufficient spacing that makes it easier to read. 409 00:22:48.756 --> 00:22:52.096 And I think it's going to make it easier for everyone to read, 410 00:22:52.186 --> 00:22:56.606 but particularly if it's like -- this is accessible, 411 00:22:56.886 --> 00:22:58.056 which is the important thing. 412 00:22:58.266 --> 00:23:03.026 So, as we looked at the example at the top, this is a mess. 413 00:23:03.096 --> 00:23:06.006 I mean, for lack of a better word, it's all jumbled. 414 00:23:06.066 --> 00:23:09.026 There's not -- there's really not a lot of space. 415 00:23:09.026 --> 00:23:11.486 And a screen reader is going to just keep -- 416 00:23:11.646 --> 00:23:14.766 it's going to hover over this and it's going to tell you what 417 00:23:14.766 --> 00:23:17.546 that is if there is a text description. 418 00:23:17.546 --> 00:23:20.416 And then when you come over here, it's just a lot. 419 00:23:20.416 --> 00:23:23.826 So visually, this is not set up in a good way 420 00:23:24.046 --> 00:23:29.916 to provide enough space so that -- to make it accessible. 421 00:23:29.916 --> 00:23:31.296 So this is not accessible. 422 00:23:32.736 --> 00:23:33.846 Same with this. 423 00:23:33.846 --> 00:23:36.346 I mean, this one's pretty obvious, right? 424 00:23:36.346 --> 00:23:37.936 Like a screen reader is not going to know 425 00:23:37.936 --> 00:23:39.836 where to start and stop. 426 00:23:40.166 --> 00:23:42.456 That's really going to be difficult 427 00:23:42.596 --> 00:23:44.886 with the readability of these columns. 428 00:23:48.146 --> 00:23:48.776 Okay. 429 00:23:53.576 --> 00:23:54.726 Now we have a few more minutes. 430 00:23:54.726 --> 00:23:55.496 So typography. 431 00:23:55.496 --> 00:23:58.166 I'm going to spend a little bit of time on this, 432 00:23:58.166 --> 00:24:02.856 but we are going to talk more about it at the next one, 433 00:24:02.856 --> 00:24:05.456 the Word doc in accessibility piece. 434 00:24:05.456 --> 00:24:08.286 But typography, when we think about typography, we might think 435 00:24:08.286 --> 00:24:13.006 about things like font, style, things like that. 436 00:24:13.216 --> 00:24:17.456 And it can be difficult for people with low vision, 437 00:24:17.736 --> 00:24:21.726 but also those that have learning disabilities 438 00:24:21.926 --> 00:24:23.716 or language-based types 439 00:24:23.716 --> 00:24:27.756 of learning disabilities will have difficulty reading 440 00:24:27.756 --> 00:24:31.126 if they have trouble perceiving the text, or if it's presented 441 00:24:31.126 --> 00:24:34.246 in a manner that's difficult for them to read. 442 00:24:34.246 --> 00:24:36.056 So, for example, cursive. 443 00:24:36.056 --> 00:24:37.276 You know, a lot of students today, 444 00:24:37.276 --> 00:24:39.076 haven't been trained in cursive. 445 00:24:39.076 --> 00:24:40.456 They learn it in school. 446 00:24:40.756 --> 00:24:45.406 And I'll have students say, I can't read it if it's cursive. 447 00:24:45.686 --> 00:24:50.036 So that's sort of a little bit more of an extreme, 448 00:24:50.036 --> 00:24:53.996 but there are some fonts that we want people to be mindful 449 00:24:53.996 --> 00:24:57.706 of using or to not use, to stay away from, 450 00:24:58.646 --> 00:25:18.436 that will help individuals with all types of different visual 451 00:25:18.436 --> 00:25:35.346 and reading disabilities. 452 00:25:54.306 --> 00:25:59.866 So another -- Essentially, we want to avoid the fancy fonts. 453 00:25:59.866 --> 00:26:02.236 They might look nice, but they are harder to read. 454 00:26:02.286 --> 00:26:03.556 It's difficult for individuals 455 00:26:04.136 --> 00:26:05.926 to keep their place as they're reading. 456 00:26:05.926 --> 00:26:08.596 Both of these are examples of fonts that are pretty but hard 457 00:26:08.626 --> 00:26:09.826 to read than the standard fonts, which I'll show you. 458 00:26:09.856 --> 00:26:11.086 So avoid using something like these two examples. 459 00:26:11.116 --> 00:26:12.556 I would say if it's in cursive, definitely avoid using it. 460 00:26:12.586 --> 00:26:13.546 So, the Serif and Sans-serif fonts, 461 00:26:13.576 --> 00:26:14.476 those are both considered acceptable. 462 00:26:14.506 --> 00:26:15.826 And these are some examples, Times New Roman, Georgia, 463 00:26:15.856 --> 00:26:17.176 they don't have those extra embellishments that kind 464 00:26:17.206 --> 00:26:18.526 of you might see up here where it's, you know, little things 465 00:26:18.556 --> 00:26:19.486 that hang on the letters and so forth. 466 00:26:19.516 --> 00:26:20.926 Serif might have them, but, you know, they're still acceptable. 467 00:26:20.956 --> 00:26:21.496 It's when they get real, 468 00:26:21.526 --> 00:26:22.816 super fancy that they become more difficult to read. 469 00:26:22.846 --> 00:26:24.076 So, we say to use Serif and San-serif fonts, 470 00:26:24.106 --> 00:26:25.036 and these are some examples of those. 471 00:26:25.066 --> 00:26:26.146 I know Aerial font is often used in things 472 00:26:26.176 --> 00:26:27.286 because it is very clean, very easy to read, 473 00:26:27.316 --> 00:26:27.976 there are no embellishments. 474 00:26:32.396 --> 00:26:34.936 The other thing we talked a little bit about or I mentioned 475 00:26:34.936 --> 00:26:36.946 at the beginning is that fonts should be -- 476 00:26:36.946 --> 00:26:38.596 fonts and other types of things 477 00:26:38.596 --> 00:26:41.096 like colors should be user customizable 478 00:26:41.096 --> 00:26:45.556 because that can help a lot with individuals being able 479 00:26:45.556 --> 00:26:47.716 to access the content. 480 00:26:47.716 --> 00:26:53.866 If you do -- if you create text in a regular HTML format, 481 00:26:53.866 --> 00:26:57.016 but not in images, that's going to help. 482 00:26:57.016 --> 00:27:02.446 And regular text in the HTML format, 483 00:27:03.016 --> 00:27:05.546 documents can be customized in all these ways. 484 00:27:05.816 --> 00:27:09.776 So, if someone can change the visual characteristics, 485 00:27:09.776 --> 00:27:11.976 that's going to help that user. 486 00:27:16.356 --> 00:27:19.716 So that's something to keep in mind. 487 00:27:19.716 --> 00:27:20.936 There are two main groups of people 488 00:27:20.936 --> 00:27:23.126 who would be interested in this. 489 00:27:23.126 --> 00:27:27.426 Users with low vision who need large and high contrast text. 490 00:27:27.426 --> 00:27:31.086 My uncle is -- has -- he's legally blind, 491 00:27:31.086 --> 00:27:34.436 but he would be considered low vision as well. 492 00:27:34.436 --> 00:27:38.976 He does have some sighted capabilities, but he will talk 493 00:27:38.976 --> 00:27:42.826 about how he can go into Word and click on this and that. 494 00:27:42.826 --> 00:27:44.846 And I say, this and that, because I -- 495 00:27:44.886 --> 00:27:50.036 it was a lot of things that he knew just out of memory, 496 00:27:50.036 --> 00:27:50.966 you know, this and F13, 497 00:27:51.176 --> 00:27:55.276 it changes the contrast automatically for him 498 00:27:55.276 --> 00:27:57.176 because that was customizable. 499 00:27:57.176 --> 00:28:01.556 So, individuals that need this will know what they need 500 00:28:01.556 --> 00:28:02.606 and if it's not customizable, 501 00:28:02.606 --> 00:28:05.656 they're going to struggle with it. 502 00:28:05.696 --> 00:28:08.036 Same with reading disabilities. 503 00:28:08.066 --> 00:28:12.466 Some part of having a reading disability can be just 504 00:28:12.466 --> 00:28:16.586 struggling with line spacing, if lines are too close together, 505 00:28:16.716 --> 00:28:18.336 or they struggle with those custom fonts, 506 00:28:18.336 --> 00:28:20.096 they may not be able to read it. 507 00:28:20.246 --> 00:28:23.776 So, if it can be customized and they can make it bigger, 508 00:28:23.776 --> 00:28:25.316 then that's helpful too. 509 00:28:25.316 --> 00:28:27.586 And I think we're little bit more about some 510 00:28:27.586 --> 00:28:28.906 of this with Word document. 511 00:28:29.756 --> 00:28:31.696 Staff, Heather, I know Heather is going 512 00:28:31.696 --> 00:28:34.166 to run that one next time. 513 00:28:34.166 --> 00:28:37.026 Here's just a quick example of, you know, 514 00:28:37.106 --> 00:28:40.426 line spacing should be at least 1.5. 515 00:28:40.426 --> 00:28:43.486 You don't want it to be too much though. 516 00:28:43.706 --> 00:28:48.896 So, 2.0 is probably your best bet, which is when we talk 517 00:28:48.896 --> 00:28:52.476 about double spacing and things like that. 518 00:28:52.806 --> 00:28:53.816 All right. 519 00:28:54.086 --> 00:28:56.866 So quickly, I know I wanted to try to keep it 520 00:28:56.866 --> 00:28:57.936 to a half an hour, but -- 521 00:29:04.166 --> 00:29:06.916 Okay. So here is some good examples. 522 00:29:07.376 --> 00:29:12.046 This is a good example of some wider line spacing. 523 00:29:12.486 --> 00:29:15.116 There's a nice space in here. 524 00:29:15.546 --> 00:29:20.886 This is 1.7, I guess it was set too, but this is very nice, 525 00:29:20.886 --> 00:29:25.436 easy to read for screen readers, for individuals 526 00:29:25.436 --> 00:29:26.686 with reading disabilities. 527 00:29:26.976 --> 00:29:28.926 But a bad example would be something 528 00:29:28.926 --> 00:29:31.266 like this, so too tight. 529 00:29:31.436 --> 00:29:34.286 It needs to be spread out a little bit more, 530 00:29:34.746 --> 00:29:38.096 both in here probably and in here, but definitely 531 00:29:38.096 --> 00:29:39.976 within the paragraphs. 532 00:29:43.076 --> 00:29:47.176 Another good example, this is a good example of the line spacing 533 00:29:47.176 --> 00:29:49.676 within the paragraphs. 534 00:29:49.756 --> 00:29:52.076 And a bad example. 535 00:29:52.256 --> 00:29:56.266 You can't really tell -- I mean, you can, if you relook at it, 536 00:29:56.266 --> 00:29:59.266 but at quick glance and certainly if you're someone 537 00:29:59.266 --> 00:30:01.126 that struggles with reading, it's going to be difficult 538 00:30:01.126 --> 00:30:02.786 to differentiate those paragraphs. 539 00:30:03.926 --> 00:30:06.286 Okay. All right. 540 00:30:06.286 --> 00:30:10.646 So just have one more area to just quickly cover. 541 00:30:16.176 --> 00:30:17.636 Line justification. 542 00:30:18.366 --> 00:30:20.216 We are going to talk a little bit more about this. 543 00:30:20.216 --> 00:30:22.236 I think the next one as well. 544 00:30:22.236 --> 00:30:27.356 But people with certain types of reading disabilities 545 00:30:27.356 --> 00:30:30.076 and other cognitive disabilities can struggle 546 00:30:30.076 --> 00:30:34.186 to read text that's both left and right justified. 547 00:30:34.366 --> 00:30:37.416 This is where you get into that too much white space 548 00:30:37.416 --> 00:30:39.796 or what they call rivers of white space. 549 00:30:39.796 --> 00:30:42.516 And it'll make sense when I show the example. 550 00:30:42.516 --> 00:30:44.026 They kind of run through the page, 551 00:30:44.336 --> 00:30:46.256 which makes it difficult to read. 552 00:30:46.256 --> 00:30:49.156 And in some cases, it's impossible. 553 00:30:49.156 --> 00:30:54.916 So avoid full justification of text because it can cause words 554 00:30:54.916 --> 00:30:58.266 to be either bunched too close together or stretched out 555 00:30:58.266 --> 00:31:01.556 and that makes it difficult to find those word boundaries. 556 00:31:01.556 --> 00:31:02.566 All right. 557 00:31:02.656 --> 00:31:07.296 I think there's a way to learn, on a side note, 558 00:31:07.346 --> 00:31:10.696 to click right here and have it show when you share the screen, 559 00:31:11.046 --> 00:31:13.166 but I haven't figured it out yet. 560 00:31:13.166 --> 00:31:17.486 So that's why I'm doing the staff share and share again. 561 00:31:17.556 --> 00:31:22.066 I appreciate your patience. 562 00:31:22.526 --> 00:31:26.246 And this will be before I show you the summary. 563 00:31:26.336 --> 00:31:30.416 So here is a good example of left aligned text. 564 00:31:30.946 --> 00:31:33.106 There's good spacing between the words. 565 00:31:33.586 --> 00:31:39.576 It's not justified, it's left aligned. 566 00:31:39.656 --> 00:31:41.086 Okay. A bad example. 567 00:31:41.376 --> 00:31:44.116 This is that full justification 568 00:31:44.116 --> 00:31:47.026 and here's your rivers of white space. 569 00:31:48.156 --> 00:31:50.256 That's kind of fun to say. 570 00:31:50.256 --> 00:31:52.756 I've never heard that until we started learning about it, 571 00:31:52.756 --> 00:31:54.946 but it kind of just flows through. 572 00:31:54.946 --> 00:31:56.406 There's just too much. 573 00:31:56.956 --> 00:32:02.706 So we really want to avoid doing that line justification either 574 00:32:02.706 --> 00:32:06.686 to the left or to the right. 575 00:32:06.836 --> 00:32:08.586 It's aligned on the left and right. 576 00:32:08.586 --> 00:32:13.456 So this -- the top one is left aligned, but down here, 577 00:32:13.456 --> 00:32:15.626 this is where you're getting 578 00:32:15.626 --> 00:32:17.676 into that full line justification 579 00:32:17.676 --> 00:32:20.806 and it's causing it on all over the place. 580 00:32:22.186 --> 00:32:22.776 Okay. 581 00:32:32.186 --> 00:32:38.936 Okay. So that's the presentation in terms of just going 582 00:32:38.936 --> 00:32:43.216 through all the different areas with color and visual. 583 00:32:43.326 --> 00:32:50.776 There is a summary and checklist in Deque U. And I will show 584 00:32:50.776 --> 00:32:55.276 that to you, and you can use that as you create things, 585 00:32:55.276 --> 00:32:59.116 but know that we are a resource. 586 00:33:00.436 --> 00:33:01.686 So here's the reference. 587 00:33:01.686 --> 00:33:04.356 The PowerPoint I will send out as well to those 588 00:33:04.356 --> 00:33:06.766 of you who have attended. 589 00:33:07.266 --> 00:33:12.086 But there is a resource -- Deque U is a great resource. 590 00:33:12.086 --> 00:33:14.356 So you can go back and look at some of those. 591 00:33:14.356 --> 00:33:15.546 You can always contact us. 592 00:33:15.546 --> 00:33:16.806 The slide got all messed up.