Designing With Accessibility In Mind

1760 Neil Avenue 150 Pomerene Hall Columbus, OH 43210-1297 Phone: (614) 292-3307 Email: [email protected] URL: www.wac.ohiostate.edu

Creating Accessible PDF from the Web WAC Workshop. February 2005. Written and Presented by: Lori Bailey. Table of Contents:

Creating Accessible PDF from the Web..............................................................1 Required Software...................................................................................................1

Designing with Accessibility in Mind.................................... .......................2 What Accessibility Features Should My Document Have?.....................................2 Add Alternative Text to Images................................................................ ....................2 Tables.................................................................................................... ......................3 Links......................................................................................................... ...................3

Hints for Better Conversion..................................................................................4

Converting Your Document to PDF.................................................... ..........4 Using "Print to PDF"............................................................................................4 How to Use the "Print" option....................................................... ...............................5

Using the Acrobat or IE Converters......................................................................5 How to Use the Internet Explorer Converter.............................................. ...................6 How to Use the Acrobat Converter..................................................................... ...........6

Resources............................................................................................. ......7

Required Software. • Acrobat 6.0 Professional or higher with Accessibility Checker. •

Best practice: use plug-in conversion tool for Internet Explorer

PDF From HTML: February 2005

Page 2 of 7

Designing with Accessibility in Mind. Converting your HTML and Web documents to an accessible PDF version will take less time and result in a more fully accessible product if you take the time to design (or update) your original document to include accessible mark-up. If you omit this information, you will need to spend more time in Adobe Acrobat after the conversion to clean-up the document.

What Accessibility Features Should My Document Have? As you create your document in HTML, you'll be bettered prepared to convert to PDF if you use the following features: •

Use HTML tag elements to identify headers (H1, H2, etc), paragraphs (P), lists (OL, UL, LI), and other structural elements (BLOCKQUOTE, FIELDSET, TABLE), . Create your own styles using CSS to add special formatting, rather using deprecated or out-dated HTML formatting tags (e.g. FONT and BOLD) and don't use HTML tags for formatting only (e.g., using BLOCKQUOTE for indent rather than to identify a quote area).

•

Include alternative text for all images.

•

Avoid layout tables – use CSS whenever possible to position content. If you use tables for layout, be sure to verify the read order in your PDF.

•

Create data tables with appropriate header (TH) and data cell (TD) markup. However, note that you will be required to edit the tags in your PDF after conversion to insure your data tables are accessible.

•

For long documents, include a Table of Contents or other document guide with indocument links (bookmarks or anchors) that jump to specific sections of the text.

Add Alternative Text to Images. You should seriously evaluate the information that a visual is conveying. Is the information already present in the text? Is the visual simply providing color and images that are not essential to the message conveyed by the document? The alternate text that you tie to a visual should not repeat the caption. If you get in the habit of adding your alternate text each time you insert an image, it will be easier than trying to add descriptions later when you are ready to convert the file. There are two types of alternate text: descriptive and empty. Descriptive ALT tags. Descriptive text is given to images that convey information or have a function on the page (such as graphic buttons). Your alternate text should be as simple and short as possible and only convey the necessary information. For instance, consider the photograph at the right. How might you describe it?

PDF From HTML: February 2005

Page 3 of 7

• Unnecessary information: .

• Too simple: . • Best: . Empty ALT tags. You should avoid giving descriptive ALT tags to images that don't convey any information or invoke an action. Instead, use an empty ALT tag. Empty ALT tags do not get converted into PDF documents, so your image will be ignored. HTML: .

Tables. Tables can cause serious read order problems when your documents are converted to HTML. In our tests, many simple tables were converted to linear, plain text, without a table structure. This may be fine for columns and other layout tables, but data tables will become much less functional. Regardless of how you insert or format your table, Acrobat does not import table header definitions. For any document with data tables, you must manually add these definitions using the TAGS palette in Acrobat 6.0 Professional (or above). And you will need to re-add them each time you reconvert from the original Word version to PDF. Tables -- Best Practices: 1. For layout tables, be sure information will be understood when linearlized. 2. Keep tables as simple as possible. Avoid nesting tables or merging cells. 3. Provide a description of the table structure.

Links. To insure your links convert correctly, use the Internet Explorer conversion tool or convert your document from within Adobe In-Design or Microsoft Office 2000 or above. In most cases, when converting from HTML not using one of these tools, the PDF will contain active ("clickable") areas for your links, but the screen reader will be unable to distinguish these areas from other kinds of text and users may not be able to engage the link when the screen reader is reading the document. If you are uncertain how well your links will convert, you may want to provide textual cues to the presence of a link, either by citing the URL itself (recommended) or by using some variation on “click here.” You may also edit your PDF tags to use the "LINK" tag, however this involves a very complicated series of steps and is not practical for a document with multiple untagged links.

PDF From HTML: February 2005

Page 4 of 7

Hints for Better Conversion. Most of your content will convert to an accessible mark-up in PDF. However, some elements require special consideration. Here are a few tips to help you create a PDF-ready document: 1. Use the automatic list feature to create bulleted and numbered lists. 2. Fix graphic locations by using online “Inline” layout. 3. Avoid text boxes, especially those that “float” in the document. 4. Use characters from the keyboard rather than characters from a specialized font. For example, don’t use  where > will do.

Converting Your Document to PDF. Without using one of the commercially available conversion tools, there are three for converting HTML and Web documents to PDF: printing to the PDF distiller, using the conversion add-in within Internet Explorer (installed by Acrobat), or using the "Create PDF from Web Page" option in Acrobat. Using the “Print to PDF” method, creates an “untagged” PDF that is severly limited in its accessibility. You must add tags to the document in Acrobat. If you use either the plug-in tool within IE or the conversion option in Acrobat, your document will be tagged, but it needs to be checked for consistency and accuracy. WAC TIP: In general, we found that printing an HTML document to PDF through the distiller and then using the automated tag generator produced more complex and detailed tag information than the converters in IE or Acrobat. We do not recommend using these converters for advanced layout and complex documents.

Using "Print to PDF" The "Print to PDF" option is a good choice if: 1. You do not need to create an accessible version of your PDF. Not tags will be created during this conversion, so the document will have limited to no functionality for assistive technology users. 2. You have a complex document that requires a detailed tag structure. In this case, after creating your PDF you would generate tags automatically in Acrobat and then edit those tags to insure full accessibility. 3. You want to create your own tags. If you want to exclude certain navigation or formatting elements or rearrange the read-order, or add more detailed tags for certain tables or graphs; you might consider tagging the entire document manually. Thus, you'll need to begin with an untagged PDF. 4. You want to take advantage of special printer-formatting (CSS). When a PDF document is created using the "Print" option, the same image that would be sent to your printer is sent to the Acrobat Distiller. This options preserves any special print styles,

PDF From HTML: February 2005

Page 5 of 7

such as turning-off background colors or creating printer-friendly margins. Although you will need to add tags to make it accessible, many people prefer the cleaner, printerfriendly look of this type of PDF document.

How to Use the "Print" option. 1. Open the HTML document or navigate to the file you want to convert to PDF in your internet browser. 2. From the FILE menu, choose PRINT. 3. Change your selected printer to “Adobe PDF.” To access the conversion settings, click on the “Properties” button in the Print dialog.

4. You will be prompted to name your new PDF and select a save location. 5. Open your PDF in Acrobat Professional and add necessary tags.

Using the Acrobat or IE Converters You can create your document from within Acrobat or using the plug-in toolbar that is installed in Internet Explorer at the same time Acrobat is installed. Both options produce identical PDF documents with identical tag structure. The plug-in or converter option is a good choice if: 1. You have a simple (text) document. The converters tend to group your document into large sections, producing only a handful of tags even for very long documents. This is fine, as long as your document does not contain any complex elements, such as data tables, graphs, charts, or columnar layouts that require more detailed tag structure. 2. You do not need to create an accessible version of your PDF. Although some tags will be created, sections of the document may be left out and graphics and tables may not have proper markup. If you are also providing the document in an accessible HTML version, you do not need to worry about these possible errors in the tag structure.

PDF From HTML: February 2005

Page 6 of 7

How to Use the Internet Explorer Converter. 1. Insure you have the Adobe PDF Toolbar open. a. From the VIEW menu, choose TOOLBARS b. Select ADOBE PDF from the toolbar list.

2. Open the HTML document or navigate to the file you want to convert to PDF in your internet browser. 3. On the Adobe PDF toolbar, choose "Convert Web Page to PDF."

4. You will be prompted to name your new PDF and select a save location. 5. Open your PDF in Acrobat Professional and edit tags, as needed.

How to Use the Acrobat Converter. 1. Open Adobe Acrobat Professional (6.0+) 2. From the FILE menu, select "Create PDF…" and "From Web Page…" 3. Type the URL of the file you wish to convert, or choose "Browse" to locate the file.

PDF From HTML: February 2005

Page 7 of 7

4. Choose "Create" to start conversion process. 5. Save the results to a file you will remember. 6. Edit tags for accessibility, as needed.

Resources Below are a few resources available on your WAC workshop CD. The file location and name is listed at the end of each entry. Don’t have a CD? Request your copy from the WAC online at: www.wac.ohio-state.edu/workshops/2004CD.cfm. 1. "What is An Accessible PDF" (WAC Guide): Not sure what qualifies as an accessible PDF document? Want to learn more about why each element is required and how users of assistive technology benefit from tagged PDF? Check out this WAC Guide and get all the details. [WhatIsAccessiblePDF.pdf] 2. "Checking Your PDF for Accessibility" (WAC Guide): the next step in creating an accessible PDF. Learn how to verify, edit, add, and delete tags. [CheckingYourPDF.pdf] 3. "Advanced Techniques for Creating Accessible PDF Files" (Adobe Tutorial): provides detailed and guided instructions for marking up tables, changing read-order, modifying structure, and adding links and special elements in the tags palette. NOTE: written for Acrobat 5.0; you will notice some differences if you are using version 6 or 7. [/Adobe Training/Creating Accessible Adobe PDF v5 advanced.pdf] And here are some more resources available online: 1. Adobe Accessibility: access.adobe.com. 2. Adobe Acrobat Accessibility Techniques (WebAIM): www.webaim.org/techniques/acrobat. 3. Learning About PDF Accessibility (Web Accessibility For All): www.cew.wisc.edu/accessibility/tutorials/accessiblePdfs.htm. 4. Resources on Adobe Acrobat and PDF Accessibility (Planet PDF): www.planetpdf.com/enterprise/article.asp?contentid=6066.