Basics of Accessibility in Adobe PDF Creating More Accessible PDF files

Presentation and Structure Visible in the document Not available to assistive technology Structure What makes the document look the way it does Invisible, like frame of a house Available to assistive technology

Presentation = Structure Match visible with invisible where possible In Acrobat: Tags Match visible presentation (section heading, e.g.) with structure (H Tag, e.g.) Match reading order of tags to logical visible reading order

Onion, Jeff Easter, Creative Commons Layers Onion, Jeff Easter, Creative Commons

Allison McDonald, Labels for Art vs Craft Show, Creative Commons PDF Tags Allison McDonald, Labels for Art vs Craft Show, Creative Commons

Tags Contain Meaningful Content Lukas, boxes, Creative Commons

Meaningful Content Meaningful content goes into a tag Non-decorative images Text Tables Links Form fields

Not Meaningful Content Not meaningful content goes into an Artifact Background images Artifacts from scans Header and footer information Page numbers

Tags in detail Tag Types, and How to Work With Them

Common Tag Types Paragraph Heading List Link Figure Table Artifact/Background

The Right Tag in the Right Place Tags need to be appropriately matched with content Have a heading? Apply a heading tag! Tags need to be in order that matches logical reading order Need a text equivalent present for meaningful visual elements

Tag Tree Where the Tags live Where AT goes to unpack the tags Notice multiple Tags with same label Each contains different content Tag Tree

Touch Up Reading Order (TURO) Tool Put content into tags Change existing tags Open from Accessibility Tool Touch Up Reading Order (TURO) Tool

Create or edit a tag with TURO Tool Select appropriate content Select with crosshairs Double click to select Click button to add or change appropriate tag to the content Useful for changing existing tags, tagging untagged content

Regular text Noted with a <P> Paragraph

Heading Tags For section and subsection heading text Different than “headers”, which are in tables Heading Tags

Hierarchy: List List Item Label List Item Body List Tag

Links and Context Ideal: make it make sense on its own. Link text should make sense in context at a minimum Ideal: make it make sense on its own. Best practice: avoid “Click here” and “Read more” Link Tag has two elements in tag tree OBJR Link text

Link Tag in Tag Tree

Accessible PDF Links Don’t use TURO Tool Highlight text with Selection Tool Right click Select “Create Link” Accessible PDF Links

Figures and Text Equivalents Provide text equivalents Convey intended meaning of visual Convey text in image

Dolovis, Scissortail flycatcher, Creative Commons Context is Key Dolovis, Scissortail flycatcher, Creative Commons

Text Equivalent Placement Provide in one or more ways Alternative text attribute Figure caption Longer text description For charts and graphs, possibly use dataset itself

Add Alternative Text to a Figure

Color Contrast The quick brown fox jumps over the lazy dog.

Verify Contrast 4.5:1 ratio of text to background color Check with 3:1 for “large text” Check with The Paciello Group Colour Contrast Analyser (http://bit.ly/1ME7YE6) WebAIM Contrast Checker (http://bit.ly/1kVArrR) Chrome Color Contrast Extension (http://bit.ly/1b0G3Tk)

Only Color Conveying Meaning Color Use is critical. This chart has three lines on it, one red, one blue, and one green. They are labelled in the chart’s key to the right as Series 1, Series 2, and Series 3. 1 is blue, 2 is red, and 3 is green. But if I cannot distinguish between some or all of the colors, then the meaning is lost.

Color Only in Black and White In greyscale, you can see that they all basically look the same. Especially 1 and 3.

Color and Shape Together With markers added, there is something in addition to color that distinguishes one line from the others: a simple shape. Now 1 is blue with triangles on it, 2 is red with diamonds, and three is green with squares.

Color and Shape in Black and White In greyscale, I can still tell which line is which because the shapes also help to distinguish one from the other. It’s not that we should not use color to convey meaning. It is that we need to use something in addition to color to convey meaning.

Artifact and Background Anything decorative or leftover from a scan Hides content from AT Completely(!) Meaningful? Do not put in Artifact or Background

Touch Up Reading Order Tool Background

Acrobat Accessibility Checker Helpful, but Can give false positives Can miss stuff Still very much worth using

Odds and Ends There is no Undo in the Tag Tree, until Acrobat Pro DC Mind where you drop Tags that you move around the Tag Tree Run the Accessibility Checker and read its results Accessibility starts in the source document Save your PDF often when you do accessibility work

Accessible from the Start Microsoft Word Document Title in File Tab Heading Styles Lists Alternative text for images “Repeat as header row at the top of each page” for table header rows Link text Color use and contrast

Resources WebAIM on PDF (http://bit.ly/22A4oTH) Adobe on PDF (http://adobe.ly/1NdvYV9 Web Content Accessibility Guidelines PDF Techniques (http://bit.ly/1Ndw4w8) Web Content Accessibility Guidelines Web 2 non-ICT (http://bit.ly/1oTv6tr) ABLE Tech Resources Page (http://bit.ly/1YfcnV1)

Contact Information Rob Carr, Accessibility Coordinator, Oklahoma ABLE Tech rgcarr@okstate.edu 800-257-1705 @rgcarrjr on Twitter @OKABLETech on Twitter, OKABLETech on Facebook