NOTE: Press CTRL+F4 to close this browser window when finished.
HTML forms allow you to access shopping carts, search engines, web-based email, and more. Forms include controls such as edit boxes, check boxes, radio buttons, combo boxes, and other controls like those used in dialog boxes. We’ve already talked about JAWS navigation quick key commands that allow you to move quickly from one control to another, so now, let’s fill out a form.
I’m here on the Surf’s Up home page and will press INSERT+F7 to display a list of links, then F, Foxtrot, to navigate to the link for the Forms Page, and ENTER to activate it.
(JAWS) Links List dialog, links List view, Skip to Navigation, 1 of 27, Forms, 8 of 27, Using Forms with JAWS - Google Chrome, Using Forms with JAWS, Page has 2 Regions, 17 headings and 13 links.
(N) I’ll press INSERT+F7 again, then W, Whisky, to navigate to the link for the Web Track sample form.
(J) Links List dialog, links List view, Surf’s Up, 1 of 13, Web Track Sample Form, 2 of 13
(N) I will press ENTER to activate this link.
(J) Page has 1heading and no links. The Web Track Sample Call Tracking System.
(N) I’ll press INSERT+F5 to list all the form controls on the page.
(J) Select a Form Field dialog, List1 List view, First name. This is a required field. Edit, 1 of 25
(N) I will press DOWN ARROW to move through a couple of these.
(J) Middle initial Edit, Last name. This is a required field. Edit
(N) I could press ENTER on any of these choices to navigate directly to that field, but I’ll press ESC instead and move around the form using keyboard commands.
(J) ESC. Web Track Sample Form
(N) I'm going to press CTRL+HOME to make sure focus is at the top of the form, and then I’ll navigate to the first field by pressing TAB. By default, Forms Mode will automatically activate when focus is in this field.
(J) First name. This is a required field. Edit.
(N) You will hear a “pop” sound when Forms Mode is turned on and off. The first sound is higher in pitch than the second, so the two actions are distinguishable. Forms mode is what tells JAWS you want to enter information rather than using letters and numbers as Navigation Quick keys. For instance, if you want to type the letter H, Hotel, in an Edit box, but Forms Mode isn’t on, JAWS will treat that keystroke as the Navigation Quick key for moving by headings. Once Forms Mode is on, pressing the letter H would type that letter into the Edit box. You can press TAB to move to each form control. I’ll go ahead and type my first name, then press TAB to navigate through a couple of these fields.
(J) Liz. Middle initial Edit, E, Last name. This is a required field. Edit, Whitaker, Area Code Edit.
(N) This begins a series of auto-advance edit boxes where, as you type in the first three digits for the area code, focus automatically switches to the next field. You may encounter such auto-advance fields in the real world, so this is a great place to practice with them. I'll type in three digits for the area code.
(J) 727, Prefix Edit
(N) As soon as I typed the last 7, focus automatically switched to the next control, the prefix edit box. I'll type in 803.
(J) 803, Number edit.
(N) Focus automatically moved to the Number edit box, and I'll type in the remaining number.
(J) 8000. E-Mail Address * Edit. This is a required field.
(N) Focus moved forward to the email address edit box. I'll type in my email address and press TAB.
(J) [email protected] This is a required field. Mailing Address Button.(N) Notice that when focus reaches a button, forms mode goes off. This is because as you are navigating through a form, buttons can be activated without going into forms mode. If you need to activate a button, just press SPACEBAR when focus is on the button. I will continue to press TAB to move forward in the form.
(J) Billing Address Button, Account Information, Order Number Edit, 357, Account Number Edit, 2468
(N) You will interact with different form fields in different ways. For example, I’ll press TAB to move to the next control, a check box, and press SPACEBAR to check it.
(J) JAWS® check box, not checked, Ordered Products, JAWS® check box checked
(N) I’ll press C, Charlie, to navigate to a combo box, and press ENTER to open it.
(J) Action Taken Combo box, Hardware Issue, Current Call, Combo box, Hardware Issue
(N) I’ll press DOWN ARROW to make a different selection.
(J) Software Issue
(N) I'll press TAB to move to the next control. Pay attention to what JAWS says here.
(J) Notes edit, Contains text.
(N) Did you hear the announcement that this field contains text? When a multi-line edit box contains text, JAWS tells you so you are aware that there is text already here, which you can read and edit if needed. Now, let us look at the list of form controls in JAWS. I will press INSERT+F5.
(J) INSERT+F5. Select a Form Field dialog, list 1, List view, First name. This is a required field. Edit Liz, 1 of 25.
(N) I'm going to press DOWN ARROW to review the items here in the list of form controls for JAWS. This is a great feature, because it puts all the form controls and the contents within them into one, easily navigated vertical list. For someone with low vision who is using ZoomText screen magnification, or Fusion (a combination of JAWS and ZoomText), this is helpful because it puts everything in one central location making it easier to proof with vision. It's easy to get lost pressing TAB or SHIFT+TAB through a form to see if you have filled out everything correctly. Here you can press UP or DOWN ARROW to move through this vertical list and see if everything is filled out correctly. I will continue to press DOWN ARROW a few more times.
(J) Middle Edit E. Last name. This is a required field. Edit Whitaker. Area Code Edit 727. Prefix Edit 803. Number Edit 8000, E-Mail Address * Edit [email protected], Mailing Address Button, Billing Address Button, Account Information Order Number Edit 357.
(N) OK, I see an error here. The order number in this edit box is from the last order I was working on. I need to change this, so all I need to do to fix it is press ENTER to move to that spot in the form. I'll do that now.
(J) Account Information, Order Number Edit, 357
(N) The order number I need to reference is 1001, so I'll type that now.
(J) 1001
(N) Use the sample form in Surf’s Up to practice navigating through form fields and entering information. This form does not collect any information, so feel free to practice and explore it more. This has been a demonstration on filling out forms on the web with JAWS.