Creating Accessible Forms


Slide 1

Lecture Notes

Karen McCall, M.Ed.

Copyright 2007by Karen McCall


Slide 2

Lecture Notes

What makes a form accessible?

How do people using screen readers access forms?

Types of forms:

HTML

Word 2003

Word 2007

PDF

Tips for good forms.


Slide 3

Lecture Notes

What is an Accessible Form

Think of trying to fill out a form blindfolded. What information would you need in order to provide the requested data?

Logical order of data needed.

Access to the form fields themselves.

Access to ToolTips or labels in the form fields giving direction and clarity on what data is to be entered.

Think of the form fields in isolation of anything else on the page/form document.


Slide 4

Lecture Notes

General Form Guidelines

Make sure:

The form fields are in a logical order.

You can use the keyboard to Tab through the fields in a logical order.

The label concisely prompts the person for data. For example, "Type your first name."

That all required fields have that information in the label. For example, "Address - required."

Be cognizant of colour choices in indicating required fields.


Slide 5

Lecture Notes

Dreamweaver 8 - Step 1


Slide 6

Lecture Notes

Dreamweaver 9 - Step 2A

Choose New > CSS Styles > Form/Accessible.

Save the CSS document and close it.

Choose New > Blank document.

Save the document, link the CSS, and choose Insert > Form.

This puts the form structure in the document.

Put the cursor in the form structure and choose Insert > Form and choose a form control. In this example it is a text field.


Slide 7

Lecture Notes

Dreamweaver 9 - StepB


Slide 8

Lecture Notes

Dreamweaver 9 - Step 2C

Add the form structure.

Then add a form control


Slide 9

Lecture Notes

Dreamweaver 9 - StepD


Slide 10

Lecture Notes

Text Field Form Code

This is the code for a text field.

<label>Name

<input type="text" name="textfield" title="Type your name - required" tabindex="1" />

</label>


Slide 11

Lecture Notes

HTML Form Resources

Accessible Form Guidelines, from Web Semantics.

http://www.websemantics.co.uk/tutorials/accessible_forms/

Accessible HTML/XML Forms: Beginner Level, from the Web Standards Project.

http://www.webstandards.org/learn/tutorials/accessible-forms/beginner/

Accessible Data Forms, from the University of Wisconsin.

http://www.doit.wisc.edu/accessibility/online-course/standards/forms.htm

Create Accessible HTML Forms, from Adobe Dreamweaver CSS Online Help.

http://livedocs.adobe.com/en_US/Dreamweaver/9.0/help.html?content=WSc78c5058ca073340dcda9110b1f693f21-7920.html

Prettier Accessible Forms, from A List Apart.

http://alistapart.com/articles/prettyaccessibleforms


Slide 12

Lecture Notes

Word 2003 Forms - 1

Turn on the Forms toolbar:

View > Toolbars > Form.

In a new or existing Word document.

Position the cursor where you want the text field.

Type the word "Name" and press the Tab key.

Tabbing is only done for visual spacing.

Activate the "Edit box" button from the toolbar. This is accessible from the keyboard.


Slide 13

Lecture Notes

Word 2003 Forms - 2

JawsKey + Ctrl + Home will put focus in the first form field on the page currently the only form field on the page.

We need to provide a ToolTip for the field so that we don't hear "Edit" with no context.

Once we are in the form field, press the AppKey and choose Properties.

In the lower left corner of the dialog is a button "Additional Help Text."

Activate this button and "Type your own" text.


Slide 14

Lecture Notes

Word 2003 Forms Properties


Slide 15

Lecture Notes

Word 2003 Resources

Microsoft Word 2003 and JAWS: Advanced, http://www.irti-cat.peachhost.com/ct_CGtutorials_booksandeducationalmaterial.htm

by Karen McCall [last chapter is on accessible forms]. This book is bundled with the Introduction and Intermediate level Word books.

Creating Accessible Forms in MS Word,

from Freedom Scientific. http://www.freedomscientific.com/Training/training_Forms_in_Word.asp

Accessible Forms - MS Word, http://www.ncsu.edu/it/access/tutorials/forms/formword.php

from NC State University.


Slide 16

Lecture Notes

Word 2007 Forms - 1A

Content Controls

Can only be used with the .docx document format.

Allow document authors to place Rich Text and stylized text into fields.

End-users can insert pictures.

Can also be constructed to allow end-users to choose from a gallery of "Building Blocks" or boilerplate text/content.

To date I haven't found out how to access these controls using the keyboard.


Slide 17

Lecture Notes

Word 2007 Forms - 1B

In a .docx document:

Turn on the Developer Tab:

Choose File > Word Options > Popular > Show Developer Tab in Ribbon.


Slide 18

Lecture Notes

Word 2007 Forms - 1C

You must enter "Design Mode."

The RTF field is multi-line.

These content controls don't need pre-designed form templates.

Have their own Name and Tags attributes.

Once you add the Content Control, modify the properties to provide the Name and Tags for the control.


Slide 19

Lecture Notes

Word 2007 Forms - 1D


Slide 20

Lecture Notes

Word 2007 Forms - 1C

Legacy Controls.

Use the "Legacy Controls" to create more accessible forms in Word 2007.

Must save the document as a .doc not a .docx file.

Radio buttons and check boxes are ActiveX.


Slide 21

Lecture Notes

Word 2007 Respirces

This book does not focus on accessibility; however, it does provide:

Concise and well written information on creating Content and Legacy Controls.

Appendix C: Accessibility Tips and Techniques [This appendix was written by Karen McCall.]

Special Edition: Using Word 2007, http://www.amazon.com/Special-Using-Microsoft-Office-Word/dp/078973608X

by Faithe Wempen, a QUE book.

Brian Jones, Using Word 2007 Content Controls [this link will launch the video]

http://wm.microsoft.com/ms/msdn/office/word2007contentcontrols/word2007contentcontrols.wmv


Slide 22

Lecture Notes

PSF Forms - 1A

Hierarchy of tasks.

Scanned document? Perform OCR/Acrobat.

Forms? Add form fields to document.

Links? Add links to document.

THEN tag the document.


Slide 23

Lecture Notes

PSF Forms - 1B

Manually add form fields.

Create a template of the form in a word processor or other application.

Save it as "untagged" PDF

Print > Adobe PDF.

Use the Form toolbar.

View > Toolbars > Forms.

It is easier to work with if you dock the toolbar.


Slide 24

Lecture Notes

PSF Forms - 1C

Activate the text field button.

The cursor becomes a cross hair.

Draw the text field on the page where you want it.

When you release the mouse button the Properties dialog opens.


Slide 25

Lecture Notes

PSF Forms - 1D

As long as you are in edit mode for the form, your form fields will be identified visually.

You can resize them or adjust their position..


Slide 26

Lecture Notes

LifeCycle Designer -1A

Improved intuitive form detection with Acrobat 8 and LiveCycle Designer.

Originally "Adobe Designer" in Acrobat 7 Pro.

Creates tagged PDF forms by default.

Can use it from Acrobat or as a stand-alone form tool.

Can create your forms in LiveCycle Designer.

Now have the ability to "Enable Usage Rights in Adobe Reader" so that end-user can save a copy of the form electronically.


Slide 27

Lecture Notes

LifeCycle Designer -1B


Slide 28

Lecture Notes

LifeCycle Designer -1C


Slide 29

Lecture Notes

LifeCycle Designer -1D


Slide 30

Lecture Notes

LifeCycle Designer -1E


Slide 31

Lecture Notes

LifeCycle Designer -1F


Slide 32

Lecture Notes

LifeCycle Designer -1G


Slide 33

Lecture Notes

LifeCycle Designer -1G


Slide 34

Lecture Notes

LifeCycle Designer -1H


Slide 35

Lecture Notes

LifeCycle Designer -Edit Forms


Slide 36

Lecture Notes

Accessible PDF Resources

Karlen Communications

Accessible and Usable PDF Documents - book.

Accessible PDF On-site and online workshops.

http://www.iprimus.ca/~martha/table.htm

Criterion 508 Solutions

Section 508 web accessibility audits.

Section 508 accessible PDF repairs and audits.

Section 508 online learning academy.

http://www.criterion508.com/

IMC [Information Manufacturing Corporation]

High volume PDF to accessible PDF conversion.

Searchable document archiving.

http://www.infoman.com/