PowerPoint Presentation

SLIDE FORMAT:
Generally speaking, the slides consist of black text against a white background.  Where significant images are used, they will be described.

SLIDE 1
SLIDE TITLE:  Accessible Forms
SLIDE CONTENT:
The slide is divided into two vertical columns.
On the left:
Prepared by:
The NYS Forum for Information Resource Management
IT Accessibility Committee
On the right:
A photo of an animal cracker in the shape of an elephant, with many bites removed.

SLIDE 2
SLIDE TITLE:  Accessible Forms
SLIDE CONTENT:
OBJECTIVE: the learner will list four potential problems with forms and a remedy for each

SLIDE 3
SLIDE TITLE:  Forms on the Internet
SLIDE CONTENT:
* On what sites have you seen forms?
* What were they used for?
* How were the forms laid out?
SLIDE NOTES:
Have the audience share examples of web forms.  Have them recall the uses they’ve seen and the form layouts they’ve seen.

SLIDE 4
SLIDE TITLE:  Forms on the Internet  
How are they used?
SLIDE CONTENT:
* Registration
* Login
* Order Forms
* Shopping Carts
* Surveys
* Feedback
SLIDE NOTES:
Point out that many sites now use login forms to restrict access to site and without properly designed forms, that means people with disabilities might not be able to use these sites at all.


SLIDE 5
SLIDE TITLE:  Forms on the Internet  
What are the problems?
SLIDE CONTENT:
* Improper layout - e.g., label above control, no label, improperly coded label
* Inadequate navigation - e.g., unspecified or non-sequential tab order
* Lack of orientation - e.g., what is the context for the question?
* Lack of direction - e.g., "surprise pop-ups" for help with no indication of new window	
SLIDE NOTES:
Think about how information is presented to people with visual impairments.  Think about how people with mobility impairments interact with web sites.  What problems do you think the forms you’ve seen would pose for people with these impairments?
Examples of these types of problems will be demonstrated.

SLIDE 6
SLIDE TITLE:  Form Basics:
SLIDE CONTENT:
* Forms collect information
* Forms process information
* Forms provide opportunity for interaction

SLIDE 7
SLIDE TITLE:  Form Basics:  HTML Review
SLIDE CONTENT:
* FORM element - marks beginning/end of form within regular HTML document
* Form control - item within form that users interact with
		- Control name - unique in form
		- Control value - initial & current
		- Control Type - set by author, governs how control is used

SLIDE 8
SLIDE TITLE:  Form Basics:  HTML Review
SLIDE CONTENT:
* Common form elements & attributes:
	- FORM - action, method, enctype, etc.
	- INPUT - text, password, checkbox, radio, submit, reset, file, hidden, image, button 
 	- SELECT - option, optgroup, selected
	- TEXTAREA - rows, columns
	- LABEL - for
	- All form elements - name, id, class, etc.
	
SLIDE 9
SLIDE TITLE:  Accessibility Problems with Forms
SLIDE CONTENT:
* Specifying required fields - "The items in RED are required."
* Who will have trouble?
 	- People who are color blind
	- People with some vision impairments
	- People viewing your site on a black-and-white PDA or web-enabled cell phone
SLIDE NOTES:
This practice violates one of the Priority one checkpoints of the WCAG:  “Ensure that all information conveyed with color is also available without color, for example from context or markup.”

SLIDE 10
SLIDE TITLE:  Accessibility Problems with Forms
SLIDE CONTENT:
BETTER IDEA:  
* "The items marked with * are required."
* Provides two cues for sighted visitors and a clear indicator for individuals with vision impairments.
SLIDE NOTES:
If you must use color, use another marker, such as an asterisk of a different color from normal text.

SLIDE 11
SLIDE TITLE:  Accessibility Problems with Forms:  Improper Form Layout
SLIDE CONTENT:
Below the slide title, an image showing a part of a form.  
Caption:  Sample Form 1
Below the caption are five empty text boxes.  Above the text boxes are the labels (from left to right):  Name, Address, City, State, Zip
Below the image:
* Screen reader will render this form as:
   "Name, address, city, state, zip, input, input, input, input, input"
SLIDE NOTES:
In the form example, the text describing the field is stacked above the field.  The form is rendered in a table, with the field descriptors comprising row 1 and the fields themselves comprising row 2.  A screen reader linearizes text – i.e., reads cells in the table from left to right, top to bottom.  What this means is that the screen reader will read all the labels before presenting any of the input fields.  If for some reason you MUST lay out forms using this method, make sure that the label and the input field are in the same cell – AND make sure that the label is properly coded and associated with the input field.

SLIDE 12
SLIDE TITLE:  Accessibility Problems with Forms:  Lack of Context
SLIDE CONTENT:
Below the slide title, an image showing a part of a form.  
Caption:  Sample Form 2
Below the caption are some empty form fields:
Row 1 - Name [empty form field]
Row 2 - Address [empty form field]
Row 3 - No label, but three empty form fields.
Below the image:
* Not providing a clear association between a label and an element
SLIDE NOTES:
In this form example, the developer has not individually presented address fields.  A sighted user might be able to intuit that the first line is for the street address and the second line is for city, state, and zip code, but a non-sighted user would only hear the label Address, followed by the input field, and might assume that the developer intended him/her to enter their entire address in the street address input field.


SLIDE 13
SLIDE TITLE:  Accessibility Problems with Forms
SLIDE CONTENT:
The images at the top of this slide are divided into two vertical columns.
On the left:
Sample Form 3A - Proper Navigation
Six label/empty form field combinations, vertically stacked:
Name:  empty form field, in which is written in blue:  "Tabindex=1"
Address: empty form field, in which is written in blue:  "Tabindex=2"
City:  empty form field, in which is written in blue:  "Tabindex=3"
State:  empty form field, to the right of which is written in blue:  "Tabindex=4" with an arrow pointing to the field
Zip:  empty form field, in which is written in blue:  "Tabindex=5"
On the right:
Sample Form 3B - Problem Navigation
Seven label/empty form field combinations, vertically stacked:
Name:  empty form field, in which is written in blue:  "Tabindex=1"
Address Line 1: empty form field, in which is written in blue:  "Tabindex=2"
Address Line 2: empty form field
City:  empty form field, in which is written in blue:  "Tabindex=3"
State:  empty form field, to the right of which is written in blue:  "Tabindex=4" with an arrow pointing to the field
Zip:  empty form field, in which is written in blue:  "Tabindex=5"
Below both form images, spanning the width of the slide:
* Not providing clear navigation path for non-visual users

SLIDE 14
SLIDE TITLE:  Good Form Programming Practices
SLIDE CONTENT:
* Use TABINDEX attribute for form controls
	(A, BUTTON, INPUT, SELECT, TEXTAREA)

<INPUT TYPE="text" ID="fname" NAME="UserFirstName" TABINDEX="4">

SLIDE 15
SLIDE TITLE:  Good Form Programming Practices
SLIDE CONTENT:
* Use explicit LABELs
* Paired Element (open/close)
* Works with value of ID attribute in associated control

<LABEL FOR="fname">First Name:</LABEL>
	 <INPUT TYPE="text" ID="fname" NAME="UserFirstName" TABINDEX="4" >

SLIDE 16
SLIDE TITLE:  Good Form Programming Practices
SLIDE CONTENT:
* Use ACCESSKEY attributes for form controls
(A, INPUT, BUTTON, LABEL, LEGEND, TEXTAREA)

<INPUT TYPE="text" ID="fname" NAME="UserFirstName" ACCESSKEY="f" TABINDEX="4" >

SLIDE 17
SLIDE TITLE:  Good Form Programming Practices
SLIDE CONTENT:
The slide is divided into two vertical columns.
On the left:
Caption:  Sample Form 4A - Difficult for Mobility-Impaired
Form label/element combinations are vertically stacked:
Name: [text box]
Address: [text box]
City:  [text box]
State: Radio group with a radio button for each state:  NY, VT, MA
Zip: [text box]
Customer Group: Series of vertically stacked checkboxes:  Reader, Listener, Viewer
On the right:
Caption:  Sample Form 4B - Easier for Mobility-Impaired
Form label/element combinations are vertically stacked:
Name: [text box]
Address: [text box]
City:  [text box]
State: Pull-down list with a line for each state:  NY, VT, MA
Zip: [text box]
Customer Group: Pull-down list with a line for each category:  Reader, Listener, Viewer
Below the form samples, spanning the width of the slide:
* If possible, use pull-down menus instead of checkboxes or radio buttons 
SLIDE NOTES:
Discuss some of the alternative methods that individuals with mobility impairments use to interact with the computer (e.g., head-fastened pointing devices, puffers, etc.) and the difficulties that those methods might pose in trying to hit a target as small as a radio button or checkbox.

SLIDE 18
SLIDE TITLE:  Good Form Programming Practices
SLIDE CONTENT:
Below the slide title is an image of a form.  
Caption:  Oceania Employment Application
Items marked with an asterisk (*) are required elements.
The following elements are highlighted with a light blue background, indicating a fieldset:
First Name*: [text box]
Middle Initial: [text box]
Last Name*: [text box]
Social Security Number*: [text box](Instructions within the text box:  Type SSN without dashes.)
Street Address*: [text box](Instructions within the text box:  Type in Street Address.)
Below the form image:
* Use FIELDSET/LEGEND to provide richer context for users (see highlighted section above) with longer, more complicated forms

SLIDE 19
SLIDE TITLE:  QUIZ
SLIDE CONTENT:
None.

End Presentation.