Creating Accessible PDFs - Part II

1. Creating Accessible PDFs - Part II Peter Mosinskis Supervisor of Web Services CSU Channel Islands Rev. 2007-05-30

2. Overview • Review • Hands-On Exercises for Creating PDF Forms • Comparison of Form Formats • Resources

3. Review Best practices, tools, and steps

4. 7 Steps to Accessible Word Documents • Add text description to graphics and images • Use color correctly • Use Styles to add structure • Use Tables instead of tabs • Let Word create Bullets and Numbering • Provide a Table of Contents for long documents • Add document metadata

5. 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

6. 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

7. Exercise 1 A simple sample

8. 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

9. 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?

10. 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

11. 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

12. Co to Tools > Advanced Editing Select “Show Forms Toolbar” Enables toolbar shown below Enable Forms toolbar

13. Check and Fix Reading Order • Go to Advanced > Accessibility > TouchUp Reading Order… • Also available on “Advanced Editing” toolbar

14. Click “Show Order Panel” Check and Fix Reading Order

15. Enable the Tags panel Go to View > Navigation Tabs > check “Tags” Under “Options”, check: Tag Annotations Highlight Content Adjust the Tags panel

16. 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 Select Tag in Tags tree

17. 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

18. Set form field properties • Will vary based on form field selected

19. Form Field Settings …and properties

20. “General” tab Ignore “Name” field Set “Tooltip” to question: Example: “Enter your last name” Example: “Any comments or suggestions?” Text Field Properties

21. “Appearance” tab Set “Font Size” to fixed value (such as 9) Text Field Properties (cont.)

22. “Options” tab Check “Multi-line” only if for comment/suggestion or long answer box Uncheck “Scroll long text” Text Field Properties (cont.)

23. “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

24. “Options” tab Set “Export Value” to answer: Example: “Yes” or “No” Radio Button Properties (cont.)

25. “General” tab Ignore “Name” field Set “Tooltip” to question AND answer: Example: “Check if you use Dreamweaver for Web Development” Check Box Button Properties

26. “Options” tab Leave Check Box Style set to “Check” Leave “Export Value” set to “Yes” Check Box Button Properties (cont.)

27. “General” tab Ignore “Name” field Set “Tooltip” to question: Example: “Select your birth year” List and Combo Box Properties

28. “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” List and Combo Box Properties (cont.)

29. “General” tab Ignore “Name” field Set “Tooltip” to button text Example: “Clear All Form Fields” Button Properties

30. “Options” tab In “Label” field, enter button text Example: “Clear All Form Fields” Button Properties (cont.)

31. “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 Button Properties (cont.)

32. Lather, Rinse, Repeat Exercises 2 and 3

33. 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

34. 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

35. 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

36. Form Comparison PDF vs. Office vs. HTML

37. 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

38. 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

39. 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

40. MS Office PDF HTML MORE ACCESSIBLE Accessibility Spectrum

41. 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

42. PDF Resources • Adobe Accessibility Resources • http://www.adobe.com/products/acrobat/solutionsacc.html • Accessible PDF tutorials • HTCTU: http://www.htctu.fhda.edu/trainings/manuals/web/CreatingAccessibleAA7.pdf • AccessELearning: http://www.accesselearning.net/mod8/8_01.php • WebAIM: http://www.webaim.org/techniques/acrobat/ • Ohio State Web Accessibility Center: http://www.wac.ohio-state.edu/pdf/word/PDFfromWord-graphic.htm

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

44. Questions Contact the Help Desk helpdesk@csuci.edu 805-437-8552