fbpx

Canva Considerations for Accessible Content

Accessibility Podcast Topic Links

Accessibility Podcast Transcript

Dax Castro
Welcome to another episode of Chax Chat. Join Chad Chelius and me Dax Castro, where each week we wax poetic about document accessibility topics, tips, and the struggle of remediation and compliance. So sit back, grab your favorite mug of whatever. And let’s get started.

Chad Chelius
Welcome, everyone to another episode of the checks chat podcast. today’s podcast is sponsored by Chax Training and Consulting. If you’d like your company announced during our podcast introduction, consider sponsoring our podcast transcript. My name is Chad Chelius. I’m going to be certified instructor as well as Director of Training Solutions and Principal at Chax Training and Consulting.

Dax Castro
And my name is Dax Castro. I am Director of Media Productions over here at checks training, consulting. And Chad and I are both certified as Accessible Document Specialists. And if you are more interested in what that is, or what that means, head on over to http://www.accessibilityassociation.org/certifications or membership and become a member of the IAAP, you actually can become a member and there’s a whole chat feature and a forum and you get to meet lots of people. And it’s a really great environment to really chat with some of the best minds and accessibility out there. I really do enjoy having that membership.

Chad Chelius
I would totally agree Dax I mean, there are some really good accessibility discussions over the IAAP, both about document accessibility, web accessibility, video accessibility, like it really runs the whole gamut. And I really do think it’s a really valuable resource. So definitely worth, you know, the membership worth spending some money and, and being part of that organization. Yeah, you

Dax Castro
know, and they do have speakers, they have, you know, there’s there’s online webinars that happen quite a bit. They have an education training database, and a speaker’s bureau, you and I are listed in that speaker’s bureau. And it’s really is a great way and you can join as a corporation or as an individual. I mean, it’s a couple 100 bucks a year, if you’re a student, it’s like less than 60 bucks a year. But definitely, I feel like there’s good value in being a member of IAAP. So yeah, feel free to head on over there.

Understanding Canva

Dax Castro
Chad today, I think we’d love to talk about a program that we’re seeing more and more and more of as people are generating more digital content. And that is Canva. Right? Yep. Yep. And, and Canva is one of those programs where, bless their hearts, they’re trying. And it used to be just a couple months ago, that there was no accessibility tags whatsoever in anything created in Canva. And we actually had a conversation with some of the guys over there at Canva some of the people there and and said, Hey, here’s what’s going on, here’s what we’re seeing, we’re getting a lot more people creating stuff. And they’re asking us, how do we make this candidate document accessible? And Chad? How did that conversation go?

Chad Chelius
Well, you know, before I dive into that, I just want to explain to our listeners that Canva is a browser based design platform, right? I don’t want to call it an application, but it’s thinking about it as sort of like InDesign on the web, right? You know, you know, via a browser, you could create your own account, and it allows you to create all these different products, you know, and and it actually really is quite interesting. And you are able to do some pretty nice designs using the product. But one of the one of the challenges, as Dax has has explained, is that in the early days of Canva, you are able to export to a PDF out of Canva. But the result was a PDF with zero tags whatsoever.

Chad Chelius
And as Dax had said, you know, we had a discussion with some of the folks over there at Canva and explained like how important it is that, hey, if you’re making PDF files, we need them to be tagged. And we recently discovered that Canva has made a change, right? They they’ve upgraded their platform. And now when you export PDFs, there are tags in there. Yeah, right. And so that, of course is step one, right here. Step one of accessibility is we need tags. But as we can tag info and relationships tells us that not only do we need tags, but we need the tags to be appropriate for the elements that the tags are applied to. Yep, and what we’re done recovering is that. Again, it’s progress. But, but the tag structure from Canva is…

Dax Castro
…a mess. I’m gonna say, I’m not I’m gonna rip the band aid off.

Chad Chelius
It’s um, I was I was trying to be politically correct. I was trying to be choose my words carefully. But But yeah, it’s it’s an absolute mess.

Some accessibility is better than no accessibility

Dax Castro
But you know what Chad, you say something all the time “some accessibility is better than no accessibility.” And I want to could I want to give kudos to Canva. Because Canva is they went from nothing to something. And that’s great. And now we’re, you know, there’s some talks about improving that, you know, it’s you got to, you got to start somewhere. And if it just means you’re doing a little bit, do a little bit, and I say this for everybody, add headings and use alt text to very basic things, and your document can wildly improve the level of accessibility of your content. And it’s not very hard.

Dax Castro
Canvas issue is a little bit deeper. It’s about how the technical issue of this document is structured. Word is so much… everybody would agree that word and InDesign are the the economy car and the Ferrari, right, they’re two completely different things both get you down the road, right? Canva, to me is a lot like Publisher versus InDesign, it does a lot of things very simply. It’s not designed to be this accessibility tool. And so when you’re trying to give a unique space, where you can drag and drop anything into any area on the page, have any font really have creative freedom, that’s much different than a Word doc, where everything’s very linear, and things have a very structured order. So it’s understandable that Canvas having some issues with how that content is being exported as an accessible PDF, but I believe they’re going to get there. But for our listeners, I think the big takeaway is right now, if you’re creating content in Canva, realize that you’re going to have to spend a good amount of time stripping that document down and tagging it from scratch.

Progress is progress

Chad Chelius
Yeah, yeah. I’m with you, Dax. I mean, I think the fact that we now have tags out of Canva is a great step forward. But I also feel, and again, I’m, I’m paraphrasing here, but I feel like what happened was, the developers turned on the checkbox on the back end that says, generate tags. And that’s as far as they got, what I’d really love to see him do now is create some meaningful connections between the elements in Canva. And, and the tags because in Canva, there’s literally a command that says Create new heading, Crayola, when I do that, make sure it’s a Heading tag, you know what I mean, at least give me that, you know, I think the figures are out, put his figures, that’s good. I don’t know, if Canva allows me to add alt text to an image, I’m gonna I’m gonna have to take a look at that. I don’t think I got that far in my testing, but But that’s something I should definitely take a look at.

Chad Chelius
But, you know, we had said to the folks at Canva, when we spoke to them previously, we said like, you guys are in a very unique situation. I mean, your product is becoming incredibly popular, with a very large user base. And if you could actually make it so that when they spit out a PDF, that it was reasonably tagged, that’s huge. Yeah, that is a really huge step. So you know, and I think we have a, you know, we’re working on having another call with the folks that Canva and I’m really looking forward to that, you know, looking forward to talking to them about, you know, what they can do to improve the, you know, the, the performance and the tagging, you know, in those PDF files, so I did just do a quick test in Canva. And, and as far as I can tell, there’s no way to add alt text to an image. Again, I have been using Canva for all but an hour, you know, at this time, because I just wanted to create a basic document and do a little bit of testing, but from what I could see, there’s no way to add alt text. So, you know, those are the things those are those I think are the feedback topics that I think are worth, you know, letting the folks at Canva know about.

Dax Castro
Yeah, no, and the good thing is, is that they are listening, right. Yeah, I mean, and that’s really great. Because so many organizations, they just go yep, we’ll put that on our radar. And you’re like, Okay, what does that mean? And then a translation

Chad Chelius
is where We’re not gonna do anything.

Dax Castro
So, so absolutely. Kudos to them for, for doing something. So

Chad Chelius
Yeah, honestly, like I’m looking forward to seeing Canva grow. Right, I’m really looking forward to seeing the progress and, and really looking forward to seeing what what they can do to make this better. Yep. Cool.

Inline and Block-level elements in Microsoft Word

Chad Chelius
So the other thing we wanted to talk about today, Dax was figures, images, right? So figures is the generic term in a PDF, and that includes photos, charts, graphs. Basically, any graphic element is a figure in a PDF. And one of the questions that we had gotten in the PDF accessibility Facebook group was about inline figures versus non inline figures, right? That

Dax Castro
I think it stems from. In Microsoft, you, when you run the Microsoft Accessibility Checker, it tells you that if you don’t have your images inline, it tells you that’s an error. And the reason it tells you that’s an error is because it used to be that when you created when you placed a floating text box, or you placed an image, it was just kind of placed in the ether sphere. It wasn’t really placed anywhere. That that was specific. Now, Microsoft, places it with an anchor, it’s anchored somewhere. And that’s the big distinction. The problem is, the people who fix the anchor part didn’t tell the people who wrote the checker, that now it’s okay, so you still get this warning that your images must be inline. But if you test it with a screen reader, you will find that it does anchor the object where it’s supposed to be, you just have to make sure that where it anchored it is where you intended it to anchor. And that’s the important part.

Chad Chelius
Precisely because the purpose of the anchor is to tell, well, the fundamental purpose of the anchor is to give the image a place to live, right? From an accessibility standpoint, the fundamental reason is that you’re telling it, I want it to be read at this specific location. Right? So, you know, you you typically will anchor it like above or below a heading that way it’ll read the headings, and the figure and then the body of that section. And, yeah, I mean, you know, Word has, really improved that, because it used to be a lot harder to make that happen. Like in Word it almost used to be inline or nothing. Yet now, it’s like, no matter what, you’re anchoring it somewhere. And then depending on the what is it the layout options, right? Where you could tell it to like wrap the text around it or hear it all that stuff, you still have the ability to then say, Okay, I want it positioned over here. But it’s really anchored at this specific spot. Right. And, and that is that is really helpful.

Dax Castro
The problem with that, though, is that it moves text around differently. So if I have in my header or footer, I want to put my logo in a very specific spot, I really only have, when it’s inline, I am bound by the rules and margins of my page, if my text is left justified, or if I… let’s say you had your business name on the left and the logo on the right, right, you can’t have it inline and have that logo beyond the right unless you set a tab stop to move it all the way over to that spot. What typically people will do is place a table in the header footer, and then put text on one side and a logo on the other right, which causes its own set of issues. But so this is the problem. Imagine it’s not in the header footer and it’s somewhere in the body and all of a sudden you use inline your text goes all over the place unless you’re really an expert user at Word and understanding all the controls for how to manipulate your text and columns and column breaks and all of that. It creates a really a big burden on the on the designer to have that image be inline to satisfy the checker and keep the layout that you want, which is why people just use that “not inline” feature so that they can just place it wherever they want. Right and that’s really where all of this stems from. The good thing is Microsoft has fixed how that is accomplish now, and it absolutely puts it in the right place. The problem is the checker still says, Hey, that object doesn’t have a property of inline. So therefore it’s wrong. Right? And we don’t have this problem inside InDesign, right?

Chad Chelius
Well, we do Dax, I mean, we actually do have this problem because in inline, sorry, in InDesign, when you’re dealing with flowing text, right, when text is flowing from page to page to page to page, the only way to get a figure to be positioned at a specific location within that text, is to anchor it. And by anchoring it, what what InDesign will do is it will put, I believe, a <Section> tag or a <Div> tag, I can’t quite remember. But you know, but But basically, what happens is the figure now is inside of the paragraph in the tag structure of the PDF,

Dax Castro
right, so you have a <P> with a nested <Figure> tag inside, right?

Chad Chelius
So Right. So fundamentally, that’s not a problem, right? However, if we’re getting down to brass tacks, right, the PAC Checker could flag that as a problem, the Pat checker is going to give you an error, “inappropriate use of a figure structure element”

Dax Castro
Right, it’ll give you a warning, that’s that yellow triangle. And it’s the warning of “possible inappropriate use.” And in actuality, we get that all the time for anything that is nested inside something else,

Chad Chelius
unless on that figure, you have specified that it is an inline object,

Dax Castro
Right? Because figure in itself is a block-level element. And so maybe we should step back a bit. So yeah, to there are two states that an object can have, it can be “inline” or “block”, right? Block-level element is a first level element, it is the parent element. So usually the only time you have your <Document> tag, right, and then you might have a <Section> or an <Article> tag as a container. But anything inside those is considered a block-level element. And then if you have a block-level element, like a <P> tag, right, and you have a figure inside a <P> tag, that means it’s inline, it’s a subordinate, it’s a child of that <P> tag. And so when it’s in that nested situation, it has to have that placement value set to inline. And unfortunately, InDesign doesn’t really do that it doesn’t set the placement value, right? It could,

Chad Chelius
right. I mean it Yeah. Again, programmatically, they totally could fix this quite easily, right? You know, by just saying like, anytime a figure is anchored, make it inline, right? Just Just point, period dot exclamation point, right? There’s never a question. The problem is, though, that I think the default output value is that it’s a block-level element. And that’s why you get the “inappropriate use of a figure structure element,” because it’s like, wait, the figure is a block-level element inside of another block-level element. I don’t like that. Right. And if you change the placement to be inline, well, that resolves the problem, you know, deal. But conversely, like if you do change the figure to inline, but then you put it as a top level Tag, you’re also going to get an inappropriate use, because now it’s expecting it to be block, you want it set to be inline. So you know, I know a lot of users, a lot of our listeners might also be struggling with how do I know whether it’s should be blocked or whether it should be inline? I can tell you it comes with experience. And and I don’t know if I want to try to make it this simple. But pretty much if you’ve got a tag at the first level of your tag structure, like a tag underneath the document tag, it’s always going to be block. But if you ever put one of those items as a child of another item, then it has to be inline. I do you think I can summarize it that way? Is that kind of

Dax Castro
I think the th e caveat there is <Section> tags don’t have a level, right? Yeah. So if you have <Section>, <Part> , well, <Article>, <Section>, <Part> <Div>, any of those as your first level item, ignore those, right? They don’t have a placement level. So if a <Figure> sits inside a <Section>tag, you might look at that and think, oh, it’s supposed to be inline because it’s this. It’s the child of the <Section>, but that’s really the you know, It’s the the exception because container tags have no inherent structural value. They’re just there to help you group objects in the Tags Tree currently, right? That may change in the future. But currently, that’s the way it is. So you just kind of have to ignore <Section> <Article>, <Part>, any of those things, and then go, Okay, anything here in that first level below that is block- level, and anything inside of a Paragraph tag, Formula tag, a Blockquote tag, anything that is a normally has a block level element designation, anything inside those is considered inline. Right? And so you just have you, you know, the simple way to think about this guys, is if you see that yellow triangle inside PAC, and it says possible, inappropriate use of whatever, go find that element the Tags Tree and change the placement to the other thing.

Chad Chelius
Changes to the other option, right? Yeah, yeah. And that’s actually a really good way of point of looking at it. Now, you know, what, that’s this kind of makes me think of another topic that might be worth talking about. Just a slight segue. And that is the topic of those container tags. Right. And you had mentioned, like container tags really have no, first of all container tags, which include <Article>, <Section>, <Div>, <Part>, they have no fundamental value, and they are not voiced by assistive technology. Right? So you could, you could kind of like pretend they’re not there. However, I work with a lot of clients who are intimidated by the long list of tags in the tags pane, right? And they find it useful to organize their tags by page. In a container tag, yeah, right. So they’ll create maybe they’ll create an Article and call it <Article> Page 1, right? And then another one article page to listen, if that helps you do it, do it. There’s nothing wrong with doing that. You know,

Dax Castro
I think there’s a clarification though. When we create a section tag, or a part tag, or an article tag, we that is the only thing you can name those, they have to be <Article>, <Section>, <Part>, <Div>, whatever, that’s their name, the title can be Chapter one, Chapter two, Chapter three. So in your Tags Tree, those those container tags have a name. But you can use that title kind of as notes for yourself, just like you were saying, to know where you are in that Tags Tree to help you.

Adobe Acrobat document showing accessibility tags list with a single H2 tag highlighted. The tag has extra text after the tag in the Title area labeled Reading Order.
Figure: A PDF showing the H2 tag in the tags tree with a Title of Reading Order.

Chad Chelius
Yeah, yeah. And if I may not have explained that very well. So thanks for clarifying that. Because, yeah, you’re right, you can’t create a tag and call it whatever you want. It’s got to be called <Article>, <Part> or <Section>. But here’s a little tip, right? I mean, to add the title property, you can right click on an article and choose Properties, and then enter the value in the Title field, right. However, an easier way to do that is to just rename the tag, put your cursor at the end of the tag and type a space. And then whatever you want the title to be,

Dax Castro
I will give you I will one up you chat and get one up me I am. If you simply go to rename the tag, and you don’t type any, don’t navigate to anything, just literally type over the entire name with whatever you want to call it, Chapter Two and hit Enter, it automatically assigns it as the title, you don’t have to click to the end of your <Section> tag and then add a space and then type in, you know, chapter one, if you just rename the whole thing. It’s all highlighted in blue, and you just type “Chapter 1” and hit enter. It ignores the fact that it’s a <Section> tag or whatever. And it just adds that value as the title.

Adobe Acrobat document with the tags tree open. A single H1 tag is fully selected as if you were going to replace the text entirely.
Figure: A single H1 tag fully highlighted as if you were going to replace all the text of that tag.

Chad Chelius
You sneaky dog you. I just learned something. I did not know that. I did not know that because I thought it would have. Okay, that makes sense. So as long as you don’t type the open bracket or the less than sign, right, right. If you type the less than sign, that’s going to be the tag name. But if you just type, whatever you want the title to be. It’ll keep the tag name and add that to the title. That is cool, buddy. I will tell you something

Dax Castro
For everybody listening. You can’t see Chad, but as soon as I started talking, Chad immediately turned to his computer and was like, Nope, that’s not gonna be right. I’m gonna check it. And he checked it. And of course it is right so I’m not always right. But most of the time I’m pretty close.

Chad Chelius
In my head. I was like, “Dax you’re a damn liar.” Yeah. And then and then I tried it and I’m like son of A gun. Yeah, he’s right. It works. That’s a really cool trick I love

Dax Castro
Well, you know, on that same topic, the another time saving tool for renaming tags is that if you just start with your let’s just say you want to name something H1, right. So if you start you, you rename that tag, you got your cursor in there, you type your left bracket, H one, capital H number one, you don’t have to hit the right bracket, you just press enter, and it will automatically add that right bracket. Now it’s a small little thing. It’s just you know, but it saves a little bit of time.

CSUN Assistive Technology Conference 2023

Chad Chelius
I do it all the time. Like you don’t have to close the tag it will close it for you. So yeah, that’s, that’s super helpful to know. Yeah. Awesome. And as a reminder, Chax Training and Consulting is going to be at CSUN on this year.

Dax Castro
Next week. Chad, we’re gonna be there next week, one more week, literally, this Sunday, I guess we’re getting on a plane packing up our entire booth, and our swag and our stuff and our class material. And we’re heading down to Anaheim. And we’re gonna go to Disneyland the whole world? No. I wish we were going to this. Literally, we’re right next door, you can see Disneyland from our hotel room. But yet we never get to go. So you know,

Chad Chelius
A ll work, no play.

Dax Castro
My wife would kill me. If I went to Disneyland without her chat. She was early, you know. So there’s even if we have the time, it’s not really an option. So

Chad Chelius
we’re going to be at CSUN. And if you’re going to be there, please stop by we’re going to have a booth there. And DAX and I are both going to be there. We’re also going to do a podcast. Yep. At Sea sun. Right. So CSUN is doing kind of a podcast day, if you will. And they asked us if we wanted to record an episode of our podcast live at CSUN. So web

Dax Castro
WEBAble TV is going to be hosting the podcast. Yes. Great. That’s a really awesome thing. So we’re excited about being a part of their their thing. So

Chad Chelius
and if you don’t know WEB Able TV daxin. my really good friend, Mike Paciello, runs WebAble TV. And of course, Mike is going to be there right? I’m sure. I didn’t check. But I wouldn’t be surprised if he’s doing the keynote for the conference. But

Dax Castro
He is because last year he had a little bit of a… he he did what all of us have done most of us have done right. He caught the “Big C” and and was was not able to do with the keynote. So this year, my understanding is he is doing the keynote and we’re excited to hear what he has to say. Always a great speaker really talking with you and couldn’t be happier that he is they call him back to do that keynote.

Chad Chelius
Absolutely. Yeah, Mike’s a great guy, and we’re looking forward to seeing him. So just remember, if you’re looking for in person or online training or struggling to establish an accessibility program within your organization, head on over to accessibilityunraveled.com to learn more. My name is Chad Chelius.

Dax Castro
And my name is Dax Castro where each week we unravel accessibility for you.

Chad Chelius
Thanks, guys.