Have InDesign render a gray-scale version of a full color photo.

Managing updates and revisions to both a full color version and a gray-scale version of the same image manually is not easy. Allow InDesign to offer (on import) either version. To do this, take advantage of a feature in Adobe Photoshop called Layer Comps.

The problem can be illustrated with a document that uses a full color version of a photo in one graphic frame and a black and white version of the photo in a second graphic frame. You could simply create a color version and save a copy as a black and white photo. However revisions and updates now require twice the work and twice the caution.

Instead, open the image in Photoshop. Save the image file as a Photoshop Document file. A PSD. By saving the tiff or jpeg or png as a PSD, InDesign will recognize the Layer Comp feature and allow you to make a choice as to which Layer Comp you’d like to apply when you import the file. Make sure to check the option to “Show Import Options”. This is a check-box that should be selected in the lower right area of the Place dialog box.

How do Layer Comps work? The quick answer is that Layer Comps are stored “states” of the settings you can apply to the Layers in a Photoshop Layer’s Panel. You can store the visibility, position and appearance properties of any layer in a Layer Comp.

In Photoshop the first task is to make sure the Adjustments panel is open (normally nested above the Layers panel). Click right next to the Scales (Color Balance) there is a small icon that looks like a box, split down the middle. One side is filled in. The other is not. This button creates a new Black and White Adjustment Layer.

Bring up the Layer Comps panel. You can open it from the Window menu in Photoshop. Click the Create New Layer Comp icon it is a button, in the lower left corner of the dialog box. Name the Layer Comp, perhaps calling it “Black and White version”. Make sure the Apply to Layers: Visibility check box is checked.

Return to the Layers panel. Uncheck the “indicates Layers visibility” switch. It looks like an open eye. This will hide the Black and White Adjustment Layer and remove the effect it has on the layer’s below. Thereby returning your image to full color. You’ll need to save this state of the Layers panel as a new Layer Comp. Click on the Create New Layer Comp button again. Give the Layer Comp a useful name, perhaps “Full Color Version”. Save the PSD file.

When you are ready to import the color version from within InDesign. Select the Place command, make sure the “Show Import Options” check box is checked. Import the PSD file. In the dialog box that opens, look in the lower right side, there will be a drop down menu with the Layer Comp versions available to choose. Choose the Layer Comp for the full color version.


Import the same file again, only this time choose the gray-scale version.


You can now update a single file at anytime back in Photoshop. The state of the layer comps will always be available on update and on import when you return to InDesign.


Great tip for automatic alignment of an InDesign facing page layout

Here’s a possible solution to a problem a student described about the requirement to insert a new left side page into a spread and thereby making the original page 3 end up as page 4, the image was then next to the spine, when it was meant to remain on the outer edge of the page.

Q. How can you create a facing page layout, that automatically keeps a mirror format relative to the spine of a facing page spread.

A. An example of this problem could be a two column facing page layout, that has a left front cover 1 spread in the middle and a back cover (page 6). You’d like to add another page to eventually change the content on one side of the spread. The spread page or pages has a design where a photo covers the top portion of the outside column and forces a text wrap away from all sides of the photo. The problem arises when you attempt to insert a single page into the left facing page of the spread. After doing so, the photo that was on the left on page 2 is now on the left of page 3 and therefore is no longer a mirror of the design structure (where the photo is always over the outermost column away from the spine).


The solution is to use an inline graphic container for the photos. Anchor the inline graphic and apply a conditional anchor based upon the anchor object’s position away from the spine. See the illustration.

The setting that you would set in the Anchored Object Options dialog box after selecting “Custom” in the drop down menu is to check the option “Relative to Spine”. Then set the Anchored Object’s Reference Point box so that it is selected on the left edge (automatically on the right edge as well) and in the middle vertically.

A Position of Custom, and Relative to Spine setting can also be applied to any object on the page including text as long as the object is inline in a text frame. The frame itself can hold nothing more than empty paragraphs with insertion points for the relative to spine aligned objects. To make an object an inline object quickly, leave a copy on the paste board. Copy it and paste it into the text frame as if it were text.

Upon insertion of an extra page. The photo will always anchor to the outermost column, in flow with the page break and inline with the appropriate position in the copy.

Addressing Accessibility with Adobe Web Products

The Challenge —

Provide persons with disabilities, employees and members of the public, access to information that is comparable to the access available to all users.

The Key Considerations —
Develop applications and information services to address all users who may be faced with one or a combination of these physiological conditions.

A person who is blind uses sound to understand the position and movement of screen based elements and uses the keyboard for input. May use a Braille printer. Because the position of the interface cursor is determined by sound, text based information is mainly presented with Screen Reader technology. It is initiated when the information loads, by where it loads, and when it is brought into focus with cursor input.

A person who is visually impaired (low vision) or has damaged vision. Can use the mouse but mainly uses the keyboard for navigation and input or response. Uses visual enlargement of the screen, increasing the overall zoom magnification. This user may  also rely on Screen Readers for large amounts of textual information. Experiment with Windows “Magnifier” tool found in Windows Ease of Access Center to gain an understanding of this experience.

A person with mobility impairment. For this user, the use of devices that require control by the human hand may be impossible. Their one mobility solution is a head or tongue controlled wand or joystick. Attempt to write a short memo using only the eraser end of a pencil clenched between your teeth on a normal keyboard

A person who is deaf. This user can only receive information in text that is displayed. However is not challenged in navigating an application with keyboard or mouse. The receipt of visual information requires the appropriate captions or captioning streams. To place your self in this scenario, watch an instructional video with the sound off.

Individuals who are color blind, will have difficulty with both red and green as well as color backgrounds with low contrast to foreground text or foreground elements. To experience what you intend to develop, imagine it on a gray scale television set.

10% of all human males are color blind.

Ask, what are the specific issues for each user? Know the tools that users will work with to overcome challenges to ordinary access.

Each consideration deals with verbal or captioned feedback , even color blindness to some extent. The greater challenges are addressed (mainly) with screen reader technology.

Provide textual label(s) or screen reader equivalent for things that a seeing person would have to describe to a blind person.
Control the reading order so that all design elements follow in logical order.

Describe all motion and animation elements just as you would images.

Ensure that access by mouse has the equivalent access by keyboard.

Understand the concept of PROGRESSIVE DISCLOSURE.
Always provide captions in whatever method the application allows.

Provide controls over audio, especially background audio.
When selecting colors, first consider color blindness and do not neglect low vision. Make contrast the first consideration in choosing foreground and background elements.

508 Basics
Web-based intranet and internet information and applications. (from The US Government Website on the Section 508 Law  http://www.section508.gov/index.cfm?FuseAction=Content&ID=12#Software)

(a) A text equivalent for every non-text element shall be provided (e.g., via “alt”, “longdesc”, or in element content).

(b) Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation.

(c) Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.

(d) Documents shall be organized so they are readable without requiring an associated style sheet.

(e) Redundant text links shall be provided for each active region of a server-side image map.

(f) Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape.

(g) Row and column headers shall be identified for data tables.

(h) Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers.

(i) Frames shall be titled with text that facilitates frame identification and navigation.

(j) Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz.

(k) A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes.

(l) When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology.

(m) When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with §1194.21(a) through (l).

(n) When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.

(o) A method shall be provided that permits users to skip repetitive navigation links.

(p) When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required.

How Adobe Acrobat assists in compliance — Introduction
Warning Acrobat X, Acrobat Pro 9 or Pro Extended REQUIRED…

Acrobat has the built in accessibility features to make information available to users with disabilities with or without assistive technology. Examples are “read aloud”, “page scrolling”, page background color preferences.

Accessible documents have added value, beyond meeting 508 compliance. Documents that are designed with accessibility at the fore front, are easier for anyone to use. Accessible documents are user friendly by design. An example, if a screen reader can read a document in the correct order. The document can be re-flowed and can be read easily on smaller hand held devices.

Content is reusable, and subsequently more valuable.
In business forms, adherence to logical tab order means that more users will make it to the submit button, less confusion results in less drop off.

— Key Considerations
Is the text scanned or searchable?

Can the text be copied to the clipboard?

Are the form fields actual interactive form fields? Are they images?

Is the Language property of the document set correctly? Screen readers read words based upon the language they are installed into.

Are security settings applied that do not allow text processing by a screen reader?

Is the reading order correct and logical?

Do the Images have alternative text correctly tagged to the element.

— Considerations to Increase Accessibility
Add logical buttons, hyperlinks

Add (Bookmark) based navigation

Include clear and useful instructions (not everyone understands that a PDF page on the web is not the same an HTML page).

— Adobe’s Recommended PDF Accessibility Workflow
Analyze the PDF File

Determine if the PDF is a Scanned Document

If scanned — OCR the PDF file

If PDF is a Tagged (structured) PDF file, run the built in accessibility checking tools.

Use the TouchUp Reading Order Tool to correct accessibility errors.

If the PDF is a form (scanned or authored in another application) run the Acrobat Forms Wizard (It will OCR not just text, but form elements as well)

Manually add form elements that the wizard failed to capture
Check the tab order of form elements, correct if necessary
Check and validate that all form elements are labeled correctly and use tooltips on form elements

— Tables
If the PDF has tables, use the TouchUp Reading Order Tool Table Editor

Add a Table Summary

Make sure the table has the correct header row associated so the screen reader reads the row header cell as header information, then the column content, then the next column in the same fashion, (versus left to right) Also, set appropriate row spans and column spans.

— Also,
Consider adding alternate text for abbreviations and acronyms
Add alternative text for links and hyperlinks



Develop accessibility from the source application (our example will be PDFs exported or saved from MS Word)

— Accessible MS Word Docs
Use Microsoft Styles for elements that will become bookmarks, especially section or chapter headings (creates an automatic TOC with built in navigation)

Add alternative text to all graphic elements, and images placed into the Word doc.

Check that the PDFMaker is configured for tagged documents and will convert bookmarks.

Convert the Word doc to Accessible PDF format
Check the document within Acrobat Pro

— Author accessibility in the Source Document
instead of correcting it later in the PDF.

Before converting to PDF follow best practices in developing forms or documents with tables in word.

Use tables for tables

Do not use tables for layout

— Check and Check again
Run the Accessibility Checker in Acrobat, follow the instructions to correct the document, run the Checker again, until all issues are solved.

Best Practice PDFs should have:

Searchable text – not scanned. If Scanned OCR it…

Use common fonts that allow Acrobat to recognize and extract text based characters

Acrobat extracts text to Unicode for access by the screen reader or braille printers. If Acrobat cannot recognize the font structure. It cannot supply information to these devices.

Forms should be functional as to user input just like an ordinary web based form. Buttons should function, combo boxes should have keyboard equivalents and have the values assigned logically and with useful description.

The correct tab order is essential

Take advantage of buttons, hyperlinks, and navigational aids on what would normally be a simple printed page.

The “Document language” should be correct so the screen reader can ascertain the correct language to use and thereby, the correct pronunciation.

Security that limits, editing, copying or printing text should not stop the screen reader from extracting and rendering text to speech.
Understand that accessible documents have structure. Structure (or element containers) determine the reading order. Define heading levels paragraphs, and the header rows of tables.

Every image or diagram (basically all pixel based imagery) as well as form elements should have alternative text associated with their tags. “Alt” text as well as tooltips can be applied to aid visually impaired users as well as users with cognitive impairments.

Examination — 3 Tasks to illustrate the Acrobat Accessibility feature set.

Full accessibility Check

Check for 508 Compliance

Examine Form Elements

Reading order, tooltip property field, make sure you understand the concept of “Listening to a form.”


How Adobe’s Dreamweaver Assists you in compliance — Dreamweaver CS4 Key Features
Built in reference guide

Accessible templates

Code snippets

Built-in accessibility validation tools.

Enhanced features for the creation of accessible forms

Accessible data tables.

To insure that each image on a page is given a text equivalent (alt text), as well as frames , media annotations and form objects, the default for requiring accessibility attributes in insert dialog boxes is checked on — out of the box.

Set preferences that prompt the designer to supply accessibility information during development.

Preferences dialog box, prompts for accessibility-related information for form objects, frames, media, images, and tables upon insert into the html page flow.

When you insert a image into the page. The Image Tag Accessibility Attribute offers a fill-in box, to complete the requirement.

– Tables
Inserting a table from the layout pallet, prompts you with a dialog box for the number of rows and columns, but more importantly for summary information, caption and the location of the heading cells. Heading cells determine the reading order of tabular information when it is encountered by a screen reader.

– Accessible Forms
All form objects are required to have labels, as well as tab ordering.

Apply shortcut key accessibility as well

Tab order position.

Labels identify the purpose of the form element and the tab order allows navigation through the form without the use of a mouse. Shortcut keys allow form fields to be accessed via the keyboard.

Dreamweaver CS4 ““ has a box for checking Section 508 standards and World Wide Web Consortium (W3C) Web Content Accessibility Guidelines for both Priority 1 and 2 checkpoints.

Accessibility Report
Run the report, receive the results. Non compliant elements are listed, with a direct link applied to the element on the page.

Double click the reference and Dreamweaver CS4 takes you to the reference information on the element. The report window also suggests further areas of information to suggest how you may solve the problem.

— Built in Accessibility Reference
The entire UseableNet Accessibility Reference documentation is built into the Dreamweaver Help>Reference menu. Extensive information on the nature of the error, and the process to repair it are available in a horizontal panel below the properties panel.

– Accessible Templates
Explore the many templates or starter pages to aid in understanding how to start building 508 Compliant web pages immediately.

I hope this article can help clarify the many ways you can meet the 508 compliance requirements of your organization.

Good luck,
Foster Johnson