WCAG 2 Compliance With PDF

In This Presentation Background of PDF Files & Accessibility Methods for Creating Accessible PDF Docs PDF & WCAG 2.0 Compliance Principle 1: Perceivable Principle 2: Operable Principle 3: Understandable Principle 4: Robust

Why PDF Portability Preservation of visual formatting and layout Ideal format for long documents intended for printing Easy to produce compared to HTML Documents can be secured against editing

Examples of PDF use Technical documents and manuals Reports, especially with complex layouts, graphs, charts etc. Forms, meant for print or online delivery Scanners and other hardware that output PDF Print and design industry Large and/or complex documents published on web sites

PDF and accessibility Candocumentsretain these advantages of layout, portability, security and still be accessible? PDF documents support a logical, accessibles tructurethat is independant of the layout Security used to cause an accessibility issue, not any more. Documents canbe securedagainst editing but still be accessible Accessible PDFs can be produced quickly but, as with HTML, the source document must contain structure and semantics

When is PDF notaccessible? A scanned image is still an image, with no information for screen readers unless the information is added Same for PDF, HTML or any document format PDF can support a wide array of accessibility information for all content elements, but these must be added, in the source document or in Acrobat

Background of PDF Accessibility Until 2001, PDF was not accessible: Content not readable by AT Each page was basically a flat image: Scanned paper document Converted to image from source document Since then: PDF can (and should) be fully accessible Accessible tag structure Real text rather than image of text Control over reading order Text alternatives Accessible form controls

PDF Accessibility: Tags A tagged document contains an underlying ‘tag tree’: Represents the structure of your document Perceived by screen reader as document content Not tagged = not announced by AT Similar to tags in HTML Can be edited using the ‘Tags Panel’ Always required for accessibility Enables typical screen reader features, such as: Heading navigation Table navigation Link lists

Creating Tagged PDF Documents Different ‘paths’ leading to an accessible PDF doc: Preferred method: Conversion from accessible source document Authoring Application Tag structure automatically built Scanned Documents Requires OCR and tagging in Acrobat Pro Existing PDF doc Must be tagged in Acrobat Pro

PDF and WCAG 2

About WCAG Web Content Accessibility Guidelines (WCAG) Explain the requirements for accessible content Version 2.0 released December 2008 Organized around the following 4 principles: Perceivable Operable Understandable Robust Each principle has guidelines Each guideline has sucess criteria Mention that were not coverering each success criterion in detail, just the ones most applicable to PDF

Principle 1: Perceivable “Information and user interface components must be presentable to users in ways they can perceive.” Principle 1: Perceivable

Guideline 1.1: Alternative text “Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.” Images: Apply alternative text in authoring application. Example: Microsoft Word Use Adobe Acrobat Pro Example: use the Touch Up reading Order Tool (TURO). Decorative Images Do not need alternative Example: remove image from tag structure using TURO. Form Controls Use LiveCycle Designer for large, comeplex forms Use Acrobat form tools for small, basic forms Example: Making existing form controls interactive. Example 1: img_alttext.doc Right click on each image, choose ‘format picture’, in the dialog that appears select ‘alt text’ tab to show text alt Example 2: img_alttext.pdf Start TURO tool, right click on image, select ‘edit alternative text’ Example 3: decorative_img.pdf Start TURO tool, select image, choose ‘presentation’ in TURO window to remove the image from the tag structure Example 4: form.pdf Choose forms > add or edit fields, then click OK button. Demonstrate that all fields are correctly recognized, labeled and made keyboard accessible Also show the ‘add form field’ drop down button on the top left in form editing mode, to illustrate that you can manually add controls as well.

Guideline 1.2: Time-based Media “Provide alternatives for time-based media.” Embedded multimedia must be provided with alternatives Captions Audio descriptions Full text transcripts The synchronized alternatives are applied to the actual media, not in PDF Use Flash_cc_demo.pdf. Demonstratecaptioningcontrols.

Guideline 1.3: Adaptable “Create content that can be presented in different ways (for example simpler layout) without losing information or structure.” Use headings to provide document structure Example: Using MS Word heading styles Example : Tagging headings with Acrobat Pro Provide header cells for data tables Example: Using the Table Editor Provide a logical reading order Example: Using the Touch Up Reading Order Tool Example 1: relations.doc Show that headings are marked up with heading styles using the MS Word styles panel Show that table at the bottom of the document is marked up as word table Now convert the document to accessible PDF, using the ‘Acrobat’ tab in the ribbon In new document, select a heading, open the tags panel, and choose ‘find tag by selection’ to show the heading is correctly tagged. Scroll down to page 6, where the small table is Open the TURO tool, Right click on the table, choose ‘table editor Shift click on all header cells > right click on selection, choose ‘table cell properties’. In cell properties dialog, choose ‘header cell’ as type. Example 2: bad_reading_order.pdf Start TURO to show incorrect reading order Select each column, one at a time. For each, select ‘text’ in TURO, to make entire column one reading order stop

Guideline 1.4: Distinguishable “Make it easier for users to see and hear content including separating foreground from background. “ Adobe Reader provides helpful features: Customizable high contrast colors Unlimited maginication 12.45 Example: open bad_reading_order.doc in reader to demonstrate high contrast and high level zoomingthroughaccessibilityoptions. Optional: Open Relations_background.pdf in Reader. Show how the contrast settings are overwrittenwhenit has a background. Open Relations in Acrobat Pro and remove the background.

“User interface components and navigation must be operable.” Principle 2: Operable

Guideline 2.1: Keyboard Accessible “Make all functionality available from a keyboard. “ All interactive controls must be reachable and operable without a mouse. Ensure the tab order is logical Example: Setting the tab order with the ‘fields’ panel Example: forms.pdf Make sure form fields are applied (forms > add or edit fields) and enter form edit mode In the ‘fields’ panel show options ‘tab order’ drop down list (default, by column, by row, custom). In the dropdown list, also choose ‘show numbers’ Choose custom, and drag items up and down in the fields panel to illustrate the tab order is updated

Guideline 2.4: Navigable “Provide ways to help users navigate, find content, and determine where they are.” Automatically import bookmarks and TOCs Example: Using PDFMaker Example: toc.doc Open acrobat tab in ribbon, click settings, click ‘bookmarks’ tab Show that you can map word headings as bookmarks and word bookmarks as well Convert doc to accessible PDF Show that table of content links have been preserved in the convcersion to PDF Open bookmarks panel in acrobat reader to show the heading structure as bookmarks

Principle 3: Understandable “Information and the operation of user interface must be understandable.” Principle 3: Understandable

Guideline 3.1: Readable ”Make text content readable and understandable.“ Always set the document’s language For the entire document (using document properties) For specific sections (using the tags panel) Provide glossaries and Indices Mark up abbreviations Example: Using tag properties to add alternative text to an abbreviated text. Example: french.pdf Open file > properties > advanced Set language to ‘French’ Example 2: french_part.pdf Scroll to french paragraph on page 2 and select it Use the tags panel (find tag from selection) to locate the paragraph in the tags tree. Right click on <p> tag, choose properties. In the ‘tag’ tab of the properties dialog, set the language to french Example 3: abbreviation.pdf Locate the ‘SCUBA’ tag. In it, there is a span element that has the fully expanded text set as alternative text in its properties

“Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.” Principle 4: Robust

Guideline 4.1: Compatible “Maximize compatibility with current and future user agents, including assistive technologies.” Manually Provide Roles Example: Using the tags panel Optional Example: any file Use eitehr the tags panel or the TURO tool to add tags (i.e. Roles) to elements

Ensuring Accessibility at the Source Conversion to accessible PDF from authoring application Ensuring Accessibility at the Source

Conversion to PDF From Accessible Source Document Advantages: Tag structure automatically built based on styles / markup used Significantly more efficient / effective than tagging PDF after conversion Most accurate tag structure Ability to edit content without having to reapply tags in Acrobat PDFMaker Add-on for popular business applications, such as MS Office and Lotus Notes 1.15pm

Example Workflow: Creating an Accessible PDF Using MS Word Use appropriate styles, e.g. Heading, list and paragraph. Use PDFMaker add-on to create a tagged PDF File. Use Acrobat Pro to inspect and repair document if needed. Walkthrough of options in Word documents

Repairing existing inaccessible PDF files Legacy Documents

Repairing Scanned Documents Use Acrobat’s OCR feature Scanned text will be recognized and converted to actual text. OCR Makes a text in a scanned document: Searchable Selectable Perceivable by assistive technology OCR is not perfect You must manually fix ‘OCR suspects’ Document still requires a tag structure Example: scannedPDF.pdf Demonstrate unselectable text Choose document > OCR Text Recognition> Recognize text using OCR Edit the OCR options, choose ‘cleartext’ as output options Start the OCR process Demonstrate results: text now selectable, searchable and scalable

Adding and Editing the Tag Structure Acrobat Pro provides several tools for tagging: ‘Add Tags to Document’ command Accessibility Check Creates overview of accessibility issues, including tag related Provides quick link to each issue Touch Up Reading Order (TURO) Tool Allows content to be selected and assigned a tag type Tags Panel Allows tag structure to be edited manually high level example: untagged.pdf Quickly demonstrate features: Advanced> Accessibility > Add tags to Document This willl automatically open accessibility report, show some examples of its output Show TURO and tags panel

Wrapping Up To Summarize: PDF documents can always be made accessible and WCAG 2.0 compliant Create accessible source documents, then convert to tagged PDF. Use Acrobat Pro tools to repair accessibility problems

Further Reading Go to: Questions? http://www.adobe.com/accessibility/ Detailed guides for creating accessible PDF documents and forms Questions? cpike@paciellogroup.com accessibility@adobe.com

Seminar Series Next seminars Also at http://adobe.acrobat.com/wcag2/ Webinar 2: “Flash and WCAG 2.0” Tuesday, March 31 12:00 noon Eastern Webinar 3: “PDF Forms and WCAG 2.0” Wednesday, April 1 12:00 noon Eastern