Creating accessible pdfs from adobe indesign jonathan avila and thomas logan
This presentation is the property of its rightful owner.
Sponsored Links
1 / 39

Creating Accessible PDFs from Adobe InDesign Jonathan Avila and Thomas Logan PowerPoint PPT Presentation


  • 55 Views
  • Uploaded on
  • Presentation posted in: General

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

Download Presentation

Creating Accessible PDFs from Adobe InDesign Jonathan Avila and Thomas Logan

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Creating accessible pdfs from adobe indesign jonathan avila and thomas logan

Creating Accessible PDFs from Adobe InDesignJonathan Avila and Thomas Logan


About ssb bart group

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)


Key points

Key Points

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


Workflow

Workflow

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


Setup indesign

Setup InDesign

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


Create use accessible template

Create/Use Accessible Template

Headings

Lists

Images alt text

Artifacts

Tables

Reading Order

Use Color

Contrast

Links

Forms (not covered in this presentation)

Document title (metadata)

Core Areas of Accessible InDesign Files


Address color and contrast

Address Color and Contrast

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.

Contrast and Color– Overview


Address color and contrast1

Address Color and Contrast

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

Color and Contrast – Recommendations


Thread frames

Thread Frames

Proper use of text frames allow articles that span multiple pages to be read in the correct order by assistive technology

Overview


Thread frames1

Thread Frames

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

Recommendations


Thread frames2

Thread Frames

If there is too much text to fit in the desired location:

Create a text frame on another page

Click on the first text frame’s out port (a small box with an arrow on the lower right side of the text frame)

Click on the second text frame

Implementation Techniques


Thread frames3

Thread Frames

From the Tools panel, select the Type tool and place the cursor in the first text frame

Press ⌘+Y (CTRL+Y on a Windows PC) to open the Story Editor

Cut and paste headers and any other text into the Story Editor

Delete any extra empty text frames

Implementation Techniques (cont.)


Thread frames4

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

Text Frame Out Port


Tags and styles

Tags and Styles

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

Styles – Overview


Tags and styles1

Tags and Styles

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

Styles – Recommendations


Tags and styles2

Tags and Styles

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

Styles – Implementation Techniques


Tags and styles3

Tags and Styles

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

Adding Tags - Overview


Tags and styles4

Tags and Styles

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

Adding Tags – Implementation


Tags and styles5

Tags and Styles

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

Headings – Overview and Recommendation


Tags and styles6

Tags and Styles

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

Headings – Implementation Techniques


Tags and styles7

Tags and Styles

To create heading styles

Place the cursor in the text and press ⌘-F11 to open the Paragraph Styles dialog

From the flyout menu, choose New Paragraph Style

In the Style Name field, enter “H1” or the appropriate heading level

To change the font, select Basic Character Formats and choose the desired font, size, and weight

Edit other options as needed

Note: If styles already exist change their name

Headings – Implementation Techniques (cont.)


Tags and styles8

Tags and Styles

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 artifact

  • Select the object

  • Open the context menu

  • Select the Tag Frame

  • Select Artifact from the list

Artifacts – Implementation Techniques


Tags and styles9

Tags and Styles

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

Other Tags


Tags and styles10

Tags and Styles

To insert metadata

  • Select File > File Info from the menu

  • Add the information to the File Information dialog box

Metadata – Implementation Techniques


Reading order

Reading Order

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> tagor appear consecutively

Overview


Reading order1

Reading Order

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

Structure Tree - Implementation Techniques


Reading order2

Reading Order

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

Structure Tree - Implementation Techniques


Reading order3

Reading Order

Establish a stacking order using the Articles panel

This sets the content order which affects reflow in Acrobat

Articles Panel - Overview


Reading order4

Reading Order

Shift Click items in the order that you want them to be arranged in the Articles Panel

Drag the entire selection to Articles Panel

Articles Panel - Implementation Techniques


Text alternatives

Text Alternatives

Two ways to add Alt text

  • 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

  • Alt attribute in structure Tree

    • Select image in tree

    • Choose Add Attribute, enter “Alt” as name

    • Add alt text in value field

    • Activate Ok

Non-text Elements – Implementation Techniques


Text alternatives1

Text Alternatives

Alternatively, use Description Metadata field as Alt Text source for image

Non-text Elements – Implementation Techniques


Export to acrobat

Export to Acrobat

To create the PDF file

  • From the File menu, select Export > Adobe PDF (Print or Interactive)

  • Enter the desired file name

  • 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

Implementation Techniques


Export to acrobat1

Export to Acrobat

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

Implementation Techniques (cont.)


Acrobat touch up

Acrobat Touch Up

Select Initial View Tab

Under Window Options Select Show “Document Title”

Activate the OK button

Implementation Techniques


Acrobat touch up1

Acrobat Touch Up

Select Advanced Tab

Under Reading Options Select Language of document

Activate the OK button

Implementation Techniques (cont.)


Acrobat touch up2

Acrobat Touch Up

Select Page Properties

Under Tab Order ensure “Use Document Structure” is selected

Activate the OK button

Implementation Techniques (cont.)


Acrobat touch up3

Acrobat Touch Up

Open the Role Map Dialog(Tags Panel > Options > Edit Role Map)

For each role:

Verify that all non-standard PDF Tags have proper role mappings to a standard PDF tag name.

E.g. Heading 1 - > H1

Implementation Techniques (cont.)


Creating accessible pdfs from adobe indesign jonathan avila and thomas logan

Questions?


Thank you

Thank You

Follow Us

Twitter

@SSBBARTGroup

LinkedIn

www.linkedin.com/company/ssb-bart-group

Facebook

www.facebook.com/ssbbartgroup

Blog

www.ssbbartgroup.com/blog

Contact Us

Jonathan Avila

Chief Accessibility Officer

[email protected]

Bryan Garaventa

Senior Accessibility Engineer

[email protected]

SSB Contact Information

[email protected]

(800) 889-9659


  • Login