Understanding Accessibility in Electronic PDF Design Layouts
As a designer, translating InDesign layouts to an electronic PDF that a screen reader can read is sometimes an exercise in problem solving. The main thing to be aware of: when you set up a document to export to Adobe Acrobat Pro, you must order the layers opposite to what you are used to. Don’t worry—once you get this method down, you will be able to create PDFs from InDesign with relative ease. It just takes a little practice!
Tips for the design phase:
- Use "threaded text" - this will help with defining reading order
- Use paragraph styles - this can help with tagging
- Check color contrast with a contrast checker, or design with an AA or AAA verified color palette
Incorporating eAccessibility into a designed document
Start with a final design layout in Adobe InDesign CC:
Working in InDesign
Prepare for tagging
- Open the “Layers” palette (Window > Layers) - this will show all items in the layout
- If all the elements in your layout are not showing, scroll open the arrow next to “Layer 1” in your Layers palette:
- Ungroup any and all groups - this will allow you to move items into the proper order without visibility issues (Object > Ungroup)
Tag all content
NOTE: if you do not see any tags in the tag panel, you may have to create your own tags. . Be sure to use standard XML tags
The most common tags and what they tell the screen reader are:
- Artifact - background image with visual information only; ignore
- Figure - image with visual content; alt description will be read aloud
- H1 - the main idea of the page
- H2 - the main idea that falls under H1
- H3 - the main idea that falls under H2
- P - story or body text
- Table - tabular data organized into a simple table
- Root - all of the main document
For more information, visit InDesign's User Guide: Tag Page Items
- Open Tags Panel (Window>Utilities>Tags)
NOTE: You may need to add the tags Artifact, Figure, H1, H2, H3, P, Table, Root into your tags panel using the “New Tag” button at the bottom of
the tags panel (the second icon from the left that looks like a paper with a corner turned down.)
- Select object in the document layout (Here, the large image containing the slide layout is selected)
- Select a tag (You may have to scroll down in the tag list; the tag “Figure” was chosen.) Your object is now tagged.
- Repeat for all objects on page (Even items that are purely decorative e.g., rectangles, arrows, etc. need a tag)
NOTE: Your document will have multicolored frames on each object when complete. To hide these, choose View>Structure>Hide Tagged Frames; to show them again, choose View>Structure>Show Tagged Frames
This is an alternative way to tag items. For this tutorial, we will use the manual tagging method. If you are interested in the automatic tagging process, visit the InDesign User Guide: Add structure to PDFs
- Select a tagged figure in your document
- Choose Object>Object Export Options…
- Select the heading “Alt Text” in the popup window
- Select “Custom” from the dropdown menu
- Type an appropriate description in the grey box
NOTE: Items tagged as “Artifact” do not need an alt description
Adjust Layer Order
You will need to reorder the items in your Layers Palette in two ways:
- To preserve the appearance in layering your objects AND
- To reflect the reading order of the document, or the order in which the words are read aloud by the screen reader.
- It can be helpful to think of your document in larger layers: background, mid-level, and top level.
Organizing for design layers
- Open Layers Palette (Window>Layers)
- Place all background images (Artifacts) at the bottom of the layers palette (TIP: If you select an object, the indicator square on that layer in the layers
palette will highlight, making it easy to see which layer you need to move.)
- Place all mid-level objects on top of the background images in the layers palette
- Place all top-level images at the top of the layers palette
- When you are finished, your layout should look exactly the same as when you created it.
Organizing for Reading Order
Now, we are going to organize for reading order in the layers palette. The items you want to be FIRST in the reading order need to be at the BOTTOM of the layers palette list; the items you want to be read LAST need to be at the TOP of the layers palette list.
IMPORTANT: This can be confusing to designers, because it is counterintuitive to layout skills. You may need to think creatively at times; items that may need to be read first, for example, may not be able to be moved right away because they would shift to underneath another design element.
Be patient and try to think outside the box.
Organize all mid-level objects into reading order in the layers palette
- Lastly, organize the objects in the top layers into reading order in the layers palette
Add Title to your document
- Choose File>File Info…
- Add a descriptive title in the “Document Title” field
OPTIONAL: Enter other information about your file
Export to PDF
- Choose File>Export… and enter the name of your file into the “Save” dialog box
- Select which folder you want to save the file to
- Choose “Adobe PDF (Interactive)” from the dropdown menu
- Select “Save”
- In the Export to PDF dialog box, under Options, make sure “Create Tagged PDF” and “Use Structure for Tab Order” have check marks next to them
- Select “Export” and InDesign saves the PDF file
- Navigate to where you saved your file
- Make a copy of the file as a backup. NOTE: The only way to undo in Adobe Acrobat is to reverse your action, close the file and not save, or start over with your original exported document. By working on a copy of the file, you preserve your original export in case you make a mistake.
- Open your PDF file in Adobe Acrobat Professional DC
Working in Adobe Acrobat Professional DC Open Accessibility Tool Options
- Open your file in Adobe Acrobat Professional DC (The free version, Adobe Acrobat Reader, will NOT work in this case.)
- Select the “Tools” submenu/tab
- Scroll to the subhead “Protect & Standardize”; select “Accessibility”
- You should now see your document with a set of accessibility tool options on the right-hand side
Working on Tags/Reading Order
- Select “Reading Order” in the Accessibility Tools submenu on the right side; this highlights all the elements in your document and opens the Reading Order submenu
The numbers and corresponding boxes are all individual elements translated from InDesign. Sometimes, text does not translate as a single block element.
- To clean this up, place cursor over the number until it changes to a hand and click to select the box. Hold the “Shift” key down and click the additional number(s) to select the elements(s) you’d like to combine in the same manner.
- With the boxes still selected, in the Touch Up Reading Order submenu, select the button that best describes your content (in this case, it was “Text”). The numbers and boxes should now combine into one.
- NOTE: Sometimes, the boxes you select will highlight in blue and sometimes it will remain grey. If you clicked the number with the hand tool, it is selected, even though the boxes might remain grey.
- Repeat for all remaining elements, including “Background” elements, which are any extra returns or figures that are only relevant to sighted users.
- NOTE: If you select “Figure” for an image already defined as a figure with an InDesign tag, the previously populated alt text will be erased and you will have to enter a new one through Adobe Acrobat Professional.
- Save your progress often (File > Save or cmd-S/ctrl-S). There is no “undo” in the accessibility features in Acrobat, so saving often and creating one or more backups can help to save your progress if you make a mistake.
- You are finished when all numbered elements are consolidated and/or tagged appropriately.
Clean up reading order
Since we went to so much work in InDesign to make sure the layers were in the correct order, the reading order probably will not have to be revised. Look through your document, though, to make sure everything reads in the proper order.
- If you need to revise reading order, select “Show order panel” in the “Touch up Reading Order” window. The “Order” touch up panel opens to the left of the document.
- The numbers next to each container in the list correspond to each element in your layout.
- Click and hold the element you would like to move. Drag up or down to the desired location in the reading order. (The line shows you where you can place it.)
- Drop the element in the desired reading order and it will re-number according to where you dropped your element.
NOTE: In some cases, the text will disappear behind a graphical element when you re-order. To avoid this, you must make sure your layers are arranged in correct reading order in InDesign before you export to PDF. If this happens, you will have to reverse what you just did, close your document without saving and re-open it, or open the originally exported copy. THERE IS NO “UNDO” option currently available in Acrobat Professional. In some cases, it might be necessary to re-visit your original layout in InDesign and re-export a new PDF.
3. When you are finished, close the Order panel.
Run Accessibility Checker in Acrobat
The accessibility tool options still should appear on the right-hand side menu. (If not, Select the “Tools” submenu/tab; scroll to the subhead “Protect & Standardize”; select “Accessibility”.)
- Select “Full Check” to open the “Accessibility Checker Options” dialogue box.
- Select all categories
- Select the “Start Checking” button; the dialogue box will close, but the “Accessibility” window will now be apparent on the left side of the document.
If your document has issues, the section header will be highlighted in bold; fix any known issues
NOTE: To expand the highlighted issues, click on the arrow and the list will scroll open.
This document has two errors:
- “Logical reading order - Needs Manual Check”.
- We’ve already manually checked the reading order and know that it is ok
- Color contrast - Needs manual check”
- Download a Color Contrast Analyzer, or spot check the colors on the document using an online Color Contrast Ratio Checker.
OPTIONAL: For more details about the issues in your document, select “Accessibility Report” in the accessibility tool options window.
When selected, the links under “rule name” in the Detailed Report document table will open into a web page with more detailed explanations of the issue.
For a list of other potential issues and their explanations, visit Adobe Acrobat's User Guide: Accessibility, tags and reflow.
Complete: Tagged PDF
Don’t forget to save your document (File>Save, cmd-s or ctrl-s) in Adobe Acrobat Professional before closing