Electronic Accessibility for Student Staff

1 00:00:00,000 --> 00:00:04,960 As a reminder this workshop is being recorded, and we will post all of the resources on our website and that is 2 00:00:05,600 --> 00:00:09,160 it.ucsb.edu/trainings/workshops 3 00:00:10,640 --> 00:00:17,600 Okay, so we would like to get to know you a little bit. If you wouldn't mind introducing yourself, and let us know where you're joining us from, 4 00:00:17,880 --> 00:00:24,120 what office or department do you currently work for at UCSB? What is your role and anything else you'd like to share. 5 00:00:24,600 --> 00:00:29,640 Please feel free to type in the chat, and we'll give about a minute or so for that. 6 00:00:31,840 --> 00:00:35,960 Okay, so in this workshop we will talk a little bit about digital accessibility. 7 00:00:37,000 --> 00:00:44,120 Why does this matter? Why is accessibility important. And the bottom line really is having equitable access for all audiences. 8 00:00:45,120 --> 00:00:49,120 We will cover a little bit about some variations, types of disabilities, 9 00:00:50,040 --> 00:00:58,560 and how we can improve some of the social media, content, marketing, graphic design materials that many of you work on. 10 00:00:59,120 --> 00:01:05,320 So these are just some general categories of types of disabilities. 11 00:01:06,600 --> 00:01:10,280 This is not an exhaustive list. And there's also some overlap and variation. 12 00:01:11,000 --> 00:01:16,480 But just to give a general idea: cognitive, visual, auditory, motor, and speech. 13 00:01:17,160 --> 00:01:22,480 For instance: visual disability might include low vision, total, or partial blindness. 14 00:01:23,080 --> 00:01:32,560 Auditory could be partial or total deafness. Cognitive disability could include somebody with dyslexia or on the autism spectrum. 15 00:01:33,880 --> 00:01:37,120 Motor disability could be somebody who requires a wheelchair. 16 00:01:37,720 --> 00:01:41,920 And, speech can consist of a variety of different speech conditions. 17 00:01:42,640 --> 00:01:46,920 And a lot of these can also be temporary or situational. 18 00:01:47,760 --> 00:01:51,320 And that also includes, different stages of life. 19 00:01:51,600 --> 00:01:56,000 So as we get older, our vision might not be what it used to be at some point. 20 00:01:56,680 --> 00:02:04,690 Same with hearing and other senses. So the bottom line basically is that accessible digital content helps everybody, 21 00:02:05,490 --> 00:02:08,850 regardless of what stage in life ability or disability they might experience. 22 00:02:10,690 --> 00:02:17,490 And then how do we achieve this? And well, there are some principles that we follow, the POUR Principles. 23 00:02:18,850 --> 00:02:25,570 We'll talk a little bit about these. Basically, these are just like simple questions that you can ask to achieve these objectives. 24 00:02:26,730 --> 00:02:31,610 The first of the POUR Principles is Perceivable, and what makes your content perceivable. 25 00:02:32,410 --> 00:02:37,330 And what you want to ask yourself is can your audience read your content? 26 00:02:38,170 --> 00:02:42,690 In other words, are they able to detect, highlight the text, 27 00:02:43,530 --> 00:02:50,530 be able to actually get that information from your post or your marketing materials or a flyer? 28 00:02:51,450 --> 00:02:55,810 The next principle is Operable. Can your audience navigate through your content? 29 00:02:56,770 --> 00:03:06,730 If you're on a laptop or a desktop, a lot of us use a mouse to navigate, but some users might just use a keyboard if they do not use a mouse. 30 00:03:07,050 --> 00:03:13,650 So, can your content be accessed and navigated through with a keyboard or with a mouse? 31 00:03:14,170 --> 00:03:19,090 Is there that flexibility, or on a touchscreen? Is the content understandable? 32 00:03:20,090 --> 00:03:26,010 So can your audience clearly understand your content based on the messaging that you're providing? 33 00:03:26,850 --> 00:03:31,730 So you want to make sure that the messaging and the wording is clearly understandable. 34 00:03:32,690 --> 00:03:38,570 It's not overly convoluted or unnecessarily complex if it doesn't have to be, 35 00:03:38,770 --> 00:03:41,370 if it's straightforward, if you're advertising for an event, 36 00:03:41,650 --> 00:03:48,770 for example, are the event details clear, like where to register the date, the time, the place, that sort of thing. 37 00:03:48,970 --> 00:03:51,610 So is it just straightforward and easy to understand? 38 00:03:52,970 --> 00:04:02,580 And finally the "R" principle of POUR is Robust. So, does your content work well across different devices, operating systems, screens? 39 00:04:03,340 --> 00:04:07,820 And so if somebody accesses your content on a mobile device, 40 00:04:08,220 --> 00:04:14,140 are they just as easily able to view and get all that information if they were 41 00:04:14,300 --> 00:04:19,620 to access the the post or whatever digital materials on a laptop desktop, 42 00:04:20,180 --> 00:04:25,380 on a Mac versus a PC or Android, iPhone, etc. 43 00:04:27,100 --> 00:04:32,780 Okay. And then an important point I would like to stress is that accessibility is really a process. 44 00:04:33,780 --> 00:04:36,980 No tool is ever perfect. Nothing's ever 100% accessible. 45 00:04:38,060 --> 00:04:39,420 Remember, you're not alone in this process. 46 00:04:40,460 --> 00:04:47,100 There are a lot of great resources at UCSB and outside of UCSB, and we'll try to point you to some of those. 47 00:04:47,340 --> 00:04:53,580 So reach out if you have any questions. The campus website is 48 00:04:54,380 --> 00:04:59,140 accessibility.ucsb.edu/digital-accessibility This will be posted in the chat as well. 49 00:04:59,460 --> 00:05:04,900 On the presentation we have at the end of the presentation, a whole bunch of resources with links to those resources, 50 00:05:05,300 --> 00:05:10,100 and we'll be sharing this with you, once we make sure that everything is nice and accessible for everybody. 51 00:05:11,060 --> 00:05:18,940 Also, I wanted to point out in these resources branding, they already kind of figured out a lot of the social media stuff, 52 00:05:19,380 --> 00:05:21,980 including some of the popular hashtags, and we'll get to that eventually. 53 00:05:22,540 --> 00:05:26,900 But that is one of the resources if you are a registered organization with them. 54 00:05:27,460 --> 00:05:33,220 And I and I looked, some of you are and some of you I don't know because I don't know what is your handles. 55 00:05:34,340 --> 00:05:40,340 Um, and because you are considered staff, you also get access to all three of us. 56 00:05:40,820 --> 00:05:44,820 We have a calendar where people can go ahead and make an appointment there half an hour blocks, 57 00:05:45,300 --> 00:05:49,980 bring your stuff and then ask us questions and challenges. And we can also help you. 58 00:05:50,820 --> 00:05:55,350 And if we don't know, we have to research it and then find out for ourselves and then share it with everybody else on campus. 59 00:05:55,870 --> 00:05:59,190 So you're not alone on this one. Thank you. 60 00:05:59,350 --> 00:06:05,870 Alex. So, if you do visit when you visit the branding website for UCSB, they do have a section on social media. 61 00:06:06,670 --> 00:06:10,350 Um, and like Alex was mentioning, there are some good resources here as well. 62 00:06:10,670 --> 00:06:17,310 As far as best practices and templates, guidelines, etc. and the directory of accounts there as well. 63 00:06:18,310 --> 00:06:26,110 All right. So we'll talk a little bit about some assistive technology. There are a lot of different types of assistive technology out there. 64 00:06:26,430 --> 00:06:30,510 But for the purposes of this workshop we'll focus on screen reader software. 65 00:06:31,190 --> 00:06:37,630 And there are different kinds of types of screen readers, but some of the common ones are Nvda, 66 00:06:38,350 --> 00:06:44,270 which is a download, you can download it and it's free, and it's available for Windows and Jaws. 67 00:06:44,710 --> 00:06:48,190 This one requires payment, but it's available for Windows or Mac. 68 00:06:49,310 --> 00:06:52,510 Then there are for mobile devices, 69 00:06:52,750 --> 00:06:57,430 Voiceover for for Mac OS and talkback for Android. 70 00:06:57,750 --> 00:07:04,030 These are built into your Android or iPhone devices. So, so you don't need to separately download. 71 00:07:04,670 --> 00:07:10,030 But if you have not used either of these on your mobile device, for example, 72 00:07:10,230 --> 00:07:15,030 I invite you to try them out, activate, uh, VoiceOver or Talkback on your mobile device, 73 00:07:15,470 --> 00:07:24,710 and you'll be able to get, uh, firsthand experience on what it's like to experience a screen and to read material on a screen with, 74 00:07:25,230 --> 00:07:30,750 um, with a, with a screen reader software. So, , when you get a chance, I encourage you to try that out. 75 00:07:32,870 --> 00:07:36,390 And yes, it's a little bit disturbing because you're not used to it. 76 00:07:36,550 --> 00:07:40,350 So it'll go really fast and sometimes you might not even understand it. 77 00:07:40,470 --> 00:07:45,190 The first pass, the people that use those tools, they're kind of used to it. 78 00:07:45,350 --> 00:07:49,590 And some of them actually even increase the speed on how they get through it. 79 00:07:49,750 --> 00:07:53,400 But again, it's about letting them know where to start. 80 00:07:54,000 --> 00:08:01,400 So we're going to go ahead and talk about a couple of things. But if you try it, you'll kind of realize, oh yeah, this is this is not going to work. 81 00:08:01,520 --> 00:08:04,600 And we have some examples and we will ask you questions about us throughout the presentation. 82 00:08:05,440 --> 00:08:13,000 But do try it out. And, we would like to also find out what device are you currently using. 83 00:08:13,800 --> 00:08:19,480 Are you joining us from your mobile device, from your campus office desk, 84 00:08:20,160 --> 00:08:25,920 to help us better understand the types of use cases and how to improve our trainings going forward. 85 00:08:26,360 --> 00:08:34,800 So please feel free to share that in the chat as well. Also, the reason we asking you while you type it up is we want to know. 86 00:08:35,800 --> 00:08:43,080 We want to make you aware that some of these things work on the mobile version of the tool, but then others don't, and we'll get to that. 87 00:08:43,280 --> 00:08:51,120 But uh, when you are working purely from a desktop, you might not be able to do what we're going to show you unless you actually do it on your mobile. 88 00:08:51,880 --> 00:08:56,320 So those are some of the things that we have discovered along the way. 89 00:08:56,960 --> 00:08:59,480 We'll share those with you. yes. 90 00:08:59,800 --> 00:09:07,560 There's definitely different, limitations at times and just changes across different platforms and different softwares. 91 00:09:08,040 --> 00:09:13,600 So, so yeah, we try to kind of keep up with the current capabilities. 92 00:09:15,320 --> 00:09:19,640 All right. So next we're going to talk about specific tools. And and just keep in mind. 93 00:09:19,920 --> 00:09:26,640 No tool is perfect. There are definitely a lot of areas where the software itself can be improved. 94 00:09:27,160 --> 00:09:32,880 So we'll go over that. And uh, but regardless, it's important to remember that, 95 00:09:33,240 --> 00:09:41,560 you always want to do the best that you can and not overlook easy and simple ways to improve and make your content more accessible. 96 00:09:42,280 --> 00:09:51,450 So if you're working on graphic design or marketing materials, for example, one of the common tools that is used is Canva. 97 00:09:52,170 --> 00:10:00,730 So we're going to take a look at an example here. So this is a screenshot of a flier for a happy World Water Day. 98 00:10:01,050 --> 00:10:04,610 And. Can you can you read that what it says. 99 00:10:05,690 --> 00:10:10,490 Um. And if not then don't feel bad because I can barely read what that says. 100 00:10:10,890 --> 00:10:14,530 It's, as you can, as you might be able to notice the. 101 00:10:15,170 --> 00:10:23,570 There's a very kind of light teal blue color. It's, it's quite lovely, but it doesn't contrast well with the text. 102 00:10:24,050 --> 00:10:27,170 And that's on the, the featured event advertising. 103 00:10:28,010 --> 00:10:32,810 So if you save, for example, somebody who has lower vision or is colorblind, 104 00:10:34,210 --> 00:10:44,090 you can imagine how they might see it and might have even more trouble to discern the, the, the text that's in the information that's on this flier. 105 00:10:44,570 --> 00:10:48,570 So this is one example. when we talk about color contrast in. 106 00:10:48,850 --> 00:10:52,450 I'll actually go into, well, she's prepping for that canvas. 107 00:10:52,770 --> 00:10:56,410 Let me let me tell you something about this particular example. What? She's setting it up. 108 00:10:57,330 --> 00:11:02,290 Um, when I was looking at the slide preparation that she was doing, I'm like, okay, well, there's two examples. 109 00:11:02,730 --> 00:11:03,410 Which one's a good one? 110 00:11:03,530 --> 00:11:10,370 Because both as a colorblind person myself, I'm having trouble trying to look at it like and understand which one is the right one. 111 00:11:12,250 --> 00:11:15,250 The both are hard to see, both examples that you're going to see. 112 00:11:15,650 --> 00:11:24,730 And right now she's going to show you on camera how you can go ahead and prepare that as the first step using a color, validator. 113 00:11:26,650 --> 00:11:36,530 And yes, we put the link to that color validator on the end of the presentation as well as on the chat. 114 00:11:38,610 --> 00:11:45,610 Yeah, the one, the validator that, uh, Alex is talking about, this specific one is the color contrast analyzer or CC. 115 00:11:46,290 --> 00:11:49,850 It is free and you can download it for Windows or Mac. 116 00:11:50,290 --> 00:11:51,850 This is for, desktop. 117 00:11:52,610 --> 00:12:02,730 And when you when you're using Canva, for example, if you have a paid subscription through your department or, you know, through your job, 118 00:12:03,970 --> 00:12:13,530 there will be more tools available to you, including some accessibility tools that that check contrast and and other elements that are helpful. 119 00:12:13,970 --> 00:12:19,650 Unfortunately, as of right now, the free version of Canva doesn't include a lot of those features. 120 00:12:20,570 --> 00:12:27,610 Um, so that's why it's something like the CC tool is is great to have, and I'll do a little quick demo on. 121 00:12:28,450 --> 00:12:31,570 Just need to get both on my screen. 122 00:12:32,530 --> 00:12:35,010 But there's a specific standard that you want to achieve. 123 00:12:35,530 --> 00:12:42,970 And it's a little technical, but it's it's pretty easy and you'll be able to get, familiarized with it quite quickly. 124 00:12:43,690 --> 00:12:53,460 Essentially what it is, is you want to have enough contrast with your on screen text with important elements and against the background. 125 00:12:54,300 --> 00:13:01,100 So one way to do that would be to edit. you know, you just change the color and it's, you know, pretty simple process. 126 00:13:01,980 --> 00:13:07,380 But when you work with Canva and other graphic design software, 127 00:13:08,340 --> 00:13:15,380 you're able to type in this hex code up here and also create your own, uh, types of colors and. 128 00:13:16,620 --> 00:13:21,220 Absolutely. But so this is like a very drastic change, right? 129 00:13:21,580 --> 00:13:25,620 But hopefully you're able to more easily see the, the text here. 130 00:13:25,900 --> 00:13:34,660 And so this is kind of an obvious example, but it really highlights how subtleties in different color contrast can really affect the information 131 00:13:35,340 --> 00:13:39,980 or create potential barriers with your audience when you want to communicate important information. 132 00:13:41,140 --> 00:13:47,180 Um, so you can you can definitely make your, fliers and your marketing materials. 133 00:13:48,100 --> 00:13:54,180 Esthetically nice and well designed, but I'm still keeping in mind the principles including color, contrast. 134 00:13:54,860 --> 00:13:59,860 And let me see if my employer you can see this. 135 00:14:00,180 --> 00:14:06,940 So this is what the CC tool looks like and uh, undo the color. 136 00:14:08,300 --> 00:14:18,420 So the way it works is you'll be able to use this eyedropper tool or color picker to select whatever color is in the on your screen. 137 00:14:18,860 --> 00:14:27,500 In this case, it's this teal blue color. It gives you the hex, code here, which is the digital code for that specific color. 138 00:14:28,060 --> 00:14:31,860 And then you can also select your foreground color. 139 00:14:32,180 --> 00:14:38,300 In this case it would be like the white text for example. And then once you select that color combination it will give you results. 140 00:14:38,780 --> 00:14:45,990 Right below it will display a sample preview of what that color combination looks like. 141 00:14:46,510 --> 00:14:51,830 And then also right beneath it will give you the wcaG results. 142 00:14:52,350 --> 00:15:02,230 So this is the wcaG 2.1 is the the standard of that you want to achieve for digital accessibility in a at least 4.5, 143 00:15:03,190 --> 00:15:08,360 but ideally 5 to 1 contrast ratio. Right now it's only 1.5 to 1. 144 00:15:08,910 --> 00:15:13,350 So basically what that means. Yeah she's going to go through what it means. 145 00:15:13,550 --> 00:15:14,790 But I'm just going to give it to you straight. 146 00:15:15,470 --> 00:15:22,150 If yes please just click on the little triangle right there on the first black rectangle that says 41.4.3. 147 00:15:24,470 --> 00:15:33,070 If you click on that little triangle at the tip of it. So move your mouse down and then click on the first failure, which is 1.4 right there. 148 00:15:33,310 --> 00:15:36,830 Go ahead and click on that. It tells you what what are you trying to meet. 149 00:15:37,230 --> 00:15:43,550 Right. So she was going to describe it in a different way. But here. So there's a lot of technical information that she's about to give you. 150 00:15:43,750 --> 00:15:50,310 But here is where you go ahead and recall it, right? So basically what it's telling you that it's failing at the very basic level, 151 00:15:51,110 --> 00:15:55,550 and that you want to achieve at least a four and a half to one contrast ratio. 152 00:15:56,550 --> 00:15:57,990 So please continue. 153 00:15:58,550 --> 00:16:06,710 I just wanted to make sure that because I, you know, I don't commit all this to memory, I use as many tools as I can to go ahead and fast track. 154 00:16:07,270 --> 00:16:10,550 Hey, I don't remember what this point. Why is it failing and then proceed. 155 00:16:11,190 --> 00:16:15,030 Now you could get it creative and start moving the sliders at the top. 156 00:16:15,550 --> 00:16:20,910 For what? My match. But I haven't found a lot of success on that because I'm blind. 157 00:16:21,310 --> 00:16:26,870 So for me, everything has to have a lot of contrast and that's why I designed the way I do. 158 00:16:27,790 --> 00:16:33,230 Thank you Alex. And the nice thing about this tool is that it is adaptable based on your own particular preferences. 159 00:16:33,870 --> 00:16:41,480 So yes, I definitely do like to use the color sliders to to adjust and try different combinations. 160 00:16:42,320 --> 00:16:46,240 And when you do that, it provides you with, the. 161 00:16:46,760 --> 00:16:49,400 You know, it kind of in real time, adjust the code accordingly. 162 00:16:50,240 --> 00:16:55,560 And then also, what it does is it shows you like what it would look like down here. 163 00:16:55,960 --> 00:16:59,960 And, and then you can kind of work with different colors to achieve. 164 00:17:01,040 --> 00:17:08,360 Um, just don't try a different one real quick here. And then actually that one's still white. 165 00:17:08,560 --> 00:17:15,120 But once you achieve, uh, the adequate color contrast, the, the, 166 00:17:15,640 --> 00:17:23,280 the red error marks will change to green check marks and it will show you the updated color contrast ratio as well. 167 00:17:23,600 --> 00:17:24,920 So it's a pretty neat tool. 168 00:17:25,440 --> 00:17:35,040 Uh, definitely recommend if you use anything like, Canva or InDesign or, Photoshop, illustrator or any of the Adobe products. 169 00:17:35,680 --> 00:17:39,320 Um, this is a nice tool. Yeah. Those are those are high end Pro Tools. 170 00:17:39,720 --> 00:17:43,760 And I remember when I was in college I didn't have access to those. And even if I work for the university. 171 00:17:44,600 --> 00:17:50,880 So let me tell you one thing this tool works on anything is basically a floating window that you can go ahead and click on anything. 172 00:17:51,240 --> 00:17:58,960 So I've used it on Google Docs, I've used it on word, on Ms. Word docs, I used it on all the high end tools as well, 173 00:17:59,440 --> 00:18:06,520 including sometimes even I clip a little piece of a video just to see if the contrast ratio on maybe something I write on a video. 174 00:18:07,440 --> 00:18:11,200 My work. So you're not limited on like using this on just fliers. 175 00:18:12,000 --> 00:18:16,200 You can use it on other things also. That's right. You can use it on stills like you mentioned. 176 00:18:16,560 --> 00:18:21,120 Alex, if you have a thumbnail that you want to use for a video and it has some text on it, maybe, 177 00:18:21,600 --> 00:18:28,840 and you can you can also use it for that to just to analyze all the different contrast ratios as we move along. 178 00:18:29,080 --> 00:18:33,960 Here's another example. And these are a these are built in Canva templates. 179 00:18:34,520 --> 00:18:44,290 So so just to kind of make the point that Canva and other programs out there have different templates, but they're not. 180 00:18:44,650 --> 00:18:53,090 They're just a starting point. You want to also ensure that you're doing your part to, to keep and and maintain the accessibility of the end result. 181 00:18:53,730 --> 00:18:58,010 So another important element is, uh, is alt text. 182 00:18:58,410 --> 00:19:06,610 And when you're working with images, you want to make sure that an image like this one, for example, that says stay active. 183 00:19:08,010 --> 00:19:13,570 The text itself is not semantic, meaning you can't like highlight it with your cursor. 184 00:19:14,250 --> 00:19:18,890 It's a flattened like JPEG or PNG type of, uh, image. 185 00:19:19,650 --> 00:19:26,450 The same thing as I if like if you're if you have a screenshot of, uh, of some of an image that has text. 186 00:19:27,130 --> 00:19:31,970 So somebody using a screen reader will not be able to detect the text on here. 187 00:19:32,170 --> 00:19:34,170 Now this one is says stay active. 188 00:19:34,730 --> 00:19:44,690 And the way we can, describe that for someone using a screen reader for any images, you want to make sure you fill in the alt text field. 189 00:19:45,130 --> 00:19:50,490 And in Canva, if you right click, there should be an area here that says alternative text. 190 00:19:50,890 --> 00:19:54,650 And this is where you would describe that image. So you would type in a short description. 191 00:19:55,610 --> 00:19:58,730 You want to make sure you include the the on screen text. 192 00:19:59,210 --> 00:20:02,850 So this would be stay active. And then this is an illustration. 193 00:20:04,130 --> 00:20:06,250 Just make it short and simple. 194 00:20:07,290 --> 00:20:14,210 So one thing that I that I also like to do is if it's an impactful image, like right now it's a hand lifting a little weight. 195 00:20:14,490 --> 00:20:23,130 Right. But if you the idea is to convey or now text the same experience as if you were describing it to someone like your mom or your cousin, 196 00:20:24,170 --> 00:20:29,370 your uncle, your aunt say, you know, if it's a meaningful image, you should describe it right now. 197 00:20:29,730 --> 00:20:33,570 The most important part is the text. But don't neglect important imagery. 198 00:20:34,330 --> 00:20:43,220 For instance, if you had somebody sitting at a desk. And if it matters what that person looks like to the topic that you're discussing, 199 00:20:43,700 --> 00:20:50,420 then you should describe, you know, a Latino sitting in front of a monitor on a zoom meeting. 200 00:20:51,020 --> 00:20:55,660 That is better than saying someone sitting at a desk, right? 201 00:20:56,060 --> 00:20:59,740 It conveys more. You do have a limit and you want to limit your alt text. 202 00:21:00,660 --> 00:21:04,500 Um, you don't want to go ahead and have a whole paragraph prose, but whenever possible, 203 00:21:04,900 --> 00:21:08,420 if it's a meaningful image, try to be brief and explain it a little bit. 204 00:21:10,820 --> 00:21:15,540 Thank you. And then, uh, another important element is, headings. 205 00:21:16,340 --> 00:21:23,540 Now in a lot of your marketing materials, you will have headings and you'll have subheadings and different sections for content. 206 00:21:24,620 --> 00:21:29,660 Now, uh, one common thing to do is to just kind of stylize the text or for example, 207 00:21:30,100 --> 00:21:38,740 this nurturing physical health heading, if it's just, styled by size and bold and color. 208 00:21:39,620 --> 00:21:45,140 That's that's fine. But it but for a screen reader will not necessarily detect that as a heading. 209 00:21:45,620 --> 00:21:50,620 So whichever software you're using you want to look for heading styles. 210 00:21:51,620 --> 00:21:59,900 Now in Canva there are some there's a title subtitle, headings, subheading, etc. and they're all in a chronological order. 211 00:22:00,420 --> 00:22:06,620 So you wouldn't want to use title for something that's like clearly a, you know, a subtitle, for example. 212 00:22:07,220 --> 00:22:15,860 And you want to make sure that you begin with the top level heading and then, use the remaining ones in, in that order. 213 00:22:16,900 --> 00:22:20,260 Uh, and so this is also something you might be familiar with if you were to, 214 00:22:20,460 --> 00:22:28,420 if you work on word documents or Google Docs where there are heading styles, and there there's a specific purpose for that. 215 00:22:28,620 --> 00:22:34,260 And, and part of that is if someone is using, a keyboard or tabbing navigation, 216 00:22:34,860 --> 00:22:38,580 you're able to kind of skip sections and just go straight to the headings and subheadings. 217 00:22:39,340 --> 00:22:45,860 So whenever possible you want to make sure you pay attention to to that as well. 218 00:22:47,820 --> 00:22:54,780 So just to kind of recap a little bit, when working on marketing materials for digital fliers or announcements, 219 00:22:55,820 --> 00:23:05,220 make sure that you verify you have proper color contrast with text and other important informational elements, and you can use the CC tool for that. 220 00:23:06,100 --> 00:23:13,180 You want to avoid screenshots or image flattened images that contain a lot of text, 221 00:23:13,820 --> 00:23:17,780 because that information will not be conveyed unless you include it in the alt text. 222 00:23:18,220 --> 00:23:25,660 That's meant to be just like a brief, brief description. You do want to make sure you include alt text whenever possible on your images. 223 00:23:26,460 --> 00:23:31,900 So you imagine that you know, you pay for these tools, the advanced tools, and you get some for free. 224 00:23:33,630 --> 00:23:38,070 Here's the here's the punchline. Everything you create is not going to be accessible when you save it as a PDF. 225 00:23:38,910 --> 00:23:43,510 So the advice is, if you need to create a PDF, it needs to be accessible. 226 00:23:44,630 --> 00:23:51,270 That requires a high end tool like Acrobat Pro, or there's other two other tools that I can think of out there. 227 00:23:51,910 --> 00:23:55,150 Acrobat Pro is both for Mac and Windows, and that's cost some money. 228 00:23:55,510 --> 00:23:59,390 But if your department is going to go ahead and pay for this, then they get a discount. 229 00:24:00,470 --> 00:24:01,110 I don't sell the software. 230 00:24:01,470 --> 00:24:08,830 I'm just letting you know every single thing that you create, including non Adobe products as a PDF is not accessible as a default, 231 00:24:09,230 --> 00:24:13,470 even if you do the best to go ahead and put all your headers and all your paragraphs or all your tables. 232 00:24:14,150 --> 00:24:17,470 It is a manual painful thing to do. 233 00:24:18,470 --> 00:24:24,750 Um, so what do you do? Well, if these are going to be printed, it is okay to create a PDF for printing purposes. 234 00:24:25,510 --> 00:24:29,750 To share, however, is not really recommended. 235 00:24:30,350 --> 00:24:34,750 If you have a post, However, then you can get creative and describe it. 236 00:24:34,990 --> 00:24:41,430 And we're going to show you a couple of things. But if this is a flier print is for PDF is for print. 237 00:24:41,870 --> 00:24:46,670 It's not to share it. If you want it to share it, then it would have to be a version that would be fully accessible. 238 00:24:47,230 --> 00:24:51,910 And for that, again, I'll remind you you're not alone and we're not going to cover how to remediate a PDF. 239 00:24:52,390 --> 00:24:59,590 It's just too broad. Each and one of us has to take 18 hours of training just to begin to get our hands around that issue. 240 00:25:00,030 --> 00:25:04,230 And of course, you could always pay somebody to remediate it for you, but not us. 241 00:25:06,430 --> 00:25:14,390 If you are interested in learning more about PDF accessibility in our resources, we'll have links to LinkedIn learning as a great resource. 242 00:25:15,390 --> 00:25:19,390 And and that's and there's some great training on there. You can. It's self-paced. 243 00:25:19,990 --> 00:25:27,430 So you can take a little bit out of time. Okay. So next we're going to talk about accessibility for your videos. 244 00:25:28,510 --> 00:25:32,480 One important aspect of this is to make sure that captions are included. 245 00:25:32,920 --> 00:25:37,680 If you have dialog, if you have a voiceover. It's basically someone speaking in a video. 246 00:25:38,160 --> 00:25:42,320 And there are different ways to do that. There are two commonly used methods. 247 00:25:42,760 --> 00:25:50,280 One is open captions and the other one is closed captions. So these are a little bit different closed captions you can toggle on and off. 248 00:25:50,440 --> 00:25:55,840 You may have seen like the little CC label. And I'm going to show a couple of examples. 249 00:25:56,600 --> 00:26:02,960 So open captions are basically like built in right into the, the video footage. 250 00:26:03,600 --> 00:26:07,160 So as the viewer you're not necessarily able to like turn them on and off. 251 00:26:07,440 --> 00:26:13,040 They're just kind of in the footage itself. So, let me bring up this example. 252 00:26:17,400 --> 00:26:19,320 So this is from a commercial. 253 00:26:22,360 --> 00:26:28,880 Regardless of what type of captions you use, you want to make sure that it doesn't obscure anything else important like other text, 254 00:26:29,520 --> 00:26:36,680 whether that's a logo, somebody's face, you know, and and sometimes it's impossible to frame it perfectly, 255 00:26:37,360 --> 00:26:42,920 but you want to just make sure that your captions are, you know, easily visible on the screen without obscuring, 256 00:26:43,680 --> 00:26:47,640 you know, any important elements or information that might be going on. 257 00:26:48,000 --> 00:26:53,200 So that's one example. And then for Instagram. 258 00:26:54,760 --> 00:26:59,480 So one thing to understand is some of these tools already have built in to and 259 00:26:59,760 --> 00:27:03,160 and this is like a recent development because they see the writing on the wall. 260 00:27:03,360 --> 00:27:04,200 The writing the wall is this. 261 00:27:05,640 --> 00:27:12,640 The government hasn't been purchasing and using some of these tools, not because they're not great tools just because they're not accessible. 262 00:27:13,360 --> 00:27:16,040 Well, education is about to join them next year on April. 263 00:27:16,560 --> 00:27:24,480 So if they don't change their ways and they have they're making advances on some of these tools, then we might not be able to use them. 264 00:27:24,680 --> 00:27:31,290 Right. So they quickly have seen the light and they are providing ways to make sure that there's enough contrast on your captions, 265 00:27:31,730 --> 00:27:35,330 or that at least they have captions. So go ahead. And that's right. 266 00:27:35,730 --> 00:27:38,810 Yeah. And whenever possible, closed captions are generally best. 267 00:27:39,610 --> 00:27:45,050 But if the platform or tool you're working with does not yet allow for closed captions, 268 00:27:45,810 --> 00:27:53,130 and you can create you can create open captions, which again, are the ones that are like right on your your footage. 269 00:27:53,770 --> 00:28:04,210 And Accessible Social is a website that has some really great suggestions, recommendations and examples for creating accessible social media content. 270 00:28:04,730 --> 00:28:12,650 And they have a list of different, different mobile apps that you can use for creating open captions. 271 00:28:13,370 --> 00:28:19,770 And one of the common ones is, cap cut. There's a few other ones here, that can help you do that. 272 00:28:20,170 --> 00:28:27,450 And you can choose like different styling methods. And, you can add contrast by adding a background to your captions. 273 00:28:28,170 --> 00:28:37,690 And then I'm going to show you an example for Instagram. And this is we'll include the, the creators handle on the slide deck as well. 274 00:28:38,250 --> 00:28:45,530 And, this is how you create, uh, captions. Turn on the sound like this. 275 00:28:46,490 --> 00:28:54,690 See screen. Adding closed captions is great for any video that you share on social media, and Instagram. 276 00:28:55,370 --> 00:28:58,450 Makes it super easy to auto caption your videos. 277 00:28:58,890 --> 00:29:06,090 And this little video tip is going to show you how. Just kind of recap here. 278 00:29:06,890 --> 00:29:12,250 So again tips for video captions. You do want to make sure you include those if they're especially if you have dialog 279 00:29:13,170 --> 00:29:19,250 voiceovers and pay attention to the framing and the placing of the caption text. 280 00:29:20,210 --> 00:29:25,650 If you can edit, customize, and correct any automated auto generated captions you want to make, 281 00:29:25,890 --> 00:29:30,260 you want to make sure to do that because auto generated captions can can fail. 282 00:29:30,540 --> 00:29:32,700 They can have contain errors and grammatical issues, 283 00:29:33,340 --> 00:29:40,380 and also ensure there is sufficient contrast with the background so that your viewers can easily read the captions. 284 00:29:41,220 --> 00:29:47,660 And you want to also refer to your specific platform's current accessibility resources and guidelines. 285 00:29:48,260 --> 00:29:56,060 For any updates, see what the what's new? If they have a new tool and there's always, you know, different updates depending on the platform. 286 00:29:56,580 --> 00:30:00,820 So definitely check that out for your specific use case. 287 00:30:03,500 --> 00:30:07,740 So next let's talk a little bit about how to format your social media copy. 288 00:30:08,660 --> 00:30:16,220 And this includes hashtags which are common across a lot of social media types of posts. 289 00:30:17,460 --> 00:30:21,580 On Instagram for example, you see a lot of hashtag use. 290 00:30:22,180 --> 00:30:25,540 And here are a couple of different formatting examples. 291 00:30:26,940 --> 00:30:33,300 On the first bullet point here, you'll see that the hash tags are all written in lowercase. 292 00:30:34,580 --> 00:30:44,060 We have UCSB, all lowercase gauchos, strong UCSB athletics, and upcoming events, all of these in lowercase. 293 00:30:44,860 --> 00:30:55,820 And then right beneath that on the next bullet point, we have a different type of style, and this is commonly known as camel case. 294 00:30:56,780 --> 00:31:03,780 You might also recognize it as title case, which you might use in like one of your research papers, 295 00:31:04,300 --> 00:31:10,780 for example, where the first letter of every keyword is capitalized like the title of a book, 296 00:31:10,980 --> 00:31:20,500 for example, or the title of a research article, we strongly recommend you use title case or camel case for your hashtags in your social media posts. 297 00:31:21,340 --> 00:31:27,980 The reason for this is that camel case is a lot friendlier to assistive technology like screen readers. 298 00:31:29,220 --> 00:31:37,540 The voicing of camel case hashtags sound a lot different, a lot clearer, a lot more discernible than the lower case. 299 00:31:38,020 --> 00:31:42,060 And I will do a brief demo on this. 300 00:31:43,340 --> 00:31:44,380 See how we're doing on time. 301 00:31:45,180 --> 00:31:52,220 So again, I also want to remind you that they are already some hashtags that you can look at at the branding website from UCSB, 302 00:31:52,980 --> 00:31:59,940 where they would ideally want you to include those hashtags as well. We want to make sure that UCSB is represented well on your organization. 303 00:32:00,700 --> 00:32:06,020 So you know b b b be friendly. Go ahead and use some of those hashtags that have been recommended. 304 00:32:07,300 --> 00:32:16,340 Okay. Next he's going to go ahead and show you a demo on how it is experienced by a person who is listening to what you just wrote. 305 00:32:18,180 --> 00:32:23,750 Okay, so this is a recording using a Nvda screen reader. And see if you can tell the difference. 306 00:32:26,030 --> 00:32:29,950 UCSB Gauchos strong UCSB Athletics. 307 00:32:30,750 --> 00:32:39,950 Upcoming events. Okay, so that was the title case or camel case with the capitalized first word in acronym, and the next will read all lowercase. 308 00:32:43,750 --> 00:32:47,230 L just wrong. Oxford Athletics upcoming events. 309 00:32:50,390 --> 00:32:58,070 So as you can hopefully tell, there's a difference. UCSB specifically is voiced in a very kind of abrupt short and I could not tell. 310 00:32:58,470 --> 00:33:02,230 I would not be able to tell that the hashtag was in fact UCSB. 311 00:33:03,550 --> 00:33:05,310 Um, just with a screen reader alone. So. 312 00:33:06,190 --> 00:33:16,310 So that's another tip for how to improve accessibility when you're working with your, with your text, uh, on on your different posts. 313 00:33:18,510 --> 00:33:25,230 Um. A couple of other tips you want to avoid. 314 00:33:26,630 --> 00:33:33,510 Forest formatting and using random upper lowercase ses for, you know, just for for esthetic purposes. 315 00:33:34,950 --> 00:33:39,510 And here's a couple of examples. What I mean by that. 316 00:33:39,870 --> 00:33:45,590 And Accessible Social has this example of forced formatting. 317 00:33:46,230 --> 00:33:50,550 And in the thumbnail here it's showing basically two columns. 318 00:33:51,110 --> 00:33:56,230 But the the effect is, is created by using spacing or tabs. 319 00:33:56,830 --> 00:34:02,510 And that creates a kind of a false column is read differently if you're if you're just kind of reading it, 320 00:34:02,990 --> 00:34:05,510 um, visually as opposed to with a screen reader. 321 00:34:05,950 --> 00:34:11,990 So in this case, the screen reader did not detect this space or even that it was meant to be read in two columns. 322 00:34:12,990 --> 00:34:18,550 In some cases, a screen reader might actually utter like blank, blank, blank flavor or tab. 323 00:34:18,830 --> 00:34:22,920 Tab tab. So which is very annoying, for someone using assistive technology. 324 00:34:23,520 --> 00:34:29,760 So you want to make sure you stick to, like, traditional formatting. And another, you know, here's one more example. 325 00:34:30,840 --> 00:34:34,080 And this one is using a random stylized of text and capitalization. 326 00:34:38,840 --> 00:34:41,920 So this is from an ex post. It says Instagram. 327 00:34:42,560 --> 00:34:47,960 Today we're introducing face filters. And then and then right below that there's a second line. 328 00:34:48,320 --> 00:34:55,240 Snapchat. Today we're introducing face filters but with very randomized capitalization and varying cases of the in the text. 329 00:34:55,760 --> 00:34:59,520 This is what the two lines sound like. So the first one is the Instagram. 330 00:35:00,960 --> 00:35:05,160 Instagram. Today we're introducing face filters. That's pretty straightforward. 331 00:35:06,240 --> 00:35:14,040 And the next 1T0DIWEREINTR02CNGFACE filter view media. 332 00:35:16,200 --> 00:35:21,200 So if you were announcing like an important event or something with like, very like whimsical textiles. 333 00:35:22,280 --> 00:35:22,920 That would be very. 334 00:35:23,720 --> 00:35:31,120 That would be impossible to really detect if you're using that kind of, formatting like zeros instead of, Capital O's, etc.. 335 00:35:31,640 --> 00:35:38,600 So you want to avoid that, whenever possible. Okay. 336 00:35:38,880 --> 00:35:42,000 In just a couple of, notes on, uh, emojis. 337 00:35:42,640 --> 00:35:48,880 So emoji is pretty common across different platforms. They can be fun and but you want to use them in moderation. 338 00:35:49,640 --> 00:35:57,480 You don't want to overuse emojis. And the reason for that is because screen readers read aloud all of these in different ways. 339 00:35:57,720 --> 00:36:06,280 And so when you have a bunch of emojis, like at the beginning of your post, at the end, in the middle, it really creates that kind of disruption. 340 00:36:07,120 --> 00:36:14,840 And, I don't have specific examples of this, but for, for general best practices, you want to kind of use them, you know, 341 00:36:15,160 --> 00:36:22,090 in moderation and, preferably at the end of your post or copy as opposed to like all throughout, you know, scattered throughout your post. 342 00:36:22,490 --> 00:36:30,010 And then, uh, one other resource for this is emoji pedia is a is a website that, 343 00:36:30,570 --> 00:36:39,170 contains basically a library of all the different emojis and their, their meanings and their shortcuts and different use cases, etc.. 344 00:36:39,610 --> 00:36:42,610 So that's just kind of a fun site. You want to see a fun sample? 345 00:36:43,250 --> 00:36:51,570 If you want to see a fun example of this, accessible social has a good example from, uh, tweets and by Taylor Swift, and it's hilarious how it reads. 346 00:36:51,930 --> 00:36:55,850 So I'll let you explore that on your own. So yeah, explore that on accessible social com. 347 00:36:56,210 --> 00:37:01,290 They have a lot of other great examples. As well. 348 00:37:01,810 --> 00:37:06,970 Okay. So we're going to touch a little bit about on web content and uh website best practices. 349 00:37:07,850 --> 00:37:13,650 If you're if you edit or create content on UCSB websites, most likely you'll be using Drupal. 350 00:37:14,010 --> 00:37:20,090 And that's the content management system or CMS, that we use on campus, but, um. 351 00:37:21,010 --> 00:37:24,170 But basic principles apply if you're using other systems as well. 352 00:37:24,410 --> 00:37:30,530 Like WordPress or Squarespace or anything else. And I'm going to just show you a little bit of. 353 00:37:32,330 --> 00:37:36,690 Just real quickly, an example of when you edit content on Drupal. 354 00:37:37,410 --> 00:37:43,010 In this case, I'm going to edit a page in the accessibility site, but I'm going to main content. 355 00:37:44,970 --> 00:37:51,810 And I'm going to choose one of these. So again, the intent of showing you this example is not to teach you how to do this. 356 00:37:52,090 --> 00:37:54,450 So we're making the assumption that somebody else is going to show you this. 357 00:37:54,850 --> 00:38:00,530 But once you get to the place where you're going to edit a block, we want to go ahead and make you aware of certain things. 358 00:38:00,970 --> 00:38:06,570 So once you hit that edit on that block that you're going to edit, you will see a couple of things. 359 00:38:06,810 --> 00:38:13,890 And we want to make a big deal about those things. These are recording items. 360 00:38:14,290 --> 00:38:20,940 But okay well, we'll look at this. So what we have here is, some body text. 361 00:38:21,380 --> 00:38:24,420 So this is a pretty typical you'll you'll have body text. 362 00:38:24,700 --> 00:38:32,020 You'll have, uh, you'll have maybe a bullet list. So when you're using bullet or number list, you want to make sure that you use the actual, 363 00:38:33,180 --> 00:38:39,540 um, little bullet formatting icon here as opposed to just like, uh, dashes or hyphens. 364 00:38:40,500 --> 00:38:46,700 Um, same thing if you're if you're using a number list, I won't say this, but, you want to use the, the native, 365 00:38:47,500 --> 00:38:54,420 um, formatting for numbered list or bullet list and you don't want to just type in one and then period space. 366 00:38:54,780 --> 00:38:58,460 And sometimes it will auto format it for you, but other times it won't. 367 00:38:58,700 --> 00:39:06,300 So make sure that you, use the proper formatting if you're using standard like if this if I'm highlighting the first line here, 368 00:39:06,580 --> 00:39:10,980 we recommend the documents approach compliance. And this is a standard paragraph. 369 00:39:11,580 --> 00:39:18,940 However if you were using headings going back to, heading styles like we talked about when working on Canva. 370 00:39:19,900 --> 00:39:23,460 You want to make sure that you're using the proper heading structure. 371 00:39:24,180 --> 00:39:32,340 So the the title of the page on my fast scrolling here will be, uh, this one doesn't say, digital accessibility. 372 00:39:33,500 --> 00:39:40,100 That will normally be the, the heading one. So then the next heading in chronological order would be H2. 373 00:39:40,620 --> 00:39:46,460 So if this were a heading, you would mark it it, you would, uh, format it as a heading to. 374 00:39:46,940 --> 00:39:54,140 And then if you had a subheading down here, you, you would select heading three and so forth. 375 00:39:55,060 --> 00:40:04,220 Um, so I'll undo this, but, but when you're working with your content editor, just keep an eye out for headings and for, 376 00:40:04,940 --> 00:40:10,820 um, for that, if you're, if you're comfortable with HTML, you can access the HTML. 377 00:40:11,380 --> 00:40:15,630 And we'll mark, you know, if something's a paragraph or something as a heading with your tags. 378 00:40:16,270 --> 00:40:21,390 So accessibility is important no matter what system you're working on. 379 00:40:22,150 --> 00:40:30,190 And particularly with websites as well. So the one thing to kind of keep in mind and this is a rule, okay, 380 00:40:31,190 --> 00:40:38,910 if there's a button on the application that you're using to add headings or formatting bullets or, or even moving the text. 381 00:40:39,190 --> 00:40:39,590 So that's indented. 382 00:40:40,230 --> 00:40:47,790 You don't use the tab, you don't use the spacebar, you don't use your special technique of adding the bullet by doing Ctrl shift asterisks or eight. 383 00:40:49,190 --> 00:40:54,630 What you do is use the buttons. So this goes for Google Docs, Microsoft Word, and things like this. 384 00:40:54,870 --> 00:40:59,110 If you have an editor, use the editor buttons available in the pull down options. 385 00:41:01,110 --> 00:41:05,990 Yes, and if you have the option to change like make a text bold and make it larger, that's fine, 386 00:41:06,230 --> 00:41:11,390 but make sure that if it's a heading, it's marked, uh, accurately as well with the correct tag. 387 00:41:12,550 --> 00:41:20,710 okay. And then also. Oh, just quick mention as well, if you're adding media, if you're adding an image, for example, 388 00:41:20,910 --> 00:41:27,510 when you insert the image, it will make sure that you have that you accurately include the alt text. 389 00:41:28,230 --> 00:41:38,510 So, if you're adding a some kind of photo to your, to your web page, there should be a space where you can edit and then add an alt text. 390 00:41:38,790 --> 00:41:43,750 If you're if you're working with Drupal, you would click on the Edit Media button. 391 00:41:44,270 --> 00:41:48,990 And then this is where you would type in the description of, you know, walkway on campus. 392 00:41:49,310 --> 00:41:51,790 Sometimes I'll get some auto generated thing and that's okay. 393 00:41:52,070 --> 00:41:58,790 But make sure that you expand upon that corrected, verify that it's accurate, for all your images. 394 00:41:59,310 --> 00:42:02,830 So let me just undo that. Oh, well, she isn't doing that. 395 00:42:03,110 --> 00:42:09,030 Just consider this. All tools will have, you know, just ask Google, you know, where's the alt? 396 00:42:09,630 --> 00:42:13,350 Where can I add alt text for the tool that you're using right for WordPress. 397 00:42:14,390 --> 00:42:17,670 It'll come up. They all have. If they have it, they'll have it. 398 00:42:17,830 --> 00:42:23,830 If it doesn't have it and you have AI turn on on your Google Chrome, then it'll tell you, nope, you can't do that, unfortunately. 399 00:42:24,470 --> 00:42:28,350 And then it'll give you some some link to their accessibility standards. 400 00:42:28,950 --> 00:42:32,190 So if you have a question I you can type it in there. 401 00:42:32,350 --> 00:42:33,430 I think you can unmute yourself. 402 00:42:33,950 --> 00:42:43,110 I don't know how this was configured, but if you want to write down your question, uh, we'll go ahead and uh, try to give you short answers here. 403 00:42:44,990 --> 00:42:48,230 I saw a couple of questions that came up and they were answered in the chat. 404 00:42:49,310 --> 00:42:52,910 One of the questions was, are there any templates? This seems like a lot of work, right? 405 00:42:53,750 --> 00:42:58,070 Here's the irony again, I, I when we started talking about when you create a PDF, 406 00:42:59,070 --> 00:43:06,190 it's when you create a PDF that everything goes through and what, what you have to do. 407 00:43:06,390 --> 00:43:11,440 If you if you're going to insist on creating PDFs, you have to kind of invest some time in learning how to remediate it. 408 00:43:11,840 --> 00:43:19,000 There's no way around it. Now, if you create in a Google doc, then we have already tools that we have acquired one of them, which is Graco, 409 00:43:19,760 --> 00:43:25,080 which will put a link on the presentation which is already there for you to kind of do a first, 410 00:43:26,440 --> 00:43:30,600 first pass at slides and your Google Docs and your spreadsheets. 411 00:43:31,280 --> 00:43:33,000 But that's a different, uh, thing. 412 00:43:33,600 --> 00:43:39,800 Um, the there is going to be a feature in our web page as things you can go ahead and view to know how to use Graco. 413 00:43:40,360 --> 00:43:46,800 So we're not able to cover that today. Now what she's doing, she's looking at the key resources that we're going to. 414 00:43:47,160 --> 00:43:52,040 We're including. And if we haven't including some of them that we are thinking about now, we will add them here. 415 00:43:53,920 --> 00:43:56,920 Any questions? Questions. 416 00:44:00,720 --> 00:44:04,400 Hello? I have a question. Hi, Veronica. Hi, guys. 417 00:44:04,760 --> 00:44:08,560 My name is Veronica. I'm one of the student coordinators for the A's food bank. 418 00:44:09,400 --> 00:44:14,200 Nice to meet you guys. Virtually. Thank you. I was having a question because I use Canva mostly. 419 00:44:15,400 --> 00:44:20,240 Um, and I was wondering for the accessibility of it. 420 00:44:20,640 --> 00:44:25,200 How how should I download a file that I have made on Canva? 421 00:44:25,640 --> 00:44:32,200 Like, should I download it as a PNG or. I know that JPEGs and PNGs are like problematic, but also PDFs are. 422 00:44:32,680 --> 00:44:36,080 So I wasn't sure as what kind of document type should I download it? 423 00:44:36,240 --> 00:44:40,640 As for it to not be flattened. So the answer to that is how are you sharing it? 424 00:44:40,880 --> 00:44:44,920 Are you hoping to share it? Like where? Like on opposed or. 425 00:44:45,280 --> 00:44:51,600 Yes, mostly on posts. on like the Instagram feed is usually what you do. 426 00:44:51,920 --> 00:44:56,960 So what do you want to do on the the, the so a lot of the tools have an alt right. 427 00:44:57,320 --> 00:45:05,320 So if you bring in as a PNG on the alt, hopefully you don't have a lot of a lot of text there or on the post itself, right? 428 00:45:05,920 --> 00:45:09,970 For instance, if you're announcing a Exercise today at noon at the Compass Quad. 429 00:45:10,770 --> 00:45:14,890 Right. That's what you probably is about. See you there at 12 noon. 430 00:45:15,370 --> 00:45:20,010 Then what you do is, you know, you type that out and then hashtag healthy at UCSB. 431 00:45:20,610 --> 00:45:24,450 Hashtag whatever. Camels. So that would be how I would address it. 432 00:45:24,850 --> 00:45:34,690 If you plan to distribute it as an attachment on like a mass email, then that's problematic because then as an attachment you, 433 00:45:35,130 --> 00:45:38,690 you will you have the ability of that alt text on some tools but not others. 434 00:45:39,850 --> 00:45:43,490 Does that answer your question? Yeah, yeah. Thank you very much. 435 00:45:44,130 --> 00:45:47,410 Yeah. So if you're saying it as an email or like the the flattened one, 436 00:45:47,730 --> 00:45:55,570 that wouldn't not be like your primary source for that information, you want to include the text along with it, the semantic text. 437 00:45:56,010 --> 00:46:00,610 And you want to make sure that all the relevant information in the correct order is all included on there. 438 00:46:01,090 --> 00:46:09,530 That way you're not, you know, unintentionally excluding somebody who would not be able to access it from access those details from the flatten, 439 00:46:10,530 --> 00:46:13,890 um, from the, you know, JPEG or PNG and if, 440 00:46:14,130 --> 00:46:18,890 if, if you do download a PDF, I mean, that's, that's fine if you want to keep it for yourself or for print, 441 00:46:19,770 --> 00:46:23,090 um, but for distribution, it would need to be remediated first. 442 00:46:23,410 --> 00:46:27,050 And then feel free to schedule a consultation with with our team. 443 00:46:27,250 --> 00:46:31,650 And we'd be happy to kind of show you some of the some of the basic steps for for that process. 444 00:46:32,290 --> 00:46:36,250 It's a little lengthy or not. The it's not the easiest, but but it's definitely an option. 445 00:46:37,690 --> 00:46:41,610 Okay. Thank you very much. So I see a question. Any tips on accessible emails. 446 00:46:43,090 --> 00:46:46,730 Uh, so we have this program that UCSB bought and not everybody has access to it. 447 00:46:46,850 --> 00:46:53,330 But you as an organization might consider asking, uh, it's called Emma, which allows you to create semantic HTML emails. 448 00:46:53,810 --> 00:46:56,170 So that'll look really pretty. You probably got in some of those as newsletters. 449 00:46:57,290 --> 00:47:02,410 Uh, that is a real conversation that your organization might want to have, uh, with, with them. 450 00:47:02,970 --> 00:47:06,180 Because, you know, if it's a simple email, right? 451 00:47:07,020 --> 00:47:11,140 We don't have the ability to put headings. We don't have the ability to do. 452 00:47:11,740 --> 00:47:15,500 You know, sometimes I bolt something in the middle of the sentence, etcetera, etcetera. 453 00:47:16,780 --> 00:47:21,100 My advice is going to be the same. Use the buttons in terms of accessibility. 454 00:47:22,100 --> 00:47:28,900 If I was describing a word document and I had used the spacing and the buttons that I have accessible in the toolbar and share it as a word document, 455 00:47:29,340 --> 00:47:35,420 it would be closer to be accessible than if I were to export it to the PDF. That creates like a huge problem. 456 00:47:37,380 --> 00:47:41,220 Is this on the UCSB website? What is this the presentation? 457 00:47:42,220 --> 00:47:50,020 We'll, we'll we will go ahead and share the the the again, the link to our web page where you can find this information, the deck and all that. 458 00:47:50,220 --> 00:47:54,460 It'll be a recording with all the pertinent information. Oh my program. 459 00:47:55,660 --> 00:48:05,580 Uh, no, uh, not on our website. Uh, that is a program that, uh, maybe, uh, your advisor would go ahead and inquired about with branding. 460 00:48:07,940 --> 00:48:13,660 Stephanie Raia has a question. Please feel free to unmute yourself or hi. 461 00:48:13,860 --> 00:48:19,980 Yes, chat. Thank you. you kind of already were answering my question with the response that Alex was just giving. 462 00:48:20,540 --> 00:48:23,660 Um, but my name is Stephanie. I'm coming from the care and health and wellness departments, 463 00:48:24,420 --> 00:48:28,300 and we do have weekly newsletters that we send out through the health and wellness department. 464 00:48:28,820 --> 00:48:30,860 So I think now I'm just having a lot of questions, 465 00:48:31,380 --> 00:48:37,420 and it's a little hard to wrap my mind around all of the different features we'll have to look over when sending out this newsletter, 466 00:48:37,900 --> 00:48:44,540 because we're sending out fliers and sharing images. So but this is also really my first time hearing about Emma. 467 00:48:44,860 --> 00:48:48,580 So it sounds like I just need to make an appointment with you all to have more of my guests. 468 00:48:48,860 --> 00:48:52,820 Yeah. Yeah, definitely. You have a if you have a sample or a draft and feel free to share it. 469 00:48:52,980 --> 00:48:57,700 Um, we have departments on campus like big departments that like regularly scheduled. 470 00:48:58,300 --> 00:49:03,070 Yes. That regularly scheduled consultation with us and bring they bring their newsletter drafts and we can, 471 00:49:03,310 --> 00:49:06,550 like, walk through it and, provide some, some recommendations. 472 00:49:07,270 --> 00:49:12,390 I know we're out of time really quickly. I wanted to mention a couple of tips that we didn't get to in the presentation, 473 00:49:13,030 --> 00:49:18,270 but for this applies to emails as well websites and and different texts. 474 00:49:18,710 --> 00:49:22,830 So avoid the click here that you see everywhere like click here, click here. 475 00:49:23,310 --> 00:49:27,310 That is a that's a big one if I can if I can share any any tips like that would be a big one. 476 00:49:27,590 --> 00:49:32,670 Don't. If if you're sharing a link to a newsletter or a website, describe the website. 477 00:49:33,150 --> 00:49:42,150 Just say this is, you know, UCSB branding. And some great examples are have Stephanie Corwin has shared, uh, all of the resources in the chat. 478 00:49:42,710 --> 00:49:50,990 Notice how it's not like a long URL that's, you know, like, you know, three, three lines long and then just obscure, text. 479 00:49:51,390 --> 00:49:55,670 It's it, it's hyperlinks telling you directly where the destination is. 480 00:49:56,230 --> 00:50:00,870 So YouTube example, Instagram real example, etc.. our workshops page. 481 00:50:01,230 --> 00:50:06,550 So use the descriptive and destination for your hyperlinks and avoid the click here. 482 00:50:07,310 --> 00:50:11,030 A common one. So that's that's that's a one. yeah. 483 00:50:11,310 --> 00:50:16,870 Phrases like that listen everywhere where you type, when you type links, take that lesson everywhere. 484 00:50:17,350 --> 00:50:21,470 Use that everywhere. If you're able to insert a link, tell us where it's going to take me. 485 00:50:21,990 --> 00:50:28,430 Don't give me the link. And yes, I know whenever you have to print something, you might want to go ahead and put the actual link right. 486 00:50:28,870 --> 00:50:30,470 Well, that's an exception. You're going to be printed. 487 00:50:31,070 --> 00:50:37,550 People can't click on it, but if people can click on it, you should write it as if they were knowing where they're going. 488 00:50:38,270 --> 00:50:44,070 And it's also going to set you apart if you include that best practice in like your resume and it's just presentation, 489 00:50:44,790 --> 00:50:48,030 it's just a lot, it's a lot better format overall. Yeah. 490 00:50:48,310 --> 00:50:52,430 Sorry, I didn't mean to interrupt. Please. Also, shoreline is excellent because it's HTML based. 491 00:50:52,990 --> 00:50:58,270 So for shoreline accessibility and how accessible that is, contact them directly. 492 00:50:58,990 --> 00:51:04,280 I'm sure they're already thinking about this. and they have some controls in place where any advice that they can provide you. 493 00:51:04,560 --> 00:51:11,400 But yeah, short line is great because it's already as a default HTML. Okay, we're going to stick around in case anybody ask questions. 494 00:51:11,840 --> 00:51:17,760 But thank you for your time. And and again we'll go ahead and be sharing uh, the link to this. 495 00:51:18,320 --> 00:51:21,760 We have emails for people that register right here and said that we're coming. 496 00:51:22,000 --> 00:51:27,520 And we also will be posting all this information front line on our training web page, uh, 497 00:51:27,720 --> 00:51:32,280 on the link that was provided for you at the very beginning and for one last time, 498 00:51:32,480 --> 00:51:36,040 we'll provide it one more time so you know where to go ahead and and go. 499 00:51:36,920 --> 00:51:41,400 Um, this is an example where we have to actually write it out, right, so that you can see it. 500 00:51:42,160 --> 00:51:46,200 Um, but, thank you for your time. Thank you very much. 501 00:51:48,480 --> 00:51:52,480 Thank you. I will definitely be making an appointment with you guys. Sounds good. 502 00:51:52,960 --> 00:51:55,600 Have a great rest of your week. You too. Thank you.