indesign cs6: steps to document accessibility -...

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

[email protected]

Table of ContentsWelcome and Introduction4What You Should Already Know4Objectives4What You Will Need To Use These Materials4Getting Started4Getting the Exercise Files5Introduction to Accessibility in InDesign5Sample Steps: (screens shots and examples)61. Content provided and Layout provided6SAMPLE: Outside Pamphlet layout6SAMPLE: Inside Pamphlet layout62. Insert heading then following threaded content7Assign Style then tags for each text box12Practice inserting tables153. Practice inserting Graphics174. Insert Decorative items175. Verify Reading order196. Export options19Exporting to HTML20Exporting to a PDF226. Checking final documents24Export Options24Pros and Cons of Export Options24HTML format24PDF format24PDF Pros and Cons24Cons to a PDF, Pro for HTML24Helpful Tips to Creating an InDesign Document with Accessibility as a Priority251. Have content prepared and organized with headings252. Have a rough layout: drawn on a sheet of paper or a standard template available for the document you wish to create.263. Insert Headings26Assign Style and Export Tags265. Insert Content276. Assign Style and Export Tags27Tables27Footnotes27Hyperlinks277. Insert Pictures27Modify layout27Insert Image ALT tags27Assign Anchors278. Insert Decorative items28Assign Style (Export Tag as Artifact)289. Verify Reading order28Correcting Previously made Documents28Resources28Check Lists28Tips to Organizing and creating an InDesign Document29Tips to Correcting a Previously Made Document29Accessibility30InDesign30Instructions30Online tutorials30

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

http://its.psu.edu/training/handouts/Getting_Started_InDesign.pdf

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.

2



1

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

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

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

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.

5. Select OK to complete the process.

6. Checking final documents

Export OptionsPros and Cons of Export OptionsHTML 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.

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 browsers 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 Priority1. 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. 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

H 5

Heading 5

H 6

Heading 6

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.

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.

ResourcesCheck Lists

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

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

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&pbMode=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/

Adobe TV

http://tv.adobe.com/