Embed Size (px)
Citation preview
Creating Accessible PDFs from Adobe InDesign
Jonathan Avila and Thomas Logan
About SSB BART Group
• Unmatched Experience• Accessibility Focus• Implementation-Oriented
Solutions• Solutions That Reduce Legal
Risk• Organizational Stability and
Continuity• Knowledge That Is Up-to-Date,
All the Time• Published and Peer Review
Auditing Methodology
• Fourteen hundred organizations (1445)
• Fifteen hundred individual accessibility best practices (1595)
• Twenty-two core technology platforms (22)
• Fifty-five thousand audits (55,930)• One hundred fifty million
accessibility violations (152,351,725)
• Three hundred sixty-six thousand human validated accessibility violations (366,096)
• Most accessibility fixes can be made with InDesign only• The visual appearance of your document does not need to
change for proper tagging– With exception for color, contrast, etc.
• Making your InDesign document accessible will make it easier to maintain and update for the future
Key Points
• Setup InDesign environment for tagging• Use/create an accessible template• Address visuals like contrast• Thread frame content• Tag content and map styles to tags• Use the structure tree and articles panel to arrange reading
order of content• Add text alternatives• Export to PDF• Touch up items in Acrobat Professional
Workflow
• Display Structure Tree– View > Structure > Show
structure• Display tag markers
– View > Structure > Show Tag Markers
• Display the following panels– Tags– Paragraph styles– Articles
• Other useful tools– Story editor
Setup InDesign
Core Areas of Accessible InDesign Files
• Headings• Lists• Images alt text• Artifacts• Tables• Reading Order• Use Color• Contrast• Links• Forms (not covered in this presentation)• Document title (metadata)
Create/Use Accessible Template
Contrast and Color– Overview
Use sufficient foreground and background colors • Sufficient contrast is necessary for users with visual impairments• Applies to text over (e.g. text with backgrounds/images) • Applies to text and images that contain text• Exceptions: decoration, logo or brand name
Do not rely on color alone to convey information• When color alone is used people who are color blind will not have
access to the information• Applies to text, images, etc.
Address Color and Contrast
Color and Contrast – Recommendations
Contrast• Use contrast checker
– www.ssbbartgroup.com/reference/index.php/Color_Contrast_Checker
• Adjust contrast of all non-exempt elements
Color• Use text, symbols, attributes, or other visual indicators
– Use parentheses for negative numbers in addition to red
Address Color and Contrast
Overview
Proper use of text frames allow articles that span multiple pages to be read in the correct order by assistive technology
Thread Frames
Recommendations
Use Text Frames Properly• Each article should be in a single text frame with continuous
flow• If this is not possible, such as an article that continues onto
a separate page, the frames should be threaded
Thread Frames
Implementation Techniques
If there is too much text to fit in the desired location:
1. Create a text frame on another page
2. Click on the first text frame’s out port (a small box with an arrow on the lower right side of the text frame)
3. Click on the second text frame
Thread Frames
Implementation Techniques (cont.)
1. From the Tools panel, select the Type tool and place the cursor in the first text frame
2. Press +Y (CTRL+Y on a Windows PC) to open the Story ⌘Editor
3. Cut and paste headers and any other text into the Story Editor
4. Delete any extra empty text frames
Thread Frames
Implementation Techniques (cont.)
To create side by side columns:• Drag the text frame to the
desired width • Press +B CTRL+B to ⌘
open the Text Frame Options dialog
• Select the desired number of columns
Thread Frames
Text Frame Out Port
Styles – Overview
• A style is a set of formatting attributes that can be assigned to elements throughout the document
• Changes to the formatting of a style affects all elements in the document with that style
• Styles are the basis of the tag structure in InDesign and later in Acrobat (via the Map styles to tags)
• Headings styles override H tags in Acrobat
Tags and Styles
Styles – Recommendations
• Paragraph styles should be used to format elements in the document such as headings and list items
• When text is initially added, InDesign automatically assigns the Basic Paragraph Style– Set styles up properly for all types of content– Use styles throughout the document creation process
Tags and Styles
Styles – Implementation Techniques
To edit, change or create a new style:• Place the cursor in the text• Press +F11 (Mac) to open the Paragraph Styles dialog⌘• Press F11 (Windows) to open the Paragraph Styles dialog
To set a style• Select the text to style• Select the desired style in the paragraph styles panel
Tags and Styles
Adding Tags - Overview
• Content is not tagged or added to the structure tree when created
• There are two ways to tag elements– Tag each element
• Select the item, open the context menu (right click), and select Tag Frame (or Choose Auto Tag from Tags Panel)
• Choose the appropriate tag from the list (if not auto tag)– Add all untagged Items
• To open the structure pane, press Alt + Ctrl + 1• From the Structure Pane menu, select “Add Untagged
Items” • The above will add content to the structure tree and auto
tag the type
Tags and Styles
Adding Tags – Implementation
To create custom tags• From the Window menu, select Tag• From the Tags Panel menu, select
“New Tag” and enter the desired tag name
Alternatively, styles can be globally mapped to the appropriate tags• Structure Tree > options > map
styles to tags• Caution – this will change already
tagged content
Tags and Styles
Headings – Overview and Recommendation
• Explicit heading identification allows users of assistive technology to browse document content by header level
• Descriptive headings allow users with cognitive and visual impairments to find the correct section
• Define styles to explicitly indicate that content appears visually as a heading
• Headings and labels must be unique and describe the topic or purpose of the element they title
• Heading order should match the visual order of headings
Tags and Styles
Headings – Implementation Techniques
To ensure headings will convert properly to Acrobat format, custom style names should be created in InDesign• These heading styles should be named “H1,” “H2,” etc. so
the proper tag name will come through into Acrobat
Tags and Styles
Headings – Implementation Techniques (cont.)
To create heading styles1. Place the cursor in the text and press
-F11 to open the Paragraph Styles ⌘dialog
2. From the flyout menu, choose New Paragraph Style
3. In the Style Name field, enter “H1” or the appropriate heading level
4. To change the font, select Basic Character Formats and choose the desired font, size, and weight
5. Edit other options as neededNote: If styles already exist change their name
Tags and Styles
Artifacts – Implementation Techniques
Tag decorative images and repetitive headers, footers, and page numbers as artifacts• Artifacts are ignored by screen
readers or when the document is displayed in Reflow mode
To tag an object as an artifact1. Select the object
2. Open the context menu
3. Select the Tag Frame
4. Select Artifact from the list
Tags and Styles
Other Tags
• List items (LI)– Auto create LI tags a descendants of L tags in PDF
• Tables and Cells– Auto generates Table, TH, and TD tags for all data and header
cells in PDF (specify table header row in InDesign)• Image/figure (Image)
– Auto generates figure element in PDF• Paragraphs (P)
– Auto generates p elements in pdf• Sections, articles, etc.
– May generate equivalent in PDF– Have little affect on assistive technology in PDF
Tags and Styles
Metadata – Implementation Techniques
To insert metadata1. Select File > File
Info from the menu
2. Add the information to the File Information dialog box
Tags and Styles
Overview
• Once the document has been tagged, it is essential to review it for proper reading order
• Structure tree order = tag panel order in Acrobat = reading order for assistive technology
• Make sure complete story appears in same <Story> tag or appear consecutively
Reading Order
Structure Tree - Implementation Techniques
To view all the tags in the tree• Select the top tag and hold down the Alt key while
clicking on the arrow
To move an element in the tag order• Click and drag the tag to the proper location
Reading Order
Structure Tree - Implementation Techniques
• Anchor Images into the text flow• Each InDesign frame and object group displays a small blue
square on its top edge– To anchor an object in an accessible location in the text flow
without changing the original position of the object, click and hold the blue square, and then drag it to the desired location within the text and release
– The blue square changes to an anchor icon indicating that the object is anchored
Reading Order
Articles Panel - Overview
Establish a stacking order using the Articles panel• This sets the content order which affects reflow in Acrobat
Reading Order
Articles Panel - Implementation Techniques
• Shift Click items in the order that you want them to be arranged in the Articles Panel
• Drag the entire selection to Articles Panel
Reading Order
Non-text Elements – Implementation Techniques
Two ways to add Alt text1. Object Export Options
• Select the image in the document• Activate the Object menu• Activate Object Export Options• Select Alt Text panel• Select Custom from the Alt Text (see next slide for metadata)• Add alternative text
2. Alt attribute in structure Tree• Select image in tree• Choose Add Attribute, enter “Alt” as name• Add alt text in value field• Activate Ok
Text Alternatives
Non-text Elements – Implementation Techniques
Alternatively, use Description Metadata field as Alt Text source for image
Text Alternatives
Implementation Techniques
To create the PDF file1. From the File menu, select
Export > Adobe PDF (Print or Interactive)
2. Enter the desired file name3. Activate the Save button
Note: The Print dialog box should not be used, as this will not create a document that can be further edited for accessibility in Acrobat Professional
Export to Acrobat
Implementation Techniques (cont.)
In the Export Adobe PDF dialog box, ensure the following options are selected:
• Compatibility– Select Acrobat 5 or later to create accessible documents
• Options– Optimize for Fast Web View– Create Tagged PDF– Bookmarks– Hyperlinks– Interactive Elements
• Choose Export
Export to Acrobat
Implementation Techniques
1. Select Initial View Tab
2. Under Window Options Select Show “Document Title”
3. Activate the OK button
Acrobat Touch Up
Implementation Techniques (cont.)
1. Select Advanced Tab
2. Under Reading Options Select Language of document
3. Activate the OK button
Acrobat Touch Up
Implementation Techniques (cont.)
1. Select Page Properties
2. Under Tab Order ensure “Use Document Structure” is selected
3. Activate the OK button
Acrobat Touch Up
Implementation Techniques (cont.)
1. Open the Role Map Dialog(Tags Panel > Options > Edit Role Map)
2. For each role:
3. Verify that all non-standard PDF Tags have proper role mappings to a standard PDF tag name.
• E.g. Heading 1 - > H1
Acrobat Touch Up
Questions?
Contact Us
Jonathan Avila
Chief Accessibility Officer
Bryan Garaventa
Senior Accessibility Engineer
SSB Contact Information
(800) 889-9659
Follow Us
@SSBBARTGroup
www.linkedin.com/company/ssb-bart-group
www.facebook.com/ssbbartgroup
Blog
www.ssbbartgroup.com/blog
Thank You
