1 / 17

Accessible Forms

Accessible Forms. Prepared by the NYS Forum IT Accessibility Committee http://www.nysforum.org/accessibility/resources/curriculum/forms. Presented by Michael B. Short. Accessible Forms. OBJECTIVE: the learner will list four potential problems with forms and a remedy for each.

keefe
Download Presentation

Accessible Forms

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related