Designing for Digital Accessibility: InDesign to PDF

Photo of a laptop on a wood table next to a cup and cactus plant.

Note: This article was originally written for InDesign CS6 users, but applies to more recent versions too. As Adobe improves InDesign’s accessibility features, the workflow changes with it. For example, applying PDF tags when setting up your Styles works much more reliably in CC 2018 than it did before (hooray!) but its still not perfect. Thus, every InDesign CC update is a hopeful one!

Creating accessible digital documents can feel daunting, especially if you’ve never written HTML code before. Web developers and ePub designers definitely have a leg-up when it comes to creating accessible PDF documents – there are many similarities between the two. If you’re unfamiliar with how HTML works, I recommend WebAIM’s article on Semantic Structure for the web.

To help get you started, here is a suggested workflow for designing documents that are intended to be exported to PDF (or another electronic format like ePub) from Adobe InDesign. This article does not cover everything of course, but will get you going on the right foot.

Another good InDesign 101 is found through ADOD: Authoring Techniques for Accessible Office Documents: Adobe InDesign CS6

Step 1. Collaborate with Your Client

  1. Add the alternative (ALT) text to the metadata of each image file the client supplies
  • PC Users: Add ALT text to the Details of an image by right clicking the image on their computer, selecting Properties, and adding the ALT text to the Details.
  • Adobe Bridge: Add the ALT text to XMP: Headline
  • If they do not have time to do the above, ask them to supply the ALT text in a separate Word document or email for you to add yourself in Adobe Bridge or within InDesign through Object Export Options.
  1. Encourage the client to supply Word documents that use Styles and remind them not to use keyboard formatting (eg: tab key or enter to format text) or format using tables for layout or text boxes.
    • Bonus: This also eases importing text content and using plug-ins like WordsFlow.

Step 2. Before You Begin Your Layout

  1. Review the content and consider what Paragraph Styles you need to set up and what hierarchy is used in the headings of the document
    • It could be as simple as all headings being Heading 1, or Heading 1, Heading 2 etc. Note that headings cannot jump from Heading 1 to Heading 3 with no Heading 2 in between. Headings must be in a logical sequence. You can have many different Styles for a single heading.
    • Including a marker such as H1 or H2 in the Style name will help you remember what level of hierarchy they are.
  2. Consider using high contrast colour combinations for text and background to increase legibility. This also aids with photocopying/faxing etc. If your document is going online, it maybe required by law (ie: large organizations in Ontario), but its an all-round good thing to do.

Screen shot showing the File Info window and an InDesign document

Step 3. Beginning Your Layout in InDesign

  1. Add title and keywords to the document’s File Info (File > File Info)
  2. Use minimal text frames. I find that a single text frame is ideal for controlling reading order – use Styles and built-in formatting tools to arrange the layout of your text.
    • Note: You can format the text using built-in formatting tools such as columns (split/span), paragraph indenting, space before/after, baseline shift etc. Avoid using keystrokes to do your layout – it does not transfer well to assistive technology nor to responsive viewing or reflow.
  1. Open Structure (View > Structure)
  2. Add Untagged Items (menu at the top right of the Structure pane > Add Untagged Items)
  3. Create Paragraph Styles (or create as you go along)
  4. If creating Tables, designate a Header Row (place the type tool inside the first row (your Header) > Table > Convert Rows > To Header)
  • You should not have more than one header. If you have multiple headers, you may need to do a fair bit of tweaking in Acrobat.
  • Avoid using merged cells can disrupt reading order. Use alternative methods of layout if you can in this case. If you must use merged cells, advanced manual touch-up will be needed in Acrobat Pro.
  1. Set up automated Table of Contents (TOC) (Layout > Table of Contents)
  • In the TOC menu, make sure “Create PDF bookmarks” is checked under Options. Otherwise, your interactive bookmarks wont carry over to the PDF.
    • If you do not see this option, click “More Options”
  • Edit the hierarchy of the bookmarks (level 1, 2, 3 etc or all level 1) via More Options (note, you can control the look of your TOC by setting up specific Styles for the TOC text and spacing)
  • Update the TOC when changes to the document are made (Layout > Update TOC)

Screen shot of the Map Styles to Tags window in InDesign

 

Step 4. Finishing Up Your Design

  1. Map Styles to Tags (menu at the top right of the Structure pane > Map Styles to Tags)
    1. Select appropriate Tag for each Paragraph Style from the dropdown menu
      • Avoid using the H tag. This isn’t a widely recognized tag.
      • Anything not tagged will automatically be tagged as P (paragraph) – one less thing for you to do! 
    2. Tag footers/headers, page numbers, decorative images as Artifact (select the element > control Click > Tag Frame > Artifact)
    3. Add ALT text to image metadata in Bridge (if not done already) or using Object Export Options in InDesign (Object > Object Export Options > Custom)
    4. Delete any content from your pasteboard (this can carry over with the PDF and will be read by screen reading software). If you need to leave content there (eg: TOC), tag it as Artifact.

Screen shot of the Advanced Accessibility Options when exporting a PDF from InDesign. Display Document Title and English is shown

Step 6. Exporting Your Design to PDF

  1. Select PDF (Interactive) from the dropdown menu
  2. Confirm that “Create Tagged PDF” is selected
  3. You can also set things like PDF how you’d like the PDF to open up (ex: Fit Page) or carry over the Document Title to the PDF from your InDesign’s File Info

Screen shot of the Tools panel in Adobe Acrobat DC. Accessibility is highlighted under Protect and Standardize.

Step 7. Polish-Up Your PDF in Acrobat

  1. If in an older version of Acrobat Pro: Run Action Script (File > Action Wizard) if you have one set up for Accessibility (You can create your own, or use the default Accessibility script in Acrobat. I highly recommend making your own)
    If using Acrobat Pro DC: Run the Full Accessibility Check (Tools > Accessibility)
  2. Attend to any errors that maybe reported by the Full Accessibility Check of the Action Script (Pro tip: Google unknown errors for help)
  3. Tweak Reading Order (Tools > Accessibility > Touch-up Reading Order) if necessary.
    • Remember to drag down not up – and to save frequently.
  4. Instead of thinking of the document laterally or what your eye goes to first, consider what is the most important content (eg: the title could be 1st in the Reading Order, not a logo for example)

Note: If images are missing ALT tags, I encourage you to go back into InDesign and add the ALT text there – this will help out future designers updating your file, or you if you end up exporting the document again if there are additional changes.

General Tips

  • If colour is used to convey information, consider additional ways to convey that same information. For example, instead of wrong answers on a demo test being just in red, add the word “Incorrect:” at the beginning of the sentence. This will add a text cue to the colour cue that this answer is wrong.
  • Avoid using excessive ALL CAPS, bold, underline, and italic text as this can be distracting and inhibit the readability and legibility of a document.

Recommended Resources

Further information, instructional guides, and troubleshooting tips can be found online. Free resources from InDesign Secrets, Lynda Online Tutorials, Accessible Office Document Project (ADOD), WebAIM, Adobe Accessibility and Adobe forums are good places to start.

Advertisements

Author: nchitty

Inclusive designer based out of Toronto.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s