Thanks to Our Sponsors
WP Engine, a WordPress technology company, sponsored the live captions for this event. They provide the most relied upon and trusted brands and developer-centric WordPress products for companies and agencies of all sizes, including managed WordPress hosting, enterprise WordPress, headless WordPress, Flywheel, Local, and Genesis. WP Engine’s tech innovation and award-winning WordPress experts help to power more than 1.5 million sites across 150 countries.
Watch the Recording
If you missed the meetup or would like a recap, watch the video below or read the transcript. If you have questions about what was covered in this meetup please tweet us @EqualizeDigital on Twitter or join our Facebook group for WordPress Accessibility.
Read the Transcript
>> AMBER HINDS: There we go. Now I’ve got my backup recording. All right, so it is being recorded. It takes us about two weeks to get corrected captions and a transcript, and then the video will be available. You can find that if you go to equalizedigital.com/meetup and that will redirect to a much longer URL, and that’s where you can find all of the recordings and also see what is coming up in the future. Another great way to stay on top of that is to join our email list. You can go to equalizedigital.com/focus-state and subscribe. If I’ve done my settings in Zoom properly, it might also show you a, “Do you want to subscribe after this meetup?”
We send two emails, and it basically has links to the recordings. It has news and accessibility articles from around the web, not just from us, and then a list of upcoming events so that you can stay on top of those. We are seeking additional sponsors for this meetup. Sponsors are how we help to cover our cost particularly with the live captions. Unfortunately, the WordPress Foundation doesn’t have budgets to pay for live captioning for all the meetups out there. They basically said you all have to find sponsors if you want to be able to offer those. If your company is interested in sponsoring, please reach out to us.
You can contact us at meetup@equalizedigital.com, and that will go to myself and Paula and we can share all of the details with you. Who am I? If you haven’t been before, I’m Amber Hines. I’m the CEO of Equalize Digital. I am one of the organizers of the meetup. We are a certified B corporation and a WordPress VIP agency partner that focuses on WordPress accessibility. We also have a plugin called Accessibility Checker that can provide reports on some of the more obvious and easy-to-detect accessibility problems.
Obviously, not all accessibility problems can be found with an automated tool, but the ones we can find, we try to flag for you to make accessibility testing easier, and we have a free version of that plugin.
We always appreciate any feedback, so anyone who wants to try free and let us know what you think, we very much appreciate it. We have two sponsors this evening. The first one is WP Engine. WP Engine has kindly sponsored our live captions for most of our evening meetups over the past year. They are, if you’re not familiar with them, a hosting company, they have their own brand, and also Flywheel is another hosting brand under their umbrella. Then beyond that, they have a lot of really great developer-friendly tools, Local, which allows you to work on WordPress on your local computer without being on the internet.
The Genesis framework and many other developer-based tools, including now advanced custom fields. We always encourage people to tweet out a thank you to our sponsors to help encourage them to want to continue sponsoring, so then they know that yes, Amber is actually talking about them at meetup, like she said she would. If you want to do that, they’re @wpengine on Twitter and just saying, “Hey, thanks for sponsoring the captions for meetup,” is very much appreciated, and then our second sponsor this evening is Empire Caption Solutions. Empire Caption Solutions has donated their services to us for after the event.
They take our recording and they create a full transcript and corrected captions for the recording so that we can get those up for you all. It saves us a ton of time and they have been really phenomenal to work with, so I highly recommend them. They are at @EmpireCaption on Twitter if you want to tweet them a thank you as well. We have a couple of upcoming events. Next month our normal meetup time would be on Thursday, November 3rd, but we will not be having a meetup, and that is because it will be WP Accessibility Day or WordPress Accessibility Day, which is a 24-hour event.
It’s going to start on November 2nd, morning, late morning-ish time for me here in Central Time, but depending on where you are in the world, it’ll be a different time for you. It’s going to run for a full 24 hours. It is completely free. Registration is now open. If you go to wpaccessibility.day, that is where you can register to get a free ticket. Basically, you need to log in for that website. We’ll be live streaming on that website. There’ll be chat and Q&A features, and we’ll also have sign language interpreters.
The other pitch that I’m going to put out about WP Accessibility Day is that we are in need of a volunteer who would be interested in hosting. Which means being on camera and introducing speakers for a three-hour time slot, which for me is from 1:00 AM Central Time until 3:00 AM Central Time.
I know we have someone here from Tokyo, and maybe some other people from outside of the America’s time zones. If you would be interested in introducing speakers and passing them questions for three of our sessions, we would very much appreciate it and feel free to reach out to me. You can either DM me or you can just email that meetup@equalizedigital.com. I will be so much in debt to you because I’m hoping I don’t have to stay up until 3:00 AM doing this job. Let me know if you’re interested, and then let’s see, our next meetup then will be this same time slot in November on the 21st. It’s at 7:00 PM Central Time, and Alicia St. Rose will be talking about how to be an ally with your content.
It’ll be more of a content-focused accessibility talk, and then on Thursday, December 1st at 10:00 AM Central Time, Ryan Bracey will be talking about selling your clients on accessibility. We have some really great things coming up, and of course tonight we have what everyone came here for, which is the amazing Colleen Gratzer will be talking with us about InDesign and creating accessible PDFs. If you aren’t familiar with Colleen, she has previously spoken at Meetup, you can find recordings to that.
She has a podcast that focuses on accessibility and puts out a ton of great content on accessibility. I highly recommend getting to know her. Her consulting business is called Gratzer Graphics, and I think her podcast and most of her accessibility things, including some courses on PDF accessibility that are very in-depth, probably more in-depth than we can go into today, through her business called Creative Boost. I’m going to add a spotlight to her. I’m going to stop sharing my screen and we’re going to let her take over.
>> COLLEEN GRATZER: Great. Let me go ahead and make sure the screen is sharing. Do you just see my slides now?
>> AMBER: Yes, it looks good.
>> COLLEEN: Do you see all the bookmarks and things like that still?
>> AMBER: We can see the bookmarks bar.
>> COLLEEN: You can?
>> AMBER: Yes. If you’re going with speaker notes, that’s probably why.
>> COLLEEN: All right. Let me see if I can turn those off real quick. Now that should look much better now. Is that better?
>> AMBER: Yes, we can’t see the bookmarks bar, just the address bar, so, yes.
>> COLLEEN: Okay, and you don’t see the notes, you just see the one screen?
>> AMBER: No, we don’t see the notes.
>> COLLEEN: Okay, great. All right. Well, thanks everyone for being here. I’m always excited to talk about accessibility. Today, I’m going to get into some InDesign and PDF accessibility issues and how to fix them both in InDesign and in Acrobat, but first I want to quickly explain why document accessibility is important. That’s because documents are part of electronic information and communication, and they’re often available for download on websites. When we have to make a website accessible, the documents on it should also be made accessible, and this is often overlooked. Sometimes the information in the documents is only found in the documents and it’s not necessarily found on the website.
It’s crucial that the documents are also accessible. Okay, so before we dive in, I also want to make a few things clear because a lot of these are things that a lot of people believe, and so I want to get into these limitations. The Acrobat Accessibility Checker, like any other automated tool, has limitations. Any automated tool can only detect a smaller portion of accessibility issues, and the rest have to be manually checked by a person. The checker is not the be-all-end-all of checking accessibility at all, not even close.
The Acrobat checker should actually only be used as a checking tool, as part of the process, part of the testing and checking process, and this is extremely important to understand because it doesn’t mean that the document is properly accessible, like properly set up for accessibility, or that it’s even user-friendly because a document can actually pass automated checkers and have accessibility issues, and still be difficult for somebody using assistive technology to use.
The Acrobat Checker can check that a document is tagged. It can check that a language for the document has been set. If the document’s in English, for example, it can check that a document has a document title, so not a heading, but a document title. It can tell that a document has bookmarks. It can tell that images have alt text. It can tell that any headings in the document are appropriately nested, so the levels of headings don’t skip, in other words. It can tell that if you have form fields, that they have descriptions, which are called descriptions in InDesign, but they’re called tooltips in Acrobat. It can also tell things like tables have headers.
These are just some of the things that it can check, which are all important things, but the Acrobat Checker cannot check things like if the document title– If the document title is present, it can check that, but is that an accurate document title? A lot of times, and I do this myself, I make this mistake all the time. I will have an InDesign file and then I might duplicate it to create a new document for the same client, it might be a similar-looking file. I will forget to change the document title in the metadata, which we’ll get into later. It cannot tell if the language that’s been set is accurate.
If you have a file that contains more than one language, or if you have a file that, again, was duplicated from one that was in another language, maybe you took an English file, and you’re duplicating that exact same layout, and it’s going to now be translated and laid out in Spanish, then maybe the language is not set correctly, but the language is set, but it’s not set correctly. This means that a screen reader will voice the content incorrectly if the language is not set there correctly.
It cannot tell if there’s appropriate or accurate alt text, because some images might actually have alt text that is too descriptive or may not be descriptive enough, or may say that something is like a dog when it’s really a cat, or maybe that it shouldn’t have any alt text at all, and really should be ignored by assistive technology.
It cannot tell if text and essential elements have sufficient contrast. It cannot tell if color has been used to convey meaning somewhere. This is often the case with infographics, pie charts, bar graphs, things like that. It cannot tell, and this is a big one, it cannot tell if the reading order is logical. The order that cited readers read things on a page is not necessarily the order that those elements will be voiced by a screen reader or other type of assistive technology. It cannot tell that correct tags were used. Tags help users of assistive technology understand the type of content that something is, and it also helps them understand the structure of the document.
It also cannot tell if good hyperlink text was used, so that people actually understand where the link goes. You could have a bunch of click heres, and click here doesn’t tell somebody where those links go. When someone using a screen reader, for example, pulls up a list of links in the document on that page, they might see five click heres that they don’t know if they go to the same destination or if they are five different links. It also cannot tell if tables were set up properly and then scoped properly, and that affects the meaning of the tables. There’s also many other things it cannot check for, and those are things that have to be manually checked by a person.
I really want you to understand that Acrobat Checker is a good start, and it is extremely helpful for checking our work in the InDesign file. You must know that you cannot automate accessibility. Most of the work, like I said, must be manually checked and done by a person. Passing Acrobat’s Checker is not a stamp of approval that a document is accessible or user-friendly. A document can pass the automated checker, and it can have accessibility issues and make it hard for someone using assistive technology to use or even not to be as understandable to someone using assistive technology.
Again, I want to make this clear because I know a lot of people who think they’re creating accessible documents because they pass the checker and I hear from designers and my own clients all the time, that they think they just have to pass the Acrobat Checker and then that’s it.
InDesign will get us most of the way there with accessibility, so that’s great news, [chuckles] but it too does have some limitations. InDesign does not allow us to tag every type of content, or do all the work that we need to do natively in InDesign, so, like I said, it will get us most of the way there, like 80% to 90% of the way there, but there is going to be some manual work that we must always do in the PDF to make sure the PDF is not only accessible but user friendly. Even if the InDesign file is as accessible as it can possibly be, exporting to a PDF does not mean that PDF is accessible, because again, there’s always some work to do in the PDF that you cannot do in InDesign.
Depending on the type of content in the document, you may have a lot more work to do in it than in other documents. Simpler documents are going to be a lot easier, and you have less work. If you have long complex documents with a lot of tables, for example, there’s going to be a lot more work to do in the PDF. I just want to point these things out because I know a lot of people think these things and– For instance, I had a client who I did some InDesign file remediation work for, which means making their InDesign files accessible, and I later found out that they were actually making minor edits to those files, which probably weren’t done excessively, and then they were just exporting from InDesign.
They told me they were doing that because they thought since the InDesign file had been remediated, it meant that the PDFs exported from it would then be fully accessible, but that’s just not the case. Now that we’ve gotten those common misconceptions out of the way, I want to talk really quick about the accessible PDF workflow for a moment. All PDFs are going to come from a source document. It’s going to be InDesign, it’s going to be Word or PowerPoint. In other words, you don’t just go lay out a document in Acrobat. We can fix the accessibility issues that we find in the PDF in Acrobat, or we can go back to the source file if it’s available and if it makes sense for us to do so.
Keep in mind that if you fix errors in Acrobat, then the errors are still going to exist in that source file. If you ever re-export a PDF from that source document, then you’re going to have to fix the issues again in the PDF in Acrobat. If you’ve done any work in the PDF and then you re-export a new PDF from InDesign, you’re going to have to redo that work again in the PDF, but if you address the issues in the source file in InDesign, then those issues will not be in any exported PDFs in the future.
Let’s get into running the Acrobat Checker. When you go into Acrobat, if you’ve never done this before, you’re going to first need to open the accessibility tool. This appears in the right-hand sidebar. This is what it looks like. If you don’t see that, you could go up to “Tools” and then just start typing “Accessibility” and then just click, it’ll say “Open or add to,” or something like that. Then you just click on “Accessibility check” and it will run the check. In this particular example, we see tons of errors. Some of these might be legitimate errors, but others might not be.
The first thing you want to do is check under document to see if you see “tagged PDF failed” because you want to address that first because if the PDF isn’t tagged, to begin with, you will see a lot of false positives. You don’t want to go fixing all those other errors that we just saw, if that error comes up “tagged PDF failed” because you’re going to waste a lot of time in the PDF trying to fix those things, or you’re going to go back to the source file and try to fix those things, and if you’re not exporting properly, you’re just creating more work for yourself. Speaking of a tagged PDF–
>> AMBER: Colleen?
>> COLLEEN: Yes.
>> AMBER: There’s one question that is relevant. Is what you’re talking about only in the pro version of Acrobat or is that in the free version like the reader version?
>> COLLEEN: I think it’s only in the pro version.
>> AMBER: I think so too.
>> COLLEEN: I think so.
>> AMBER: You probably use it more than I do.
>> COLLEEN: I use it all the time. I haven’t looked at the free version in so long so I think it is only the pro version. I think so. All this stuff that I’m talking about here it has to be– Like the PDF work, this is all for Acrobat. It can’t just be done in Preview or any other PDF program. It has to be done in Acrobat.
Speaking of tagged PDF failed, that error that we just saw, that’s the first one I’ll cover. A PDF must be tagged to be accessible and that’s because tags are the foundation of an accessible document and tags communicate to assistive technology, such as a screen reader, information about the content. The type of content that it is, whether it’s text, whether it’s a heading, what type of heading it is, whether it’s an image, form, a table, and so forth. Also, the structure of the document, the order of the content.
Now, that error can be a very simple fix. You can go back to InDesign and re-export the PDF. You go to “File export” and then choose “Adobe PDF Interactive” and then you’re going to click “Save”. Then you want to make sure that create “tagged PDF” is checked. This is crucial. Now, you can also check the option for use structure for tab order if that option shows depending on which version of InDesign that you’re using.
Create tagged PDFs is essential. I show all these without my images linked. Of course, you wouldn’t want to do that, so just ignore that. Then we go to Acrobat and we rerun the checker. We’ll see that all of those errors are now gone. Those errors that we had before they were all over the place. You can also see that under document it was Logical Reading Order and Color Contrast say needs manual check. These are always going to say that because they always have to be manually checked. Those two errors or whatever you want to call them, those warnings are always going to be there.
Now, number two is a missing document title. After you run the checker, you will see this error under the document section and it will say title failed. Now, you can fix this in InDesign or in Acrobat. Like I said, I’ll show you how to fix each of these in either place. There is no right or wrong answer. It depends on where you are in the process because again you may not always have the source file available to you. To fix it in InDesign, we want to check the metadata and the export settings. In InDesign, go to file and then file info. Then I’m just going to cut the description here and paste that in as the title where it belongs. Then we’re going to just click okay.
Then go ahead and re-export that. When you do that, you’re going to want to go to advanced and then make sure that document title shows for display title as opposed to file name and then hit okay. Then when we go back to Acrobat and rerun that checker, we’ll now see that the document passes for the document title. Now, we can also fix this in Acrobat.
Again, if you’re going to go back to the source file for any reason, you’ll want to fix it there. The other thing you can do too is even if you’re not going to go re-export from InDesign you can always fix it in InDesign and still continue working in the PDF. If you don’t have the source file, then you can add it in Acrobat. In Acrobat, you’re going to want to go to file and then properties and then you’ll just add the title to the title field and then just hit okay. Then just be sure to save the file.
Now, for the third one, your document may fail for missing bookmarks. Bookmarks are important because they help users get around longer documents. In Acrobat, when you run the checker, you will see bookmarks failed under the document section. Now, if you want to fix this in Indesign, there are quite a few ways actually to do this. One is to create a table of contents. I know designers hate creating tables of contents.
I used to feel the same way about them. If you’re already working with tables of contents, this is just one easy little thing that you have to do. For the table of contents, you’re going to go to layout and then table of contents styles and then edit. Now, you’d to have all your paragraph styles already set up in the table of contents. If you already have that set up, all you have to do is check the option to create PDF bookmarks and then just hit okay and then hit okay again.
Then you go to layout table of contents and then hit okay. Then it’s going to load the table of contents and you just place that where you want it to go. Then we’ll just save and then re-export. Then in Acrobat we’ll rerun the checker. Then you can see that bookmarks now pass. Now, if you don’t have a table of contents, not a problem. You can still add the bookmarks manually. Back in InDesign, just go to window and then interactive bookmarks. Then this already has some existing bookmarks but then all you have to do is select some text from the page that you want to add a bookmark and then select new bookmark from the bookmarks Flyout menu.
Then it’s just going to use that text for the bookmark name. Then it’s going to put it, you could see in this list it’s putting at the bottom of the list, you can just drag the bookmarks to place them in the proper order. The bookmarks should always be in the correct order that they are in the document and follow the same hierarchy as well. Now, you can also add bookmarks in Acrobat as well. You go into the bookmarks pin over here on the left side in Acrobat and you may not see any of these icons here. If you don’t see the bookmarks icon all you have to do is right or control-click on the left panel there, the left sidebar, the toolbar and then you’ll just select it and it will just appear.
Sometimes they disappear from time to time too which is annoying but that’s all you have to do to get it to reappear again. From that bookmarks panel, you’re going to select new bookmarks from structure and then it’s going to show you all the paragraph styles. This is really cool. This is showing all the paragraph styles that you’ve used in InDesign. If you’ve named your headings with the proper tag, then it makes it very easy to pick out which headings you’re going to use for bookmarks.
Also, what you pick is going to depend on how deep you want your bookmarks to go. You might just want to have, like usually, your H1 is going to be your document title. The publication title. If you’re going to pick H-2s that’s going to give you one level of bookmarks. If you want more than one level of bookmarks you could pick H-2s and H-3s, for example.
I’m just going to pick the H-2s here and then it puts them all in one bookmark tag and then you can unnest them and move them out one by one. Sometimes you can do it all at one fell swoop but it doesn’t always work. Then you can just delete that bookmark that was encompassing them all. Then you can see if you just click on each of them, these all correspond to the headings in the document. You just click on each of them and they go right to those headings in the document. Again, bookmarks are helping users get around the document very quickly. It’s like having a table of contents in a sidebar.
Now, you can also add them really easily using a preflight fixup in Acrobat. This is pretty cool. You go to the preflight tool, which looks like a sheet with a crosshair on it and if you don’t see it again you can just, you go to tools and then start typing preflight and then you’re going to click on preflight. There’s also a keyboard shortcut for this. Then once you get into the preflight tool, you want to make sure that Acrobat DC 2015 profiles or PDF standards is selected at the very top. Then you’re going to click on the wrench icon.
There’s three icons there. Click the wrench icon, start typing book in the search field and then you’ll see create bookmarks from headings and then you want to select that and then click fix. This only is going to work if you have a tagged PDF, so then you can save as or save and then you will get your bookmarks in the bookmarks panel. You can just click on them and they go to the different areas of the document.
Now, you can also add bookmarks individually in Acrobat, because a lot of times, especially when you create a table of contents, you may not have your cover in your table of contents. You might not have some other kinds of front-matter pages in your table of contents. You might need to individually add a bookmark for your cover or your back cover or some other front matter pages. On a page where you want to add a bookmark, such as this cover, you can just place your cursor on some text on the cover.
Then in the bookmarks panel, just click the new bookmark icon that has the plus sign and you can call it whatever you want, you can call it cover, front cover, whatever you want to call it. You can change that text, and then you can also go to a heading somewhere else in the document and you can select that text and then select the new bookmark icon and it will just name that bookmark from the selected text. You can do that for any other headings in your document that you want to add bookmarks for.
Let’s talk about contrast. Like I said, color contrast needs manual checks. Check is always going to show up in the document section of the Acrobat Accessibility Checker and it says this because that’s something that the Acrobat checker cannot check for. We have to check that manually. There’s a few ways we can do that. One way is the TGPI Colour Contrast analyzer, that has a British spelling by the way.
This is something you install and you can use anywhere on your screen so you can sample from anywhere on your screen, which is really cool. It allows you to enter color values in hexadecimal values, the six-digit values or RGB, and I think another one too. You just sample the foreground color like I just showed here, and then the background colors. Then it will tell you if that combination passes for WCAG AA, AAA and for normal text or for large text or graphical objects and user interface components. Then another one is the WebAim website and you need to use hexadecimal values for this, the six-digit codes.
In InDesign, you can actually go to your swatches palette and then just double-click a swatch and change the color mode to RGB just temporarily. You’re not going to save it that way, and then you can copy the six-digit code and paste that over in the WebAim checker. This was white on green, so we’ve got foreground color there of green and then the white and so this’ll tell you again like the TGPI checker, that if it passes for WCAG AA normal text, WCAG AAA normal text, or for AA large text, AAA large text or for graphical objects and user interface components.
Another error that you might encounter is images with missing alt text. Now, in the Acrobat checker under the alternate text section, it will list any images called figures that do not have alt text. Now, that doesn’t mean that those images should have alt text. There’s more to determine if they should or not, but it’s just saying these are being recognized and they do not have alt text.
If they do need alt text, then you can fix this in InDesign. One way to do that is just go to that image individually and then write or control-click it and select object export options. Then if you’re going to add the alt text manually right there, then you just select custom for alt text source and add in the alt text and then just click done and voila. Now, we can also add alt text in Acrobat. We’re going to go into the tags tree for this. There’s a ton of ways you can do this, but we’ll go into the tags tree. Again, if you don’t see the tag on the left-hand toolbar just right or control-click that toolbar and then select it and it will appear.
You’ll click on that and then you’ll expand the tags tree. You can use the down arrow, the right arrow and down arrow and go down the list of tags until you see that figure, the one that was in question without the alt text. Then you just right or control-click that figure tag and then select properties. Then you’ll see an alternate text field. You just have to add the alt text in that alternate text field.
Again, there’s several ways to do this actually in InDesign and in Acrobat, but those are two easy ways to do that. Now, you might encounter an error with the headings in your document. When you run the checker, you might see headings appropriate nesting failed and then it will show you element one, that’s the heading that failed.
You can select the element and it highlights it, the heading that has the issue. If you need to change the tool to select tool and then select some of that text and then go to the tag stream menu and then click or select find tag from selection, what that’s going to do is show that in the tag stream. Here, we can see that we have an H1 and then it goes to H4 and the H4 is the heading that got flagged.
Those are out of order, so that’s where appropriate nesting becomes an issue. We can fix this in InDesign by adjusting the export tag, so we go to that paragraph style for that heading, and we go to the export tagging in that paragraph style, the last option. We change that from an H1 to an H4 to H2. I’m selecting H2 here because back in the PDF, the one that preceded it was the H1, so H2 would be next in the sequence.
Then we just re-export the PDF and then we rerun the checker and that error is now gone. Now, sometimes it’s not that heading that Acrobat flags. It appears to be that heading because that’s the one that is throwing the issue with the sequence, but it could actually be a heading that’s before or after that particular heading that’s actually tagged wrong that’s triggering the error. You might have to check something else if it’s not that one.
Now, you can also fix this in Acrobat by changing the tag directly. In the Acrobat checker, we rerun that again and then we go to that error by looking on where it says Element one. Then in the tags tree, we could select some text and then we go to the tags tree and fine tag from selection. Then we can literally just click on that H4 and change that to an H2 and just hit return. We rerun the checker and now it says past, so that eliminates that error right there. Again, though you do any of these fixes in Acrobat, you either want to also do them in your source file if you have it available to you or you’d have to redo that later in that source file. This is the last one. This is, if you have forms, the Acrobat checker may show that they fail for field descriptions. This is in Acrobat. Descriptions are the tooltips that appear when hovering over a field if they’re there. What they do is they give instructions for each field.
This particular tooltip says, “Enter your first name,” for the first name field. Here’s how that error looks in the Acrobat Checker. It’s going to show up under forms and then it will say, “Field descriptions failed.” You see we’ve got five fields here, the first name, last name, and three total fields that fail. If we go back to InDesign and add these, we just go to Window, and then interactive, and then buttons and forms, and then we select the fields with the empty descriptions one by one.
Then in the description field, so it’s description in InDesign, it’s a tooltip in Acrobat, we enter short instructions for what should be entered in that field, such as enter your first name in this case. Then in this case we have enter your last name. It could just say first name and last name because those are very common and understood, but something like this field, we could say, “Enter the total for Vanilla Dream cupcakes.”
Then we have the one below that. I’m just going to copy and paste that into the description and change the cupcake name. Now this one is, “Enter the total for Mint Mocha cupcakes.” Then this one is, “Enter the total for Kiwi Cafe cupcakes.” Then we just can save the file and re-export, and then we’ll rerun the checker. You can see that that error, it’s now gone, it’s passed. Now in Acrobat, we can also add these field descriptions. Again, these are called tooltips in Acrobat.
In InDesign it’s called description, in Acrobat, it’s called a tooltip. It takes the InDesign information in the description field and puts it in the tooltip field in Acrobat. Here we go to prepare form in the right sidebar, and then we select the field, right or control-click it and select properties, and then we type in the tooltip or description in the tooltip field. We’re typing, “Enter your first name,” in the tooltip, selecting the next field, right-clicking that, and then saying, “Enter your last name.”
Again, it’s a tooltip in Acrobat, it corresponds to the description field in InDesign. Oh, I forgot, I have another one. [chuckles] Here’s a mistake that a lot of people make, and that is checking PDF documents with Acrobat’s Read Out Loud feature. Now Read Out Loud can be found by going to view, Read Out Loud, Activate Read Out Loud. Now Read Out Loud should not be used to test a PDF. My buddy Dax Castro is always preaching about this too. Read Out Loud is not the same as testing with a screen reader. It has many limitations.
For instance, it does not convey any structural information about the content, it does not voice alt text for images, it doesn’t voice alt text for hyperlinks, it does not recognize hyperlinks, it doesn’t identify any heading structures, and it doesn’t identify table columns, table rows, or table headings. You must test with a screen reader such as NVDA or JAWS. NVDA is free. Both are windows only.
If you’re a Mac user like me, it’s okay, you can still use it. All you have to do is install Boot Camp or VirtualBox or download Parallels, that’s what I use, I pay for Parallels, and then run Windows that way. Parallels makes it really easy. I know I probably covered a lot here today, so I just want to recap a few important points. Acrobat’s checker is a good start. It’s very helpful for checking our work from the InDesign file.
Sometimes it’s easier to check things in the PDF with Acrobat than it is to go back to InDesign and go through a bunch of weeds and go through under the hood and look for these things. Now, while we can use Acrobat’s checker to check for a smaller portion of pot potential accessibility issues, it’s not the be-all and end-all of checking, it’s not even close and it can give false positives.
Passing Acrobat’s checker does not mean that a document is accessible or user-friendly. You can fix issues in InDesign or Acrobat. Again, you have to weigh which option is better if you’ve gotten into any PDF work. Of course, if the source file is not available, then you won’t be going back to the source file. If you want to learn the entire process for creating accessible PDFs from InDesign, I actually teach a course on this and I provide support for that as part of my course as well.
I also have a podcast and resources where I talk about design and accessibility. I also offer mentoring as well and I have a consulting business named Gratzer Graphics where I do accessible branding, publications, websites, remediation, remediation, and audits. I really hope this was helpful. [chuckles] I hope it wasn’t overwhelming. I try to make accessibility as approachable as possible. I know there’s some time for Q&A in case you have any questions about what I just talked about. Let’s dive into some questions, I guess.
[silence]
>> AMBER: Hey, sorry. It’s going to take me a second to find how I can make myself visible again. That was phenomenal, Colleen. I feel like I learned so many things.
>> COLLEEN: Oh, good.
>> AMBER: We did have a couple of questions come in. Feel free, everyone. It’s easier for me if you put them in the Q&A, but I’ll try to watch the chat too. One question was, Bhutan was wondering, could you please tell us a bit about creating “articles,” and this is in quotes, in InDesign as per the PDF/UA.
>> COLLEEN: Oh, well, articles get created in the articles panel in InDesign. You don’t have to use the articles panel, but you can use articles panel. If you’re going to have a TOC, a table of contents, you need to use articles panel. You have your front matter content, your cover, your front matter content separately, your TOC separately, and then your main content separately, so you could have three or four different articles. You could also use, if you have a really long document, I’m used to working on several 100-page documents, you could put an article for each chapter. You could do something like that. It just helps you organize things.
>> AMBER: For someone like me, I have no idea, that’s like a tag? An article, is that a tag that wraps around other elements? Is that what we’re talking about?
>> COLLEEN: It’s a grouping tag. Yes, it’s a grouping tag. When you use the articles panel in InDesign, you’ll see the art tag show up in the PDF in the tag stream.
>> AMBER: That’s required for PDF accessibility to have that or that’s an optional element?
>> COLLEEN: No. I focus on InDesign as opposed to Word or PowerPoint. I have done some accessibility in those, but I believe that it’s just InDesign that’s going to show that. You could manually tag something that way too, but I don’t think you typically see that tag coming out of Word or PowerPoint, but if you’re using the articles panel in InDesign, then you will see it.
>> AMBER: Great. Let us know if that did not answer your question, Bhutan. Bruce was wondering, do any of the Acrobat alternatives have accessibility checkers?
>> COLLEEN: Not to my knowledge. I think this has to be done in Acrobat.
>> AMBER: There isn’t a free version of Acrobat or open source version that also can do some of the accessibility things?
>> COLLEEN: No, but there are tools like CommonLook. CommonLook has a free and paid version of their software and they have one that is a– What is it called? I think their free version is the Validator Tool.
>> AMBER: Isn’t that still an Acrobat plugin? You add it to Acrobat and use it in Acrobat.
>> COLLEEN: It might be. I haven’t used it, but I think it might be. Then there’s also Access PDF, which is a paid tool as well, Windows-only. These are all Windows-only pretty much, but that’s a paid thing. [chuckles] That goes beyond what Acrobat can do but Acrobat is like acrobats where it’s at.
>> AMBER: I’ve used the common look tool before when I was trying to identify problems. I felt like it caught more than the Acrobat, but I used it in Acrobat. I don’t know if they have a different version. You can use standalone, but I’ve used their plugin that you add to Acrobat.
>> COLLEEN: I think the paid version might be standalone. I’m not 100% sure cause I haven’t used it, but I’ve used Access PDF, but I have a common look. I have not.
>> AMBER: I think that pretty much covered the next question, which was are there any alternatives to act who don’t have pro and I think the answer is you either pay for Pro or maybe you hire a consultant or freelancer who pays for Pro to do it for you if you just need a one-off document.
>> COLLEEN: Exactly.
>> AMBER: Is there a way user searching in a browser can specify that they want accessible PDFs? A follow up question is, can having truly accessible PDFs and webpages on your website help with SEO?
>> COLLEEN: I don’t know if I understand the first question.
>> AMBER: I think what she’s asking is if somebody went to Google and they were searching something, could they, how you could search for only a certain file extension and get only PDFs in your search results? Do if there’s a way that they could give me only accessible PDFs?
>> COLLEEN: Probably not, because I don’t think that it can tell.
>> AMBER: Google can’t tell.
>> COLLEEN: I don’t think Google can tell but you know what, that brings me to an interesting point and that was something I found out from someone in your group was that depending on the– if a WordPress website uses a certain caching plug-in, that if you upload an accessible PDF with tags and that caching plug-in is set to also cash PDFs, it will wipe out all the tags.
If you spent all this time making an accessible PDF and you give it to somebody to put on the site and they’ve got this caching plug-in that’s going to affect the PDF, that’s a huge problem. Now that accessible PDF is no longer accessible.
>> AMBER: I think it’s one of the– I don’t know if it’s caching, but I think it was one of the ones thate reifies to try and reduce file size. It strips out all the tags that you have [inaudible]
[crosstalk]
>> COLLEEN: Oh my God, I can’t even imagine.
>> AMBER: Don’t try to fake, make your PDF file smaller. I don’t know of any way that you could say it only give me accessible PDFs to Google if you were trying to get PDF results but the follow-up question, I’m sure you have thoughts on this. Can having accessible PDFs and webpages on your website help with SEO?
>> COLLEEN: I’m sure it does. My SEO knowledge is pretty limited. I’m not an SEO expert at all, but I’m pretty sure that it would, especially because you’re filling out the metadata and that’s helping that document title, and even if you want to include the author info, but what’s required is that document title. When you fill that out or if you fill out any of the keywords in the metadata, all of that is helping search engine optimization for sure.
>> AMBER: I would imagine and this is me again guessing because I don’t know Google, but on a webpage, we do know that headings help Google and I know now Google is scanning PDFs and indexing them. If you had headings in there versus we just have paragraphs that are styled big, I would think that would be the same thing as on a webpage, or adding alt texts to the images on the PDF would probably make it be found better.
>> COLLEEN: I don’t know, like you said that’s definitely the case with a website. I don’t know if such engines go into the tags in a PDF. I don’t know that.
[crosstalk]
>> AMBER: Something we can all look up afterwards and see if we can find the answer.
>> COLLEEN: If they do, I imagine that the tags would be helpful, especially because they’re the same HTML tags as what’s used on a website but I don’t know if they crawl into the tags stream at all.
>> AMBER: I’m not certain either. Constantino said great overview, especially if trying to find a unique way to introduce some very interesting aspects of accessibility for the C-suite clients, et cetera. Do you have a resource or a presentation that uses this logic for clients that need to know a little bit more about document remediation but are not looking for a deep dive? Constantino wants to be able to share that with some clients.
>> COLLEEN: I might have an article on my Gratzer Graphics blog with some of that information that I could find a link to later and send you to share.
>> AMBER: If you find the link, we can put it in the recap post with the link over to that. Are most of the courses that you have more in-depth for designers or people who are actually doing this rather than the C-suite or the decision-makers who need to know, but they’re more in-depth?
>> COLLEEN: Anybody that can use InDesign. For my in design and PDF course, you’re using InDesign. You don’t have to be a designer. I have plenty of non-designers who have gone through that course and gotten a ton out of it and they loved it. In my web course, you need to be familiar with HTML and CSS, but whatever you call yourself, it doesn’t really matter, but if you’re using that software, you’re getting into that stuff, that’s fine. You can still do it.
I’ve had marketing people go through and learn that anybody’s using InDesign. With the InDesign course, learning how to use InDesign properly is a big part of accessibility. When I learned this six years ago, I was doing a lot of things right InDesign. I didn’t have to change too much about what my workflow was, but with the accessibility stuff, it was like, oh, now I’m going to start doing these things now differently, and even if a project doesn’t have to be accessible, I’ll still go through the same process because it’s a very efficient process.
I’m not going to necessarily be adding alt text and checking color contrast for those documents, but 99% of the work I’m doing is accessible anyway, but I’m still using that same workflow because you get into a rhythm with it and you become very efficient and you’re using the software properly. When how to use the software properly, it’s just a lot easier and a lot faster.
>> AMBER: Diane said, just to double check, even though I make sure my tags are visually in order and correct, using Read Out Loud can still miss things that are out of order.
>> COLLEEN: Oh yes. You can’t use that to check the tags at all. You’ve got to manually check them or you can also use a screen reader, but Read Out Loud is not a screen reader. It’s literally reading stuff on the screen, but it’s not considered a screen reader because it’s not reading the tag stream. There are some screen readers other than NVDA and jaws that go by the order pay, not the tag street, but if you need to check your tags, the way to check it is not with Read Out loud. You’d have to manually check them and check with NVDA or JAWS.
>> AMBER: The difference being, it would just literally read the visible text, whereas a screen reader would read heading, this is the title.
>> COLLEEN: Exactly.
>> AMBER: Link text and it would actually announce what tag is before it but Read Out Aloud won’t do that.
>> COLLEEN: It’ll say heading, and then it will say graphic for an image, it will say link for links. Exactly.
>> AMBER: Great.
>> COLLEEN: You test with a screen reader, it’s also letting you test the functionality too because a lot of times what happens is that I’ve run into this before and I’ve had to make sure I had this to my checklist, is that you can have a hyperlink that you said an InDesign and then when you get to the PDF, it’s not keyboard accessible anymore. You can click on it with your mouse, but it’s not keyboard accessible.
Therefore it’s not a fully accessible link and you might still be able to use it again with the mouse, but you can’t use it with a keyboard. It’s a huge issue. There’s certain things that you not going to know that they’re not fully accessible unless you’re really testing them with the proper tools.
>> AMBER: I would think for sure if you had any interactive PDF that includes a form like you were showing before, it’s really important that you try to see, you can just fill out that form with your keyboard only. With all of that normal testing like you do on a website.
>> COLLEEN: Exactly.
>> AMBER: Do you ever try and talk clients out of those interactive PDFs and this should just be a webpage?
>> COLLEEN: That wasn’t for a client project. That was something I made up for my course, but–
>> AMBER: I know I’m just curious, if you get those because I’m assuming you do with all the PDF you look at, do you ever say to them, “Let’s not remediate this, let’s just turn it into a webpage?”
>> COLLEEN: No, because the ones that I’ve gotten and I actually was just working on a workbook today that has a lot of forms, but they’re very simple forms, so not like these big drawn out things. It had a lot of forms, but they’re just really simple. It’s like a workbook. It’s for people to sit in a presentation in a workshop and to fill stuff out and type things in. It’s not for somebody to fill out and actually submit. If that were the case, a web form could be a better solution, but the things that I’ve encountered or for people to actually just fill them out and to have themselves as opposed to submitting elsewhere.
>> AMBER: Okay. I’m looking through some of the chat because we got everything, I think, that’s in the Q&A. Actually, the question that just came in is related to one I saw. Somebody said, “You mentioned only Windows screen readers,” they were asking about what’s available, and then another person said, “Does VoiceOver work with PDFs?” Is that an option if you’re on a Mac to test your PDF with VoiceOver?
>> COLLEEN: I will tell you this, I have tried and tried to get VoiceOver to properly– I can get VoiceOver to work fine when I’m testing webpages with it, and I will still use NVDA or JAWS because most screen reader users are actually using Windows, and they’re using NVDA and JAWS, that’s just how it is. It is very important to test for them because the WebAIM survey shows us that those are the– Most users are using those two screen readers.
VoiceOver, I gave up trying to fight with that, with PDF documents ages ago, I couldn’t take it. It was just easier to get Parallels installed and then just use NVDA and JAWS to test, so much easier, so I gave up on it. I do know some people that use it on an iPad, but that’s not helping me, I can much more easily just use NVDA or JAWS than to go to my iPad to try to use VoiceOver. That’s what I’m always using is, I use Parallels with NVDA and JAWS.
>> AMBER: I’m on a Mac too now, I switched and I will say that VoiceOver is one of my least favorite things about switching from Windows to a Mac. I feel like it’s harder to use. I think if you have that and you don’t have a dual boot situation set up on your Mac, starting with that and using that to test is 100% better than not if you don’t have a Windows available to you.
>> COLLEEN: What I like about Parallels though is that it just acts like another program that you’re opening. You’re opening a program, it just happens to be that it’s opening Windows, so it’s pretty cool. You’re just using your Mac, like you normally would, and you’re just opening a program and you can have it small off in the corner as part of your desktop. It functions like a regular program, which is cool.
>> AMBER: Let me see if there is anything else that we missed. Oh, there was a comment about the conversation we were talking about the strips PDF is ShortPixel, Gerson said that’s the plugin. If you use ShortPixel on your WordPress website, I’m hoping there is a setting you can go toggle off to like, “Ignore my PDFs” or “Don’t optimize my PDFs”, so you want to go try and find that. I’m not familiar with that plugin, but apparently, that was a plugin that didn’t.
Bruce said, “Yes, VoiceOver is fine, screen reading comes free on Mac.” I’m trying to see. Yes, there is extra information from Gerson in the chat about there’s a checkbox to optimize PDF files in ShortPixel, so you can turn that off because it strips all your metadata. I would think that would also not make it good for SEO if you’re hoping your PDF will show up in search. Sometimes our optimizations are not the best things in the world. It looks like those were– I think those were all of the questions that we got.
Diane, I think your last one was just, again, ways to make NVDA work on a Mac. Parallels is what you were talking about Colleen. It’s an app that you pay for, right?
>> COLLEEN: Yes. I think it’s like 80. I think it’s $80 to $100 a year. That’s what I use instead of like VirtualBox or Boot Camp, I just use that and I’ve liked it. It was very easy to install, I didn’t want to mess too much with my computer, and it just opens up like it’s a program, so it’s very convenient.
>> AMBER: Yes, so that’s Parallels. I have Boot Camp set up on my Mac, Boot Camp is free. Basically, what it is is when you get your login screen, you can be like, “Instead of logging into my Mac account, log in to a Windows account,” and it actually partitions, which I don’t know. I’ve had moments when I wish I hadn’t done it because I had to allocate space on my computer to that Windows install which I don’t use for anything.
>> COLLEEN: That’s another reason I didn’t want to do it.
>> AMBER: Parallels is probably worth the money. I think those were all of the questions. Thank you everyone for coming, and thank you for this phenomenal presentation, Colleen.
>> COLLEEN: Oh, you’re welcome.
>> AMBER: Again, just real quick, where can people go? What’s the best web address or the best place to find you on social media?
>> COLLEEN: They can connect with me on LinkedIn, Colleen Gratzer, or you could go to gratzergraphics.com or creative-boost.com, and all of my social channels and everything are on both websites there.
>> AMBER: Awesome. I think Paul is throwing the link in the chat. Just a quick reminder, if you haven’t registered for WP Accessibility Day, it is in two weeks, it’s totally free, go to wpaccessibility.day. If there is either a night owl or someone on the other side of the world who’d be super interested in hosting, it’s easy. It’s kind of like this, you do introduce, you get to listen to a cool talk, then you pass them questions. We are looking for a volunteer to fill a time slot, so let me know if you’d be interested. That’s about it. We’re going to sit quietly for one second to give our captions a chance to catch up and then we’ll sign off.
>> COLLEEN: Well, thank you for the opportunity. It was fun.
[] [END OF AUDIO]
Links Mentioned
- Create and verify PDF accessibility (Acrobat Checker)
- WebAIMs Contrast Checker
- TPGi Colour Contrast Analyser
- How to Use NVDA (Screen Reader): Glen Walker
- Parallels: Run Windows on Mac
- Gratzer Graphics
- Creative Boost
About the Meetup
Learn more about WordPress Accessibility Meetup
Article continued below.
Stay on top of web accessibility news and best practices.
Join our email list to get notified of changes to website accessibility laws, WordPress accessibility resources, and accessibility webinar invitations in your inbox.
Summarized Session Information
In this session, Colleen Gratzer provided a comprehensive guide on common accessibility mistakes in InDesign and PDF documents and how to fix them. Accessible documents ensure equal access to information for users of assistive technologies. Colleen explained the limitations of Adobe Acrobat’s Accessibility Checker, emphasizing that while it can identify some issues, many accessibility elements require manual verification.
Colleen walked attendees through an accessible PDF workflow, showing how to address accessibility issues in the source document (such as InDesign) to streamline future exports. Colleen also demonstrated how to interpret the results of Acrobat’s checker, offering specific solutions for errors like missing tags, document titles, bookmarks, and alt text for images.
To enhance accessibility further, she provided tips for checking color contrast and ensuring proper heading structure. She wrapped up with recommendations for testing PDF accessibility using screen readers like NVDA or JAWS rather than relying on Acrobat’s Read Out Loud feature.
Session Outline
- Introduction to document accessibility
- Limitations of Acrobat’s Accessibility Checker
- The accessible PDF workflow
- Running and interpreting the Acrobat Checker
- Common accessibility errors and fixes
- Tools for testing PDF accessibility
- Final takeaways
Introduction to document accessibility
Accessibility goes beyond websites to include documents that may be downloaded from them. Sometimes, information is exclusively available in documents and not on the web, making it crucial that these documents are accessible. Ignoring document accessibility can lead to gaps in accessibility compliance and user experience.
Limitations of Acrobat’s Accessibility Checker
Some common misconceptions exist about the Acrobat Accessibility Checker, a tool many assume can thoroughly verify document accessibility. Like other automated tools, Acrobat’s checker has significant limitations and should be used as a part of the testing process rather than as a standalone solution.
While the Acrobat Accessibility Checker can detect specific elements—such as tagging, language settings, and document titles—it cannot verify the accuracy of these features. For instance, it can check that alt text is present on images but cannot confirm if the description is accurate or helpful. Similarly, it cannot assess color contrast or ensure a logical reading order, essential for assistive technology users.
While passing the Acrobat checker can indicate that a document is closer to accessible, manual checks are necessary to confirm true accessibility.
The accessible PDF workflow
The typical workflow for creating accessible PDFs starts with a source document created in InDesign, Word, or PowerPoint. You cannot create a fully accessible document solely in Acrobat. If accessibility issues are corrected directly in the PDF, they will remain in the original source document, so each time the PDF is re-exported, the issues must be fixed again. To avoid this, it’s recommended that as many accessibility concerns as possible be addressed in the source file. This practice ensures that future exports from the source document are more accessible, saving time and effort. If accessibility edits are made in Acrobat, they should be noted to adjust in the source file later.
Running and interpreting the Acrobat Checker
Colleen provided a detailed walkthrough for participants unfamiliar with Acrobat’s Accessibility Checker. She instructed users to open the accessibility tool from the right-hand sidebar in Acrobat or to find it under “Tools” by typing “Accessibility.” Once the checker is run, the first error to address is a “tagged PDF failed” message, which signals that the document is not tagged. Attempting to fix other errors before resolving this could waste time and effort, as the tagging issue could generate additional false positives.
Common accessibility errors and fixes
- Tagged PDF Failures: Tags are fundamental for an accessible PDF because they convey the structure and content type (such as headings, text, images, and tables) to assistive technologies. To address this, you can re-export the PDF from InDesign with the “Create Tagged PDF” option selected. You can also check the “Use Structure for Tab Order” option when available, as this can improve navigation for screen reader users.
- Missing Document Titles: A missing document title is a common error. Document titles are crucial for accessibility and can be fixed in either InDesign or Acrobat. In InDesign, users can set the title by going to “File Info” and entering it under metadata. You can also select “Document Title” instead of “File Name” in the export settings for improved accessibility. If the source file isn’t available, the title can be added directly in Acrobat by going to “File > Properties” and entering it in the Title field.
- Bookmarks for Navigation: Bookmarks help users navigate lengthy documents by providing quick links to different sections. There are several methods for adding bookmarks. One approach is to create a table of contents in InDesign, ensuring that “Create PDF Bookmarks” is checked in the table of contents settings. Alternatively, users can add bookmarks manually in the InDesign “Interactive” panel, arranging them in the correct document hierarchy. For PDFs without bookmarks, you can add them in Acrobat using the bookmarks panel or use the “Preflight” tool to generate bookmarks from tagged headings. This feature is handy for documents with well-structured heading tags.
- Color Contrast Checks: Since color contrast issues require manual checking, you can use tools like TGPI Colour Contrast Analyzer and WebAIM’s contrast checker. These tools can help verify that color combinations meet WCAG AA and AAA contrast requirements. In InDesign, color swatches can be temporarily converted to RGB values to make sampling and verification easier.
- Images Missing Alt Text: Alt text for images is a key accessibility feature. In Acrobat, the Accessibility Checker flags images lacking alt text, though it cannot determine whether it is accurate. You can add alt text in InDesign by right-clicking the image and selecting “Object Export Options,” then choosing “Custom” as the alt text source. For users working solely in Acrobat, you can add alt text through the tags tree, where each image can be given a descriptive tag.
- Proper Heading Structure: Headings in a logical order are essential for users navigating documents with screen readers. Acrobat flags any skipped heading levels, such as jumping from H1 to H4. To correct these issues, users can go back to InDesign and adjust the export tags in the paragraph styles panel to create a logical sequence. Alternatively, users can change heading tags directly in Acrobat by selecting the appropriate tags and adjusting them in the tag tree.
- Form Field Descriptions: For documents with interactive forms, field descriptions (or tooltips) provide essential guidance to users. InDesign users can add field descriptions by going to the “Buttons and Forms” panel and entering text in the description field for each form element. In Acrobat, the field descriptions appear as tooltips, which are accessible through the form properties. These tooltips guide users on what to enter, such as “Enter your first name,” making forms more usable and accessible.
Tools for testing PDF accessibility
Users shouldn’t rely on Acrobat’s Read Out Loud feature to test PDF accessibility. Unlike screen readers, Read Out Loud does not provide structural information, does not recognize headings or hyperlinks, and cannot read alt text. Instead, it’s recommended to use NVDA or JAWS for Windows, which offer more accurate results. For Mac users, you can use Parallels, a program that allows Windows to run on a Mac, enabling NVDA or JAWS testing without switching devices.
Final takeaways
In closing, passing Acrobat’s Accessibility Checker does not guarantee a fully accessible document. While the checker can help identify certain issues, true accessibility requires a combination of automated checks and manual reviews. You should build accessibility practices into your document workflows, whether in InDesign or other source software, from the start.