InDesign CS6: Steps to Document
Accessibility: Delivered by ITS Training
Services for Penn State
Version 04/2013
ITS Training Services
23 Willard Building
University Park, PA 16802
814-863-9522
[email protected]
InDesign CS6: Steps to Document Accessibility
1
Table of Contents
Welcome and Introduction .........................................................................................4
What You Should Already Know ........................................................................................................................4
Objectives.....................................................................................................................................................................4
What You Will Need To Use These Materials ................................................................................................4
Getting Started ...........................................................................................................4
Getting the Exercise Files ......................................................................................................................................5
Introduction to Accessibility in InDesign ......................................................................5
Sample Steps: (screens shots and examples) ...............................................................6
1. Content provided and Layout provided ........................................................................................................ 6
SAMPLE: Outside Pamphlet layout ...................................................................................................................... 6
SAMPLE: Inside Pamphlet layout ......................................................................................................................... 6
2. Insert heading then following threaded content...................................................................................... 7
Assign Style then tags for each text box ....................................................................................................... 11
Practice inserting tables ..................................................................................................................................... 14
3. Practice inserting Graphics ..............................................................................................................................16
4. Insert Decorative items ......................................................................................................................................16
5. Verify Reading order............................................................................................................................................18
6. Export options ........................................................................................................................................................18
Exporting to HTML................................................................................................................................................ 19
Exporting to a PDF ................................................................................................................................................ 21
6. Checking final documents .................................................................................................................................23
Export Options .......................................................................................................... 23
Pros and Cons of Export Options .................................................................................................................... 23
HTML format ........................................................................................................................................................... 23
PDF format ............................................................................................................................................................... 23
PDF Pros and Cons.....................................................................................................................................................23
Cons to a PDF, Pro for HTML ................................................................................................................................23
Helpful Tips to Creating an InDesign Document with Accessibility as a Priority .......... 24
1. Have content prepared and organized with headings....................................................................... 24
2. Have a rough layout: drawn on a sheet of paper or a standard template available for the
document you wish to create............................................................................................................................ 25
3. Insert Headings .................................................................................................................................................. 25
Assign Style and Export Tags ...............................................................................................................................25
5. Insert Content..................................................................................................................................................... 26
6. Assign Style and Export Tags...........................................................................................................................26
Tables ..............................................................................................................................................................................26
Footnotes .......................................................................................................................................................................26
Hyperlinks......................................................................................................................................................................26
7. Insert Pictures .................................................................................................................................................... 26
Modify layout ...............................................................................................................................................................26
Insert Image ALT tags .............................................................................................................................................26
Assign Anchors ............................................................................................................................................................26
8. Insert Decorative items .................................................................................................................................. 27
Assign Style (Export Tag as Artifact)................................................................................................................27
9. Verify Reading order ....................................................................................................................................... 27
2
InDesign CS6: Steps to Document Accessibility
Correcting Previously made Documents .................................................................... 27
Resources ................................................................................................................. 27
Check Lists ................................................................................................................................................................ 27
Tips to Organizing and creating an InDesign Document ........................................................................28
Tips to Correcting a Previously Made Document ..................................................................................... 28
Accessibility ............................................................................................................................................................. 29
InDesign ..................................................................................................................................................................... 29
Instructions ...................................................................................................................................................................29
Online tutorials ...........................................................................................................................................................29
InDesign CS6: Steps to Document Accessibility
3
Welcome and Introduction
InDesign is a widely used tool to design and publish documents. Here are some quick
steps to address key elements in making a short InDesign documents accessible. InDesign
can export a document to accessible HTML document for the Web and for accessibility
access. And when exporting to a PDF file these steps make it easier to make the
document accessible in a PDF format. Remember these accessibility features are only
available in recent InDesign versions 5.5 and 6.
What You Should Already Know



Take note of accessibility factors for font selections
(http://accessibility.psu.edu/fontslayout) and the use of color contrast and color
deficient (http://accessibility.psu.edu/color ) issues when designing the document.
Experience with graphic placement, applying styles, and threading text is strongly
recommended in InDesign.
Experience with word processing software; use of headings and formatting.
Objectives
•
Understand and appreciate accessibility elements and how they contribute to
enhance design and organization of a document.
Preventative organizational approach to designing an InDesign document with
Accessibility as a priority.
Correct an InDesign Document with Accessibility in mind.
Add image ALT tags and anchoring to content
Verify reading structure and correct reading order with accessibility in mind
Add metadata
Learn exporting options and the pros and cons for accessibility use.
•
•
•
•
•
•
What You Will Need To Use These Materials




Computer
InDesign software: version 5.5 or greater
Word Processor (Any version that allows accessibility features. i.e. Microsoft
Word for PC or Mac.
Completed Publication Checklist
o http://its.psu.edu/training/handouts/Getting_Started_InDesign.pdf
o Content will be provided in lesson
Getting Started
4
InDesign CS6: Steps to Document Accessibility
Getting the Exercise Files
???
Introduction to Accessibility in InDesign
Adobe InDesign is the industry-standard publishing application. This workbook is
designed to offer the best practices in the form of workflow to minimize and reduce
accessibility issues in the creation of an InDesign document. The InDesign
application allows users to design various document for print publication,
interactive PDF documents, digital magazines, Web sites, and EPUBs.
Accessibility features have been developed in the versions 5.5 and 6.0. These
features allow you to make InDesign documents more accessible in several ways.
These features allow you to approach accessibility in two ways:
1. Creating documents with Accessibility as priority
2. Correcting previously made documents
Note: If creating a PDF document in InDesign you are required to complete the
process in Adobe Acrobats PDF-maker application. The accessibility tools in the
InDesign application will reduce the steps to achieve an accessible PDF. However,
the process is still laborious and complex.
InDesign CS6: Steps to Document Accessibility
5
Sample Steps: (screens shots and examples)
1. Content provided and Layout provided
1. Locate and open the content and layout documents provided.
a. Word document: Content to build ID doc.docx
Insert picture
b. SampleTemplate.indd
Insert picture
2. Example of sample layout:
SAMPLE: Outside Pamphlet layout
SAMPLE: Inside Pamphlet layout
6
InDesign CS6: Steps to Document Accessibility
The document is numbered and labeled with the heading order and associated
content. Adding the content in this order allows for order of reading to be
established.
2. Insert heading then following threaded content
1. Open Content to Build ID doc.docx
2. Open SampleTemplate.indd
3. In the .indd document be sure to open up pages in the right side in the palettes
and select page 2.
InDesign CS6: Steps to Document Accessibility
7
3. Go to the Content to build ID doc.docx open.
4. Find the About heading. Highlight content and copy.
8
InDesign CS6: Steps to Document Accessibility
5. Go to the InDesign Template, select the document and application by clicking
on the document.
6. Right click your mouse and paste the content. It will appear in the middle of
the document.
7. Use the selection tool
and click on the textbox that you pasted in the
InDesign document. Little boxes will appear around the textbox.
InDesign CS6: Steps to Document Accessibility
9
8. Place the selector tool on the center of the Textbox and drag it to the
appropriate column.
9. Next, modify the shape of the text box to match the template provided.
10. Next, go back to the Content document and repeat the copy and paste process
with the Program description.
11. Paste it to the InDesign doc as you did with the About heading.
12. Move and modify the text box. You will notice the Threading icon
you need to move content to a new box. This process maintains reading
order.
1
0
if
InDesign CS6: Steps to Document Accessibility
13. Continue this process of cutting and pasting content with the numbered
outline in the document above. This will ensure proper reading order to be
exported.
Assign Style then tags for each text box
14. Next, Create the styles for the Heading. Using the selection tool
, select
the About Heading. Triple clicking on the work will select the box and
automatically highlight the content.
15. Go to the Palettes panel to the right side and select the Characters Styles icon.
16. You select the new character icon to create a new Character Style.
InDesign CS6: Steps to Document Accessibility
1
1
17. Select the new Character Style, right click and select edit Character Style.
18. This will open the Character Style Pane.
19. Select Basic Character Formats in the options list on the left.
20. Change the Style Name to an appropriate identifying name.
21. Alter the Basic Character Formats as you see fit to meet creative styles. Be
sure to use your knowledge of accessibility issues concerning Fonts and Text
Layouts (http://accessibility.psu.edu/fontslayout).
22. Use the Preview check box to see how your font and layout look as you edit.
23. Don NOT select OK.
1
2
InDesign CS6: Steps to Document Accessibility
24. Next Select Export Tagging in the Options panel on the left of the
Character Style Options Pane.
25. Check that Tag is labeled as automatic and Class is labeled the appropriate
heading. This function will allow it to export the heading code to the new
format. For this heading we have identified it as h1.
26. Select OK.
NOTE: If you are exporting to EPUB or HTML, use Character Styles Option
Pane and the Export Tagging Function to label your content for export.
This example shows this function and is the recommended workflow.
InDesign CS6: Steps to Document Accessibility
1
3
27. Repeat this process for the entire content in the order that was laid out in the
Sample Pamphlet Layout.
Practice inserting tables
28. Draw a text box in the appropriate location in your Pamphlet.
29. Fill in the Table Dimensions for in the Insert Table pane.
1
4
InDesign CS6: Steps to Document Accessibility
30. For this example use 1 for body row, 2 for columns and 1 for header row.
31. For a Table, it is not necessary to edit the Export Tagging function. But
formatting a Character Style will be necessary. Create a new Table Style
under the Character Style pane.
32. Finally, anchor that table to the corresponding text. This will allow the table
to be read following the text.
InDesign CS6: Steps to Document Accessibility
1
5
3. Practice inserting Graphics
1. Inserting a graphic by placing directly on content.
2. Modify text around the Picture to suite the format.
3. Insert ALT Image Tags.
4. Anchor image in text the same as you would any object.
4. Insert Decorative items
1. The pamphlet will have light blue as a background color for all the headings. This
can be done many ways. For this demonstration we will insert a colored box behind
the headings.
2. Create a new layer and remember to label them. Remember to lock the text layer
3. Select the colored box with the selector tool.
4. Go to Paragraph Styles.
5. Create a new paragraph style.
6. Right Click Edit the Artifact style.
7. Go to Export Tagging in the paragraph Styles pane.
1
6
InDesign CS6: Steps to Document Accessibility
8. Change the PDF tag to Artifact.
InDesign CS6: Steps to Document Accessibility
1
7
NOTE: Use paragraph styles to tag items to be exported for PDF. This method is
discouraged due to the arduous process to make a PDF accessible.
5. Verify Reading order
Reading Order Tools
Use the reading tools to verify reading order and establish the reading order.
1. Go to the Menu bar above and select Windows, then select Article. This
will open up the Articles Panel. Here you can see the order of document
contents or place those contents in order with a simple drag and drop into
the Articles Panel pane.
2. Be sure to select the correct layer.
3. To place content in order hold the shift button down, with the selection
tool (black arrow), click the items (each individual content box) in the
desired order, on a completed design in InDesign page.
4. After selecting the last item hold the mouse button down and rag all the
items to the Articles Panel. A list of the items will populate in the order
you selected. Go to Adobe InDesign CS6 accessibility for an instructional
video.
Note: If you have anchored and image there is no need to select the image in order
with the content.
6. Export options
Export Options
The InDesign document may be exported into several types of document or
files. The common document is Adobe PDF, but an HTML file is recommended.
The HTML document and creation of a Web page is considered a more
accessibility friendly document and can be printed as PDF document by the
user. Exporting to a PDF document is not the first choice for an accessible
document for online access, due to the complex procedure required to make
the document accessible.
1
8
InDesign CS6: Steps to Document Accessibility
To export your InDesign document: In the menu bar, select File and then Export. Exporting to HTML
Exporting to HTML
1. In the Format drop menu, select HTML.
InDesign CS6: Steps to Document Accessibility
1
9
2. The HTML Export Options menu will appear. Select and Verify that the
Same as Articles Panel radio button is selected. Select and Verify
Formatting Options. Bullets should be Map to Unordered Lists and
Numbers should be Map to Ordered Lists.
2
0
InDesign CS6: Steps to Document Accessibility
3. Select OK.
The HTML file can be modified before uploading to the web or attached to a Styles
sheet before the exportation process under the Advanced menu. But this is not
necessary to create an accessible document.
Exporting to a PDF
Exporting to a PDF
1. In the Format drop down menu, select Export to Interactive PDF. InDesign CS6: Steps to Document Accessibility
2
1
2. The Export to Interactive PDF display will show.
3. Be sure to select Include All radio button next to Forms and Media.
4. Under Tagged PDF, check Create Tagged PDF and Use Structure for Tab
Order. 2
2
InDesign CS6: Steps to Document Accessibility
5. Select OK to complete the process.
6. Checking final documents
Export Options
Pros and Cons of Export Options
HTML format
There are benefits to exporting the InDesign document an HTML format.
1. Screen readers are designed to navigate and read HTML pages.
2. The content is easily delivered to web browsers. Most of all computers and
mobile devices have web browsers.
3. The reader can print the HTML code or web page into a PDF document. This
allows true consistent portability of the information.
4. The CSS coding can be added to print the document to preserve visual
elements and content.
5. HTML coding will support all interactive media with ease and easily meet
508 compliance.
6. Security and sharing of the information is easily noted. The document can be
shared with the ease of a web link and is easily traceable with a simple
browser search.
7. The data is not stored on your computer so the compression and sharing of
information is not an issue since it is not downloaded.
8. The HTML format allows for multimedia support and interaction.
PDF format
The benefits held to the use of PDF, but avoidable depending on the required use of
a document.
PDF Pros and Cons
1. An inaccessible PDF is very easy to create. An accessible PDF is much more
difficult.
2. PDFs are difficult to read on most mobile devices.
Cons to a PDF, Pro for HTML
1. To make a PDF document 508 compliant and mobile, the process to add tags
for screen reader navigation is laborious, time consuming and not cost
effective, on a large scale.
2. The argument of preserving visual elements is more effectively met with
placing the information in HTML coding and the use of CSS styling of the
document.
InDesign CS6: Steps to Document Accessibility
2
3
3. The interaction of multimedia and hyperlinks are designed and automatic for
HTML coding and must be activated in a PDF document. Meaning less work
and less chance for errors to occur with the use of correct HTML coding.
4. Security for a PDF must be activated for the document. Furthermore
Scanning a file and OCR-ing the document to create a new document is an
easy way to circumnavigate and copy the information. HTML coding will
allow for easy tracking of the information. If the information is copied, it is
now easily traced with as simple search on a web browser’s search engine.
This provides accountability of information. Modification to information
made on a website is tracked. Furthermore a website can be designed to
securely store information for limiting and tracking access. The mobility of a
PDF, the ability to create a new document from a secured one, does not allow
for a traceable source where an HTML document does.
5. Using an HTML document or web page eliminates the issue of compressing a
file. If a person wishes to download the information, a person can download
the information in any format they wish and at any compression they desire.
The document is only read and temporarily projected on a web browser, thus
protecting the integrity of the information.
NOTE: Modifications and editing is required for both export options. However, the
HTML code is easier to identify issue in the code and correct to meet accessibility
issues. Once again, the process to make an accessible PDF document is laborious
and a detail process. So, be sure it is necessary for you to make your InDesign
project into a PDF document. These steps above only minimize the steps towards
making a PDF document accessible. The process must be completed in a PDF maker
software, such as Adobe Acrobat PDF maker.
Helpful Tips to Creating an InDesign Document with Accessibility
as a Priority
1. Have content prepared and organized with headings
Using the publication checklist found in the “Getting Started with InDesign” handout
will give you a guide to create the content for your document. This should all be
completed, organized in the order with which you wish it to be read, and tagged
with headings.
In this lesson we have provided the content.
2
4
InDesign CS6: Steps to Document Accessibility
2. Have a rough layout: drawn on a sheet of paper or a standard template
available for the document you wish to create.
Have a rough sketch detailing the layout of your InDesign Document. Simply
drawing out the layout of a project prior to beginning your InDesign document, will
give you an idea of what you would like your document to look like.
If it is brochure:
 How many pages?
 How many columns?
 Is it a trifold, a flyer, etc.?
 Where do you want pictures to go?
 Color selection?
 Decorative elements?
Create a framework to guide you. Know that this is not set in stone and you may edit
your project in InDesign. This is necessary to know because the order with which
you build your document will save you time trying to make the document accessible
later. Meaning, you will have less to correct or fix.
A diagram is provided.
3. Insert Headings
Each time a Text box or item is created on an InDesign page, the order with which
the items were place is transferred over. Inserting headings allow navigation of the
heading to be chosen first. For those using screen readers, navigating headings
allows them to navigate and assess the contents of a document quickly and easily.
NOTE: The heading is inserted then the content in a separate text box is inserted
after the heading. All content boxes should be inserted in order of reading.
Assign Style and Export Tags
With each decorative heading placed on the document, InDesign allows you to
identify the content two ways. First is assigning a Style. This will allow the
decorative elements of the text to have continuity throughout the document. Next,
the Style is associated with a Tag, such as H1 for Heading 1, H2 for Heading 2 and
so on. This allows the user of a screen reader to navigate based on the tags and
order of the document. There are only 9 export tags available.
Assignable Export Tags in InDesign for:
P
Paragraph
H
Header
H1
Heading 1
H2
Heading 2
H3
Heading 3
H4
Heading 4
H5
Heading 5
H6
Heading 6
InDesign CS6: Steps to Document Accessibility
2
5
Artifact
Artifact
5. Insert Content
After placing all the text boxes and assigning Styles and Tags to them, you will want
to place the main content as one Threaded text. This means taking all of the content
and placing it in one text box under the appropriate heading.
6. Assign Style and Export Tags
The main content will be assign a Style or decorative style to the text and then a Tag,
such as P for paragraph will be assigned to that style. This will identify the content
for a screen reader.
Note: Tables, footnotes and hyperlinks are part of the content order and do not
have to be tagged, but place in proper order.
Tables
Tables do not need to be tagged. A table and the information is accurately identified
and tagged during the export process.
Footnotes
Footnotes do not need to be tagged. Footnotes are also, identified in the export
process.
Hyperlinks
Hyperlinks do not need to be tagged. Hyperlinks are also, automatically identified in
the export process.
7. Insert Pictures
Next you will want to place pictures in the content.
Modify layout
A nice feature of InDesign is the ability to place the picture directly on the content
and select how you would like the text to flow around the picture.
Insert Image ALT tags
Since a screen reader cannot interpret shapes and colors in a picture, the insertion
of an ALT tag is necessary. An ALT tag is a short description of the picture placed.
Assign Anchors
InDesign has a wonderful feature for those who use screen readers. The image can
be anchored to the text. This means that the ALT tag description can be anchored to
be read after specific text within the your content. Normally, people see the image
on a layout and as they read they build an association to the content. A screen
reader allows this description to follow specific content in the appropriate context
to build meaning for those using a screen reader, since most users of screen readers
will have limit or no use of their vision.
2
6
InDesign CS6: Steps to Document Accessibility
8. Insert Decorative items
Lastly, you will want to place decorative items. Such items as a colorful line
underlining the header, a decorative border or colorful background emphasizing
particular content.
Assign Style (Export Tag as Artifact)
The decorative items must now be tagged as an Artifact. This will identify the
decorative items as non-readable material. The collective decorative aesthetics or
layout are not interpretable to a screen reader as of yet and may have no meaning
for those with a visual impairment. This Artifact tag allows the screen reader
program to focus on the content and ignore the decorative aesthetics of the
document and allowing essential navigation and reading of information.
9. Verify Reading order
After all items have been tagged, InDesign has the option to verify the reading order
of the content and assign an order or reading flow to the document.
Correcting Previously made Documents
Correcting a previously design InDesign source document maybe approach in two
ways.
1. Copy and paste the content in the workflow describe and taught in this
lesson. Use the “tips to Organizing and creating an InDesign Document” and
copy and paste the inaccessible document into a new InDesign document.
This may be the most efficient and less time consuming way, depending on
the skill level of the creator of the original source document. Issue such as
assigning Styles to the content, then adding tags to the corresponding Styles
may become laborious depending on the decorative complexity the creator of
the original document used. Furthermore, the use of the Reading Order Tool
does not always work in congruence with the tagging of the Styles when
exporting to a PDF document. To correct this in a PDF document, the process
is laborious, with complex multiple steps, involving tags, bookmarks, and the
deletion and inserting of navigational information.
2. The other option is to apply the accessibility tools as recommended by
Adobe. Follow the checklist, as this lesson has covered how to apply the
accessibility option that is offered in InDesign. Step 1 is highly recommended.
Resources
Check Lists
InDesign CS6: Steps to Document Accessibility
2
7
Tips to Organizing and creating an InDesign Document
☐
Complete Publication Checklist
☐
Have a rough layout: drawn on a sheet of paper or a standard
template available for the document you wish to create.
☐
Insert Headings
i. Assign Style and tags
☐
Insert Content
i. Assign Style and tags
☐
Insert Pictures
i. Modify layout
ii. Insert Image ALT tags
iii. Assign Anchors
☐
Insert Decorative items
i. Assign Style (tag as Artifact)
☐
Verify Reading order
i. Tables
ii. Footnotes
iii. Hyperlinks
Tips to Correcting a Previously Made Document
☐ Check text, have Styles been assigned?
If yes, continue with checklist
If no, recreate document by copy and pasting, and use previous checklist
☐
☐
☐
☐
☐
☐
☐
☐
☐
2
8
Add Image ALT Tags
Apply Anchors to Images
Maintaining and Verifying Reading Order Threading Text
Reading Order Tools
Tag Headings and Paragraphs
Add Bookmarks
Add Metadata
Export
Edit
For HTML
InDesign CS6: Steps to Document Accessibility
☐ Load to a web browser
☐ Use an Accessibility checking tool such as WAVE
For PDF
☐ Import or Open in a Acrobat PDF maker
☐ Go to http://accessibility.psu.edu/pdf for steps to
complete an accessible PDF.
Accessibility
Here are some links to sites with advice on the best practices to overcome
accessibility issues in the design of your InDesign document.

Font and Text Layout
http://accessibility.psu.edu/fontslayout

Color Issues
http://accessibility.psu.edu/color

InDesign Accessibility
http://accessibility.psu.edu/Indesign

Create accessible PDF in Adobe InDesign
https://meeting.psu.edu/p3dl0e13pd5/?launcher=false&fcsContent=true&p
bMode=normal

Adobe InDesign CS6 accessibility
http://www.adobe.com/accessibility/products/indesign/
InDesign
Here are some links to improve your skills in the use of InDesign.
Instructions
Getting Started with InDesign
http://its.psu.edu/training/handouts/Getting_Started_InDesign.pdf
Online tutorials
 Lynda.com at Penn State
http://lynda.psu.edu/
InDesign CS6: Steps to Document Accessibility
2
9

3
0
Adobe TV
http://tv.adobe.com/
InDesign CS6: Steps to Document Accessibility