Designing for Digital Accessibility: InDesign to PDF

Creating accessible digital documents can feel daunting, especially if you don’t have a background in writing code. 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 does not cover everything of course, but will get you going on the right foot.

Screen captures had yet to be added – but there are some coming!

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.

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. A single text frame is ideal for controlling reading order.

Note: You can format the text using built-in formatting tools such as columns (split/span), paragraph indenting, space before/after, baseline shift etc.

  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.
  • 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)

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.
      • Anything not tagged will automatically be tagged as P (paragraph)
    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 carries over to Acrobat and will be read by screen reading software). If you need to leave content there (eg: TOC), tag it as Artifact.

Step 6. Exporting Your Design to PDF

  1. Select PDF (Interactive) from the dropdown menu
  2. Confirm that “Create Tagged PDF” is selected

Step 7. Polish-Up Your PDF in Acrobat

  1. 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)
  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 should be 1st in the Reading Order, not a logo for example)

Note: If images are missing ALT tags, you may want 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 last minute 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.

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.