Accessible Forms

1. Accessible Forms Prepared by the NYS Forum IT Accessibility Committee http://www.nysforum.org/accessibility/resources/curriculum/forms Presented by Michael B. Short

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

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

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

5. Forms on the Internet:What are the problems? 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” with no indication of new window

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

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

8. Form Basics:HTML Review 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 input elements Attributes for all form elements – name, id, class, tabindex, etc.

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

10. Accessibility Problemswith Forms BETTER IDEA: “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.

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

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

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

14. Good Form Programming Practices Use tabindex attribute for form controls (a, button, input, select, textarea) <input type=“text” id=“fname” name=“UserFirstName” tabindex=“4” >

15. Good Form Programming Practices Use explicit labels Paired Element (open/close) Works with value of id attribute in associated form element <label for=“fname”>First Name:</label> <input type=“text” id=“fname” name=“UserFirstName” tabindex=“4”>

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

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