Designing for Digital Accessibility: InDesign to PDF

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

Putting it in Perspective

I thought this was a great way to put disability in perspective using humour and everyday situations.

I thought this was a great way to put things in perspective using humour and everyday situations:

Here are the links to Part 1 and Part 2 if you’d like to see the whole video.

(I particularly enjoyed the waiter scene in Part 2. I think many people from different cultures and social class can relate to this as well)

Dissertations Related to Eye Gaze Interface Design

Dissertations related to eye gaze technology, with a focus on interface design.

A young woman sits in front of a computer screen. Two red circles are aglow at the base of the screen where the infrared is reading her pupils as she types using her eyes.
Photo of author using the MyTobii, a computer operated by eye gaze.

During my research on interface design for eye gaze technology, I have found some interesting dissertations on the topic. For those who are interested in this area or related fields, here are some great reads:

Drewes, H. (2010). Eye Gaze Tracking for Human Computer Interaction. LFE Median-Informatik der Ludwig-Maximilians-Universitat Muchen.

This is dissertation on eye tracking and is a wealth of information on the history and basic information on eye tracking,  Fitts Law for the eyes, and considerations for interface design. Also, it provides an insight into methodology and user testing used in the study of eye gaze interaction design.

Kumar, M. (2007). Gaze-enhanced User Interface Design. Stanford University.

This is a dissertation on using eye gaze to subsidize keyboard and mouse use to reduce repetitive strain injuries. Eye gaze is promoted as an alternative to point and selecting, scrolling, document navigation, switching between applications, password entry, and zooming for both able-bodied and disabled users.

Majaranta, P. (2009). Text Entry by Eye Gaze. University of Tampere.

This dissertation is on increasing text entry speed and accuracy by gaze through changes in the interface. Areas discussed include visual and auditory feedback, process and how it effects usability, and the addition of interaction widgets.

My own guidelines on user interface design for eye controlled computers is available online as a PDF, including a literature review.

If you have any dissertations or papers to suggest on interface design for eye gaze technology, please feel welcome to share them below in the comments section. Thank you.