Creating Accessible PDFs - Part II Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev

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/suggestio n 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 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 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 and save data Can generate a print copy/receipt Cons Development is very labor intensive

Accessibility Spectrum HTMLPDFMS Office MORE ACCESSIBLE

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: ccessibleAA7.pdf ccessibleAA7.pdf AccessELearning: WebAIM: Ohio State Web Accessibility Center: state.edu/pdf/word/PDFfromWord-graphic.htmhttp:// state.edu/pdf/word/PDFfromWord-graphic.htm

Future Workshops Creating Accessible PowerPoint Web Content Management with Collage Web Accessibility I & II HTML I

Questions Contact the Help Desk