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.