Creating Accessible PDFs - Part II

Peter Mosinskis

Supervisor of Web Services

CSU Channel Islands

Rev. 2007-05-30

---

Overview

• Review

• Hands-On Exercises for Creating PDF Forms

• Comparison of Form Formats

• Resources

---

Review

Best practices, tools,

and steps

---

7 Steps to Accessible
Word Documents

1. Add text description to graphics and images

2. Use color correctly

3. Use Styles to add structure

4. Use Tables instead of tabs

5. Let Word create Bullets and Numbering

6. Provide a Table of Contents for long documents

7. Add document metadata

---

Tools You’ll Need

• Acrobat Professional 7.0

  • “Reader” version will not create & check PDF files

  • Earlier “Pro” versions have limited accessibility check & fix tools

• Adobe InDesign CS2 (optional)

  • Recommended for large-scale print-to-PDF workflows, or complex layouts

• Mac OSX PDF Generator (not recommended)

  • Doesn’t generate tagged PDF

---

Steps to Creating a PDF

• Create PDF from Word

• Add Tags

• Check and Fix Reading Order

• Add alternative text to images

• Save As Text (Accessible)

• Check & Set Document Metadata & Language

• Save Your Changes

---

Exercise 1

A simple sample

---

PDF Form Process

• Check form logic and syntax

• Follow “Steps to Creating a PDF”

• Adjust the Tags panel

• Enable Forms Toolbar (if necessary)

• Select Tags and Draw Fields

• Save As Text (Accessible)

• Save Your Changes

---

Check Logic and Syntax

• Do the form fields types correspond to the kind of information being requested?

• Are there typos in form field description or instructions?

• Have all necessary form fields been included?

• Is the Word document designed according to accessibility best practices?

---

Uses of Form Field Types

• Text Field

  • Short text answer

  • Long text answer (e.g., comments/narrative)

• Radio Button

  • For “Choose one of the following”, “Yes/No”

• Check Box

  • For “Check all that apply”

• Button

  • For clearing all form fields, printing, or submitting form

• Combo Box

  • For drop-down lists which ask “Choose one of the following”

• List Box

  • For list-based, “Choose all that apply” questions

---

Convert MS Word to PDF

• Use the PDFMaker plug-in for Office

  • Option 1: “Adobe PDF” menu in Word

    • Choose “Convert to Adobe PDF” option

  • Option 2: “Convert to PDF” icon

    • Go to “View” menu, “Toolbars”, PDFMaker 7.0 to enable

---

Enable Forms toolbar

• Co to Tools >
  Advanced Editing

• Select
  “Show Forms Toolbar”

• Enables toolbar shown below

---

Check and Fix Reading Order

• Go to Advanced > Accessibility > TouchUp Reading Order…

• Also available on “Advanced Editing” toolbar

---

Check and Fix Reading Order

• Click “Show Order Panel”

---

Adjust the Tags panel

• Enable the Tags panel

  • Go to View > Navigation Tabs > check “Tags”

• Under “Options”, check:

  • Tag Annotations

  • Highlight Content

---

Select Tag in Tags tree

• Select the tag in the Tags tree immediately prior to where you will insert a form field

• Item will be highlighted with blue box in window

---

Draw a Form Field

• Select a form field tool from the Forms Toolbar and draw out a shape

• Available form fields (shown left to right)

  • Push Button

  • Checkbox

  • Combo Box

  • List Box

  • Radio Button

  • Text field

---

Set form field properties

• Will vary based on form field selected

---

Form Field Settings

…and properties

---

Text Field Properties

• “General” tab

  • Ignore “Name” field

  • Set “Tooltip” to question:

    • Example: “Enter your last name”

    • Example: “Any comments or suggestions?”

---

Text Field Properties (cont.)

• “Appearance” tab

  • Set “Font Size” to fixed value (such as 9)

---

Text Field Properties (cont.)

• “Options” tab

  • Check “Multi-line” only if for comment/suggestion or long answer box

  • Uncheck “Scroll long text”

---

Radio Button Properties

• “General” tab

  • Write down “Name” value; set each radio button for that question to the same Name

  • Set “Tooltip” to question:

    • Example: “Have you graduated CSUCI?”

---

Radio Button Properties (cont.)

• “Options” tab

  • Set “Export Value” to answer:

    • Example: “Yes” or “No”

---

Check Box Button Properties

• “General” tab

  • Ignore “Name” field

  • Set “Tooltip” to question AND answer:

    • Example: “Check if you use Dreamweaver for Web Development”

---

Check Box Button Properties (cont.)

• “Options” tab

  • Leave Check Box Style set to “Check”

  • Leave “Export Value” set to “Yes”

---

List and Combo Box Properties

• “General” tab

  • Ignore “Name” field

  • Set “Tooltip” to question:

    • Example: “Select your birth year”

---

List and Combo Box Properties (cont.)

• “Options” tab

  • Set “Item” to answer

  • Set “Export Value” to answer

  • Click “Add” to add item to the list

  • Repeat as many times as necessary

  • Use “Delete, Up and Down” buttons to move items in list

• List Box option has checkbox for “Multiple selection”

---

Button Properties

• “General” tab

  • Ignore “Name” field

  • Set “Tooltip” to button text

    • Example: “Clear All Form Fields”

---

Button Properties (cont.)

• “Options” tab

  • In “Label” field, enter button text

    • Example: “Clear All Form Fields”

---

Button Properties (cont.)

• “Actions” tab

  • Set “Select Trigger” to “Mouse Up”

  • Set “Select Action” to button action

    • Example: Reset a form

  • Click “Add…” button

  • Follow instructions to complete

---

Lather, Rinse, Repeat

Exercises 2 and 3

---

Tools for Aligning Fields

• Align

  • On the Forms toolbar, select the tool for the field type

  • Hold down SHIFT and choose last field (repeat as necessary)

  • Right click on RED highlighted field

  • Choose “Align” and then option

  • Will align fields against location of RED highlighted field

---

Tools for Aligning Fields (cont.)

• Nudge

  • Select a form field

  • Use arrow keys on keyboard to “nudge” field into place

• Grid

  • Go to View > Grid

  • Go to View > Snap to Grid

---

Tools for Aligning Fields (cont.)

• Size

  • Select two (or more of the same form field type)

  • Right-click on RED highlighted field

  • Choose “Size”

  • Will resize selected field height and/or width to RED highlighted field

---

Form Comparison

PDF vs. Office vs. HTML

---

Office Forms Pros & Cons

• Pros

  • Quick to develop

  • Good printability

  • Can save filled-out form

  • Can email filled-out form

• Cons

  • Requires Microsoft Office for forms to be fillable (free reader doesn’t allow forms to be fillable)

  • Can’t write to a database or export data

---

PDF Forms Pros & Cons

• Pros

  • Reader is free

  • Forms are accessible when done correctly

  • Similar support of assistive technology as HTML

  • Can email and/or print data

• Cons

  • Requires users to install PDF reader on their computer

  • Can’t save filled out form data without Acrobat Pro

  • Must be generated by a source document (Word, InDesign, etc.); changes can be time-consuming

---

HTML Forms Pros & Cons

• Pros

  • Reader (browser) is free

  • Fully customizable/flexible

  • Can fully incorporate accessibility

  • Can email and save data

  • Can generate a print copy/receipt

• Cons

  • Development is very labor intensive

---

Accessibility Spectrum

---

Use PDF Format When…

• It’s important to preserve print formatting

  • Example: a printable form

• Document is being distributed to a wide audience

• Document will be posted on the web

• Document won’t be changing frequently

  • Requires you to constantly re-build your PDF

---

PDF Resources

• Adobe Accessibility Resources

• Accessible PDF tutorials

  • HTCTU:

  • AccessELearning:

  • WebAIM:

  • Ohio State Web Accessibility Center:

---

Future Workshops

• Creating Accessible PowerPoint

• Web Content Management with Collage

• Web Accessibility I & II

• HTML I

---

Questions

Contact the Help Desk

805-437-8552