- My name is Jane Lee and I am the digital accessibility specialist for the College of Engineering. And thank you for coming to this inaugural accessibility Fix-it Clinic. Today I'm going to go over the accessibility tools that are available in Canva.  

Canva's a popular graphic design tool that makes it easy for people to create digital materials. I know people who have used it to make posters and flyers, social media posts, all sorts of very, actually, very pretty, pretty things. And we want to make sure that we give everyone the ability to access the information or story that you're trying to share with your Canva creations. Okay. So we want to make sure that things are as accessible as they can be. But before we jump into Canva itself, I do want to show you two short video clips. 

- Image, image. - Oh no, there's an image. What if that was an assignment or some kind of due date or, or a text box where I was supposed to put my name or something else? 

- For people who can't see images, you need to describe them using something called alt text 

- Graphic person cheating on the Scantron exam, copying answers from notes. - This is not about how does it look? We're really looking for a functional description. What is it? Why is it there? 

- Let me play that. The, just the beginning of that video in case you missed the initial screen reader talking 

- Image. - Image, oh no, there's an image. What if that was an assignment or some kind of due date or, or a text box where I was supposed to put my name or something else? 

- Okay, let me go to the second video that I wanted to show you. 

- This is a PDF version of a poster for an event that was happening on campus. And I wanted to look at the poster to see like what events are going on. And I opened it up and realized, oh, this background with the way the font colors and the background color, it was really hard to read 'cause there's not a lot of contrast. And so I thought, oh, I'll just copy and paste the text and post it into a Word document and I could just, you know, read the text that way. But when I try to make it accessible, the program's not able to do it because there's something in whoever created this document that's not allowing it to be made accessible. So I'm not even able to convert it myself. Not only could I not see the information 'cause of the contrast issue of the con color and the background color, but I couldn't access the information in another way to, to make, to put into a format that I could see. And it made it really frustrating that I'm like, well, I don't know what's going on with this event then. 

- So you can see that the design choices we make and the, the effort that we put into accessibility really can have a big impact on people's ability to access information. 

In the first video, it was the absence of alt text or alternative text that really made it so that the student, you know, the screen reader told her that there was an image there, but she had no idea what the content of that image was. 

Let me change my camera here. There we go. 

The second video was a low vision, someone with low vision who had a real trouble seeing what was on the flyer, the event flyer because of the contrast settings that were used on the flyer. 

So now let me share my screen so we can actually go to Canva and I'll show you how to check for those two things. And a third thing, okay, so here we have Canva and this is just the home, the home screen that you end up on after you log in, I'm going to go to just an example document that I set up. This is a flyer with placeholders for a heading, subheading and some text. There's an image here and there's some more text down here. Let me close this sidebar and bump up the zoom just a little bit or so you can see. So just basic, I'm not going to put in the actual headings and subheadings, but this is a heading that you can pull from this text menu here on the side, subheading. And then that's the body text area. 

Okay, so with Canva, after you've made your content, made it look the way you want, what you want to do is use Canva's accessibility checker. And to get there you go to the File menu to Settings. And then sort of almost at the bottom of this flyout menu, you'll see the whoops, check accessibility design or check design accessibility. Select that and it opens up a panel on the right hand side. And what this is doing is using an automated checker to sort of examine three areas, typography, color contrast, and alternative text. And you can see here that Canva has identified four issues. 

Let's start with alternative text. So I'm selecting that there are two spots on this flyer that Canva is flagging. If I click this, if I select it, it'll highlight the element, it's the the stars that I thought would look nice in the corner. And it's flagging it as no alt text, describes what alt text is. And you have the ability here to add the alt text. Now for alternative text, you're trying to give people who are using a screen reader information about what the image is. In this case, the image is in its stars, but they don't really add anything to the content of, you know, the message you're trying to convey. They're there, there just to look pretty. So for this particular image, I'm going to mark it as decorative. What that will do is it'll tell the screen reader, Hey, this is just decorative. It's not important to the, what the, the content, the true content of the flyer is. So ignore it. After you mark that you can select the Save button, it'll take care of that issue. 

And now we have one left and that is pointing to, as you can see here with the purple outline the photo. Let's go ahead and try to add the alt text for that one. It gives you, Canva gives you this text box here you have up to 250 characters to use to describe this photo. Now this is an interesting little tool that's been popping up in a lot of programs that suggest for me, I think this is, you know, Canva's AI engine that will try to figure out what's going on in this photo. So I clicked that little magic tool and it says a person is planting a potted plant in a pot. Not bad. I guess I might modify that a little bit. Let's see, let just take a stab at it. I'm going to say a person's hands re-potting. A small plant. 

Notice that I didn't say Photo of a person's hands. Repotting a small plant or image of, you wanna leave out those sort of image specific or photo picture of those words because it may, it would be redundant because the screen reader is already going to say, Hey, image. And then it'll just say the alt text. So go ahead and leave those words like image, photo, those kinds of things off alt text and then hit Save and no issues are remaining in the alternatives text section. 

Let's go to view all issues there. And it will, you'll see that we still have two other issues in this checker. Let's go to color contrast next. And it says there's low contrast text. If you select that, you'll see that this tiny, tiny text, let me bump up the zoom there. It's this really small light gray text that is very hard to see. So Canva is suggesting a few different options here that let's, I'll choose the middle one. We'll make it so that the contrast is great enough to be able to see well against the white background. So again, by making that change, it's cleared that issue. 

Let's go to view all issues. You can go there either by selecting this button or selecting this arrow up here. The last one is typography, small text size. So let me click that. Oh, it's that same text area below the photo. And best practice for accessibility is for font sizes to be at least 12 points or 16 pixels in this case. This one, oh it's a 10. Yeah, that's not good. So if I select this, it'll increase it to 12 or I can bump it up even more, make it even more visible there. 

And if I go to view all issues, now I get a happy green check. So Canva, Canva's accessibility checker is saying, okay, this one, this, this flyer of ours is, okay, one thing, very important thing to note though, just because my flyer has passed Canva's automated checker test, it doesn't mean that the flyer itself is fully accessible. The next step I would do is to save this, I would probably save this as a PDF and then I would open it up in Adobe Acrobat and use the Adobe Acrobat checker to sort of verify that the, the PDF is accessible. But that's a topic for another Fix-it clinic. 

I just wanted to focus on Canva in this case. And I guess alt text and color contrast. So I, that was a pretty quick run through here. Does anyone have any questions about what I've talked about so far? Feel free to put it in the chat or just, you can just start speaking. There aren't too many, there's fair number of people, but please feel free to just speak up. 

- I'll, I'll speak up a couple of things. Even though I don't do a lot of direct work on graphic design, just personally that I'm interested in Canva, we have approved fonts for branding and campus, you know, color palette, whatever. And I guess the question is when Canva talks about, you know, makes a suggestion on contrast, do we, I if those aren't necessarily the, the approved branded colors? 

- No, there's, - Does that, I don't know if there's a way that we can reconcile the two, - I think would be the main one. Yeah. Yeah, the, the colors that Canva presents are just suggested, you know, it's suggested by Canva. You can enter whatever color you would like into the, you know, for any element that you're putting on the page. I think there might be a way to actually import a palette, but I'd have to check on that. I'm not sure if that's like a pro level, you know, feature or anything like that. But I can look into that and get and send a message out or get back to you on the color branding palette question. Yeah, canvas suggestions are, it's just doing its best. It's probably looking at the other, the other colors on the page to try to match that. But there is, there, it's fully customizable. You can use any color you want. You just have to make sure that the contrast is good. 

And actually that's a, that makes me think of a very good tool. The Color Contrast Checker. There's a webpage on WebAIM's website. I will put it in the chat that you can enter any two colors and it'll tell you, hey, that's that contrast ratio passes muster with the WCAG, the web content accessibility guideline standards. So I'll put that in the chat. Oh, Laura says that she was able to upload the UC brand Berkeley branding. Okay. Colors and fonts. Excellent. Okay. So I will look into that and I will include that in the screen cast that I make about Canva tools here. 

- Is that just for the pro version or is that Laura or is it like the Canva Pro or can, I don't know how many people are paying to use the Canva Pro or if there's like a, the free version where you could do some of those things. 

- I think you can like upload the colors through the color picker. 'cause it lets you do that. I don't know if it lets you do like a whole branding thing. 'cause we, on the professional one, we have like an entire branding section now that has images and logos and things. So I don't know what, I've only used the Pro. 

- Yeah, I mean there is a, I I don't think Canva Pro is UC Berkeley like staff benefit or anything, right? Is it? It's just you have to, as a unit or as a, you have to make the, you have to subscribe to that if you want the Pro. Yeah, 

- There's not a campus version of it but it's pretty inexpensive. It's like what, $140 for the year or something. 

- Caitlyn also question. Oh sorry. No problem Kate. I would just wanted to mention Caitlyn put a nice image color picker, URL into the chat if anyone is interested in that. 

- Yeah, it's super helpful. 

- The other question had was what is it that Adobe Acrobat would necessarily find that the Canva accessibility checker wouldn't you were talking about? Is that Yes. You want that to be another PDF Adobe Fix It clinic? 

- I think so, because that gets into the weeds a little bit. So it, I can show you, I can show you, let me share my screen. Let me just, I'll, okay, so let me go ahead and go to file download and I don't want A PNG. I want a PDF this time. PDF standard download. It's downloading right now. And then, oh, I think I'm gonna have to reshare. 

Let me open that thing up. So I'm, right now I'm opening the flyer in Adobe Acrobat and let me share this screen now. Okay, so here is our nice little flyer opened up in Adobe Acrobat, which also has an automated checker tool that's more robust. It's in the all tool section, it's called Prepare for Accessibility. And what that gives you is this menu. And I will check for accessibility right now. And what Acrobat does is checks it and then it gives you this little report here. It's flagging two issues with the document. So this, this is always the case. It will makes you, it wants you to check the logical reading order for this flyer and you have to manually check the color contrast. 

But let's see, the other thing, so Canva, when you're going from a, you know, something in Canva to PDF, it does try to create a tagged PDF, which is required for accessibility. I'm gonna look at the tags it created real quick. So these are the tags in this document, this flyer, it has flagged this item as an artifact. Let me see what that is. It doesn't have my, I'm guessing, I'm pretty sure it's this, but heading one, heading two. This is good. This is, it's Canva did a good job there. Body text heading three, oh, I wouldn't call that a heading three. So for accessibility, I would probably go in there manually and change that to a paragraph a P tag. This figure has alt text because we put it in there in Canva. A person's hands reporting a small plant, this is tagged properly. And then, oh, here's that text down here that is correctly tagged as a peak. So there are things that you would need to sort of manually check. 

And also for a more complex creation, the tags can get a little wonky. So you'd have to go in there and fix that. But yeah, I think I'd wanna cover sort of the details of the, the Acrobat checker in another time. 'cause we're already at 11:23. I only scheduled half an hour for this, this Fix-it clinic. Does anyone have, let me try to stop share here. Does anyone have other questions? This is really, I mean this was meant to be open for anybody to ask any question. no question Too small and I, I actually didn't mean to talk for so long. But yeah, we don't have to stay if no one have has any other questions. 

If anyone wants me to show them something with accessibility in a different program. Doesn't have to be Canva, it doesn't have to be Acrobat. Feel free. Or you know, we can just end the meeting early. 

Oh, let me share one more thing, sorry. On the website that we have a11y.engineering.berkeley.edu. I'm starting to sort of build it out under the resources page. There are two, I included two links to some really good websites that talk about alternative text and how to create good alter alternative text. I'll be adding more as time goes on. 

Once I create the screencast for this Canva topic. I'll put it probably under guides on this page right now there's just some placeholder text. But yeah. And on the home, the homepage for this site there is the, there's a link for emailing me or scheduling a consultation. Let me click that one and you'll see that there's this fancy little Google calendar booking page that comes up. And if none of these times work for you, feel free to send me a meeting invite if you have questions. 

So I'll just be hanging out. Feel free to stay, you know, or you know, if you need to leave, no problem. But if anyone come thinks of anything in the next five minutes, I'll just be here waiting for questions. Thanks for coming.