Indesign CS6: Steps to Document Accessibility

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

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 12

Practice inserting tables 15

3. Practice inserting Graphics 17

4. Insert Decorative items 17

5. Verify Reading order 19

6. Export options 19

Exporting to HTML 20

Exporting to a PDF 22

6. Checking final documents 24

Export Options 24

Pros and Cons of Export Options 24

HTML format 24

PDF format 24

PDF Pros and Cons 24

Cons to a PDF, Pro for HTML 24

Helpful Tips to Creating an InDesign Document with Accessibility as a Priority 25

1. Have content prepared and organized with headings 25

2. Have a rough layout: drawn on a sheet of paper or a standard template available for the document you wish to create. 26

3. Insert Headings 26

Assign Style and Export Tags 26

5. Insert Content 27

6. Assign Style and Export Tags 27

Tables 27

Footnotes 27

Hyperlinks 27

7. Insert Pictures 27

Modify layout 27

Insert Image ALT tags 27

Assign Anchors 27

8. Insert Decorative items 28

Assign Style (Export Tag as Artifact) 28

9. Verify Reading order 28

Correcting Previously made Documents 28

Resources 28

Check Lists 28

Tips to Organizing and creating an InDesign Document 29

Tips to Correcting a Previously Made Document 29

Accessibility 30

InDesign 30

Instructions 30

Online tutorials 30

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

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 / 1

Sample Steps: (screens shots and examples)

1. Content provided and Layout provided

1. Locate and open the content and layout documents provided.

Word document: Content to build ID doc.docx

Insert picture

SampleTemplate.indd

Insert picture

2. Example of sample layout:

SAMPLE: Outside Pamphlet layout

SAMPLE: Inside Pamphlet layout

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.

3. Go to the Content to build ID doc.docx open.

4. Find the About heading. Highlight content and copy.

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.

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 if you need to move content to a new box. This process maintains reading order.

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.

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.

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.

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.

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.

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.

8. Change the PDF tag to Artifact.

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.

To export your InDesign document: In the menu bar, select File and then Export.

Exporting to HTML

1. In the Format drop menu, select HTML.

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.

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

1. In the Format drop down menu, select Export to Interactive PDF.

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.

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.

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.