1. WEBINAR SERIES: ACCESSIBLE INTERACTIVE DOCUMENTS Week 3: Accessible Web Forms Norman Coombs Norm.Coombs@gmail.com

2. TODAY’S AGENDA What’s the problem? Legislation and standards Screen readers and forms Text boxes, label, id and input Required fields and errors Check boxes, fieldset and legend Scripts needed to process the data input Practice exercises

3. WHAT ARE FORMS FOR? "An HTML form on a Web page allows a user to enter data that is sent to a server for processing" "...Web users fill out the forms using checkboxes, radio buttons, or text fields. Script commands on the page or on a server then processes the data

4. HOW DO FORMS WORK? The HTML code in the Web page requests input from the user Other HTML code accepts the user’s input All the HTML form code must convey the request to the user and then permit the user to respond using the keyboard

5. WHAT’S THE PROBLEM? A survey of over 20,000 university Web pages found that less than 29% of the Web pages that have form controls use proper labeling for accessibility Creating Web forms that are accessible to people with disabilities requires understanding of the labeling features of HTML markup and how browsers interpret labeling markup for assistive technologies

6. Web Content Accessibility Guidelines (WCAG2): perceivable, operable, useable robust www.w3.org/TR/WCAG/ The Federal Rehabilitation Act, Section 508 www.section508.gov/www.section508.gov/ Illinois Accessibility best practices http://html.cita.illinois.edu/ GUIDELINES AND STANDARDS

7. THE INTENT OF WCAG GUIDELINE 2.4 For finding, navigation, and orientation, it is important that the user can find out what the current location is For navigation, information about the possible destinations needs to be available Provisions need to be taken to ensure that screen reader users can successfully navigate the content Unusual user interface features or behaviors may confuse people with cognitive disabilities

8. Everyone makes mistakes. However, people with some disabilities have more difficulty creating error-free input This guideline seeks to reduce the number of serious or irreversible errors that are made, increase the likelihood that all errors will be noticed by the user, and help users understand what they should do to correct an error THE INTENT OF WCAG GUIDELINE 3.3

9. ACCESSIBILITY FOR WHOM? Form accessibility primarily refers to screen reader users Secondarily it may concern users with cognitive difficulties and some users with motor control issues

10. BASIC WEB ACCESSIBILITY Accessible forms must be on Web pages that meet general accessibility principles Well organized Clear language Good foreground and background contrast Crisp easy-to-read font Images have alternative text All controls are keyboard accessible Simple, clear page navigation

11. SCREEN READERS AND FORMS The form must convey the necessary form information to the screen reader and its user The form must enable the screen reader and its user to interact effectively with the form and to know that the desired action was performed successfully

12. FORMS AS BLACK HOLES! What I heard in one form asking for info on students First Name Last Name Edit

13. DROP-DOWN MENUS ACCESSIBILITY Drop-down menus like forms should be Keyboard Accessible, Logical, and Easy to Use The problem is when the menu utilizes the 'onchange event' script Moving between items trigger the action without the user having actually selected it

14. HTML CODE FOR FORMS Most people creating Web pages, who are not professional designers, create the HTML using a WYSIWYG application like Dreamweaver and know little if any HTML Knowing some HTML code related to forms will help you both in authoring and checking the WYSIWYG output, but we will keep it to a minimum

15. Sample HTML code First Name The text with the label element tells the user that the form wants a first name Input and text indicates that the form is requesting a text input FORM: LABEL, INPUT & ID ELEMENTS 1

16. More HTML code explanation: The label and id elements both are related to the word “first” which is in quotes and connects the label and the id together The input element and type=text indicates it is looking for text input The size specifies the size allotted to the text box FORM: LABEL, INPUT & ID ELEMENTS 2

17. Still more HTML code explanation The name element in this line of code actually will help the form talk to the form processing script on the server Forms have to talk to script on a server to process the form such as emailing its data to a user FORM: LABEL, INPUT & ID ELEMENTS 3

18. REQUIRED FORM FIELDS 1 Required form fields need 2 things to work properly: The form has to interact with script to process it and to check that the required input was activated The form has to convey to the user that the field is required and that needs to be accessible to screen reader software

19. The form script is beyond this Webinar which is limited to HTML HTML code example: First Name (required) The text displayed to the user now reads “first name (required) instead of only “first name” REQUIRED FORM FIELDS 2

20. Some designers dislike the text “required” being visible and instead mark the field with the color red or an asterisk Accessibility can be achieved with an image with an alternative text This could be totally invisible with a 1-pixel image the same color as the background REQUIRED FORM FIELDS 3

21. ERROR CORRECTION This is also done by script The script recognizes a required field is left blank Then a page is displayed indicating what was missed and returning to the form

22. The items below are identified as radio buttons. The input element will let the user check or uncheck it Male Female ACCESSIBLE CHECK BOXES

23. FORM ELEMENTS: FIELDSET AND LEGEND 1 The fieldset element is used to group items in a form The HTML legend Element represents a caption for the element in the fieldset Fieldset and legend elements should always be used together They allow you to create and name groups of related input fields in a forms By doing this you help users understand how the input fields are related

24. The first line of the grouping of related elements begins with and the last line ends with The legend provides a title or description for the grouping (then your group of check box items) FORM ELEMENTS: FIELDSET AND LEGEND 2

25. Gender? Male Female FORM ELEMENTS: FIELDSET AND LEGEND 3

26. <form action= http://dummy.com/php/test.phphttp://dummy.com/php/test.php method="post"> (the form content goes here) ONE PEAK AT FORM SCRIPT

27. PRACTICE MATERIALS The archive resource page for this Webinar will include a link to a zip file which contains sample Web pages for you to edit and practice what you learn: http://easi.cc/archive/accessible- forms2013/resources.htmm

28. RESOURCES FOR MORE ADVANCED FORMS WebAIM: http://webaim.org/search/?q=accessible+for ms http://webaim.org/standards/wcag/checklist U. of Illinois best practices: http://html.cita.uiuc.edu Web Content Accessible Guidelines http://www.w3.org/WAI/guid-tech.html