IT Accessibility Committee Accessible Forms Prepared by the NYS Forum IT Accessibility Committee Presented by Michael B. Short

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

Forms on the Internet On what sites have you seen forms? On what sites have you seen forms? What were they used for? What were they used for? How were the forms laid out? How were the forms laid out?

Forms on the Internet: How are they used? Registration Registration Login Login Order Forms Order Forms Shopping Carts Shopping Carts Surveys Surveys Feedback Feedback

Forms on the Internet: What are the problems? Improper layout – e.g., label above control, no label, improperly coded label Improper layout – e.g., label above control, no label, improperly coded label Inadequate navigation – e.g., unspecified or non-sequential tab order Inadequate navigation – e.g., unspecified or non-sequential tab order Lack of orientation – e.g., what is the context for the question? Lack of orientation – e.g., what is the context for the question? Lack of direction – e.g., “surprise pop-ups” with no indication of new window Lack of direction – e.g., “surprise pop-ups” with no indication of new window

Form Basics: Forms collect information Forms collect information Forms process information Forms process information Forms provide opportunity for interaction Forms provide opportunity for interaction

Form Basics: HTML Review form element – marks beginning/end of form within regular HTML document form element – marks beginning/end of form within regular HTML document HTML elements within form that users interact with (a.k.a. “form controls”) HTML elements within form that users interact with (a.k.a. “form controls”) Element Name attribute – unique in form Element Name attribute – unique in form Element attribute values – initial & current Element attribute values – initial & current Element Type attribute – set by author, governs how control is used Element Type attribute – set by author, governs how control is used Element Tabindex attribute – provides navigational direction Element Tabindex attribute – provides navigational direction

Form Basics: HTML Review Common form elements & attributes: Common form elements & attributes: form – action, method, enctype, etc. form – action, method, enctype, etc. input – text, password, checkbox, radio, submit, reset, file, hidden, image, button input – text, password, checkbox, radio, submit, reset, file, hidden, image, button select – option, optgroup, selected select – option, optgroup, selected textarea – rows, columns textarea – rows, columns label – for input elements label – for input elements Attributes for all form elements – name, id, class, tabindex, etc. Attributes for all form elements – name, id, class, tabindex, etc.

Accessibility Problems with Forms Specifying required fields – “The items in RED are required.” Specifying required fields – “The items in RED are required.” Who will have trouble? Who will have trouble? People who are blind People who are blind People who are color blind People who are color blind People with some vision impairments People with some vision impairments

Accessibility Problems with Forms BETTER IDEA: “The items marked in red with asterisks are required.” “The items marked in red with asterisks are required.” Provides two cues (color and *) for sighted visitors and a clear indicator for individuals with vision impairments. Provides two cues (color and *) for sighted visitors and a clear indicator for individuals with vision impairments.

Accessibility Problems with Forms: Improper Form Layout Screen reader will render this as: Screen reader will render this as: “Name, address, city, state, zip, “Name, address, city, state, zip, input, input, input, input, input” input, input, input, input, input”

Accessibility Problems with Forms: Lack of Context Not providing a clear association between a label and an element Not providing a clear association between a label and an element

Accessibility Problems with Forms Not providing clear navigation path for non-visual users Not providing clear navigation path for non-visual users

Good Form Programming Practices Use tabindex attribute for form controls Use tabindex attribute for form controls ( a, button, input, select, textarea )

Good Form Programming Practices Use explicit label s Use explicit label s Paired Element (open/close) Paired Element (open/close) Works with value of id attribute in associated form element Works with value of id attribute in associated form element First Name: First Name:

Good Form Programming Practices If possible, use pull-down menus instead of checkboxes or radio buttons If possible, use pull-down menus instead of checkboxes or radio buttons

Good Form Programming Practices Use fieldset/legend to provide richer context for users with longer, more complicated forms Use fieldset/legend to provide richer context for users with longer, more complicated forms