Creating Accessible Forms with FrontPage 2003.

WAC Workshop: December 2004. Written and Presented by: Lori Bailey.

Want more help with accessible forms? Check out our Accessible Forms Tutorial.

In this tutorial, we will consider each of the form elements and what information you need to include to insert these elements into your HTML form. Although we focus on HTML forms, the requirements are similar regardless of what kind of form it is -- PDF, scripted, or other -- although it may be more difficult to add the appropriate accessible markup. As an overview, you might want to begin by viewing a form with examples of all these elements.

Processing Forms with FrontPage.

By default, FrontPage relies on a special FrontPage client-side and server-side coding to process forms and manage form data. In most cases, this scripting appears in the form of a "webbot". For example, when a new form is created, FrontPage inserts the following HTML:

In this webbot script called "--WEBBOT-SELF--", the results of the form are automatically saved to the comma-delineated file "form_results.csv." inside a FrontPage generated folder called "_private."

This webbot will only work if you have a server that is running FrontPage Server Extensions: the special FrontPage scripts that run these features. If you do have a server that supports FrontPage Server Extensions, you can use these automated features to process your forms. However, be aware that many FrontPage scripts require users to be using the latest version of Internet Explorer and some may cause fatal errors in non-Microsoft browsers. Test your forms in other browsers like Opera or Mozilla Firefox to insure full compatibility.

For this tutorial, we are going to disable these FrontPage scripts and use a PHP script instead. You can run this script on any server that offers PHP support.

Disable FrontPage Web Components.

1. From the Tools menu, choose Page Options.
2. Click on the Authoring tab.
3. Under "FrontPage and SharePoint technologies:" uncheck the boxes next to
1. SharePoint Services,
2. Browse-time Web Components,
3. Author-time Web Components.
4. Under "Browsers," select "Microsoft Internet Explorer Only." -- note: if you do not choose "IE" only, you will not be able to use the Forms Toolbar or Insert menu to create field groups in your forms (you can still do this by manually entering the HTML, but not using the WYSIWYG editor).
5. Under "Browser versions," select "4.0 browsers and later." -- note, to insure that you do not rely on client-side scripting, like JavaScript, to process your forms, you can uncheck the boxes next to "JavaScript," "Java applets," and "Frames."
6. Under "Schema version," select "Internet Explorer 4.0 / Navigator 4.0."
7. Click OK to save your changes.

Here is what the Authoring options window should look like when you are done:

Hands-on Practice

1. Create Your Form.
2. Add Text Boxes.
3. Add a Radio Button Group (Option Group).
4. Add a Drop-Down Menu.
5. Add a Text Area.
6. Add a Check Box Group.
7. Add Buttons (Submit and Reset).

You can follow-along with this tutorial if you have FrontPage 2003. You can either save a copy of our practice page: frontpage-practice.htm and open it in FrontPage or you can download and unzip our sample FrontPage web: frontpage-web.zip (requires an unzip program, like WinZip). You can also start with your own blank page and just follow-along as we add our form and form elements.

This tutorial will walk you through how to create a new form and insert all the necessary form elements, so you end up with a contact form that looks similar to this:

We will insert each of the major form elements and insure each element is marked-up for accessibility.  You can modify the form later and put it on your own site.

Return to Index.

Setup Your Design Area.

Using "Split" View.

As you work, we recommend using the "Split" view in FrontPage, so you can see both the design screen and the HTML code that is being written as you work. Not only does this make it easier to edit your HTML when needed, but this is also a great way to learn HTML -- notice what gets written each time you make changes in the design screen.

To change your current view option: on the View menu, click Page.  Then, click on the appropriate view button at the bottom of your work area: .

Show "Forms" Toolbar.

You can create forms and insert form elements at any time using the Insert menu (choose Form). However, most people find it is easier to work with forms using the Forms toolbar. To turn this toolbar on, go to the View menu and choose Toolbars, then Forms. You can also right-click on any current toolbar and select the Forms toolbar. Note you can move the toolbar around on your screen or dock it to the top, bottom, left or right.

The Forms toolbar looks like this:


This tutorial assumes you have your Forms toolbar visible and directs you to use the toolbar buttons. If you prefer, you can always use the Insert menu instead.

Return to Index.

Step 1: Create Your Form.

First, you need to create a new form on the page, in which all the form elements will be placed:

1. With your cursor on the first line below the "Ask a Question:" header, click on the "Insert Form" button on the Forms toolbar: .  FrontPage inserts an empty form with a Submit and Reset button into your page.
2. Right-click anywhere on your new form and choose Form Properties.
3. Change the "Form Name:" to "contact."
   
4. Click on the Options button.
5. In the "Action:" box, type "process-form.php."
   
6. Click OK to save your options.
7. Click OK again to save your changes to the Form Properties.

When you are done, your HTML should look like this:

Note it is very simple code. In the future, it might be easier to edit the FORM tag directly in the HTML, rather than using the Form Properties window in FrontPage.

For this tutorial, we are using a simple PHP file called "process-form.php" to process our form and send the form information in an e-mail back to us. You can edit the PHP file in FrontPage: insert your e-mail address and update any other relevant information (just follow the instructions in the file). Then post your form, the PHP file, and a thank-you page (displayed after the form is processed) to your PHP-enabled web server.

Return to Index.

Step 2: Add Text Boxes.

Text boxes require a unique label and unique ID for each box. Attach the label to the text box by using the "for" attribute in the LABEL tag. The "for" attribute should equal the "id" attribute in the INPUT tag.

Add three text boxes to your form:

1. Place your cursor to the left of the Submit button and press ENTER to add a line.
2. Move your cursor up to the new line and type "First Name:"
3. Click on the "Insert Text Box" button on the Forms Toolbar: .
4. Select both the text box and the text and click on the "Insert Label" button on the Forms Toolbar: . FrontPage puts a LABEL tag around the text and adds a corresponding ID attribute to the INPUT tag.
5. Repeat steps 2-4 and add a Last Name and E-mail box with labels.

You can add all your text and text boxes first and then go back and add labels or add label tags as you design the form -- it doesn't matter. You can edit your text boxes by right-clicking on the box and choosing "Form Field Properties."   Here, you can set the length of the box, rename the box, and add a tab index. Your HTML should look like this:

Example of Text Boxes:

Return to Index.

Step 3: Add a Radio Button Group (Option Group).

Radio buttons are the most problematic form element for users of assistive technology.  In particular, for JAWS users, it can be difficult to engage "Forms Mode" when the cursor is focus on a radio button. In addition, when a group of radio buttons are used to answer a single question, you must use a FIELDSET to associate both the question and answer with each radio button.  Finally, users can only turn a radio button on -- not off -- and at least one radio button must be selected in the group, making it very important to offer a "None" or "Does not apply" option.  The WAC recommends using radio buttons sparingly and instead choosing a list or drop-down menu.

Tips for Using Radio Button Groups:

1. The only way to associate the general question with the radio button options is to add FIELDSET And LEGEND tags around the entire collection of radio buttons. Keep in mind that the entire LEGEND text is read before each option, so keep it short and to the point.
2. Each radio button must be assigned a unique ID and that ID must be reflected in the associated LABEL "FOR" attribute.
3. Be sure to include a "None" or "Not Applicable" choice, so users can "turn off" or deselect an incorrect choice. In most cases, it is best to make this the default choice.

 

Insert a radio group:

1. Place your cursor next to (to the right of) the E-mail text box, click on the "Insert Group Box" button on the Forms Toolbar. Note: if you add a new paragraph line before inserting your Group Box, FrontPage will wrap the P tag incorrectly and you will need to fix this in the HTML.
2. Click on the "Insert Radio Button" button on the Forms Toolbar. Next to the button, type the description: "Current Graduate Student" and press SHIFT-ENTER to move the cursor to the next without adding a paragraph space.
3. Insert another radio button and add the description: "Current Undergraduate Student" and press SHIFT-ENTER.
4. Insert another radio button and add the description: "None."
5. Attach LABEL tags to each of the radio buttons by highlighting the descriptive text and the button and clicking on the LABEL button on the Forms Toolbar. Repeat for each radio button.
6. Right-click anywhere on the Group Box and choose "Group Box Properties …"
7. Change the "Label" to "Are you a current student?" -- this is the label that will be read before each radio button and description.
8. Right-click on the first radio button and choose "Form Field Properties …"
   
   You can change the value that will be submitted when the button is selected and set the TABINDEX. Repeat this step for each radio button.

When you are finished, your HTML should look similar to this:

Note that the "name" attribute for each radio button is the same. This insures that only one button can be selected at a time. Yet, each button has a unique "id" value. This ties the unique description (LABEL) to the particular radio button. Also, we have inverted our TABINDEX, so that the cursor will focus on the last option first and move up the list, rather than down.

Example of Radio Buttons (inside FIELDSET):

Return to Index.

Step 4: Add a Drop-Down Menu.

Menus and list boxes are excellent choices for presenting multiple options in one field. They can be limited to accept only one answer or to allow multiple selections. Both FrontPage and Dreamweaver automate much of the work for accessible menus and list boxes.

Notice in the example below that each OPTION tag does not require a separate label. Wherever a form element includes a VALUE attribute that is displayed that attribute serves as the label for that form element.

Insert a drop-down menu.

1. Start on a new line below the FIELDSET of your radio button group. (You may need to edit the code to get a new line outside of the FIELDSET).
2. Type the description of the drop-down menu: "What is the topic of your question (choose best):" and press SHIFT-ENTER.
3. Click on the "Insert Drop-Down Box" button on the Forms Toolbar:.
4. Select the drop-down menu and the descriptive text and click on the LABEL button on the Forms Toolbar: .
5. Right-click on the drop-down menu and choose "Form Field Properties …"
6. If you want, change the name of the drop-down box to something more familiar.
7. Click on the Add… button in the Drop-Down Box Properties window.
8. Under "Choice," type "Choose Topic." Under "Initial State," choose "Selected," and click OK to save your changes.
   
9. Continue adding your list options until you have completed your list. If you want, select "Specify Value" in the Add window and change the value to a shorter, more manageable value.
10. Once you have finished adding your menu choices, set the TABINDEX and click OK to accept your changes. Your properties box should look something like this:
    

Your finished HTML should look similar to this:

Example of Menu Box (with drop-down menu):

In our example, the first choice ("Choose Topic") is a place-holder that allows the user to "get focus" of the menu without making a selection and serves as a "null" selection if the question does not apply.

A Note About Jump Menus.

One very problematic form of the menu/list box -- the Jump Menu. When a user selects an option in a Jump Menu, a script, link, or other action is automatically engaged. Thus, the user only needs to click on the object once. However, keyboard users can only select the first item -- as soon as it is selected by the keyboard, the action is engaged and users cannot scroll down the rest of the list.

Instead of a Jump Menu, add a "GO" or "Select" button next to the menu to allow users to initiate the action with an additional click. Note that this option typically relies on JavaScript or other client-side scripting to make the GO button work and should therefore not be used as the primary navigation method (See "Processing Forms" above).

The WAC has some examples of good and bad Jump Menus.

Return to Index.

Step 5: Add a Text Area.

Text areas, like text boxes, are also fairly straight forward. In most cases, engaging the "Return" button once inside a text area will create a new line of text and not send the form. But, be sure to test how your server interprets this action. Most problems occur when using client-side processing to validate the form (validates on detection of ENTER key).

Insert a text area:

1. On a new line below your drop-down menu, type the description for the text area: "Tell us your question" and press SHIFT-ENTER.
2. Click on the "Insert text area" button on the Forms Toolbar: .
3. Select both the text area and the descriptive text and click on the LABEL button on the Forms Toolbar: .
4. Right-click on the text area and choose "Form Field Properties …"
1. Set the "Width in characters" to "75."
2. Set the "Tab order" to "8"
3. Click OK to save your changes.

The width setting controls how wide your text box is displayed. Typically, 50-75 characters is a good range, but you'll need to test in your browser. You can also increase how many rows of text are displayed at any given time by changing the "Number of lines" property.

Your HTML should look similar to this:

Example of Text Area:

Return to Index.

Step 6: Add a Check Box Group.

In most cases, check boxes are preferable to radio buttons, because users can turn each box on ("checked") or off ("unchecked").  They are particularly useful for a single or series of separate, perhaps unrelated, yes/no questions (e.g. "Are you married?" and "Do you own a pet?").  However, they are still a rather clumsy method of offering multiple choices (e.g. "Which type/s of pet/s do you own?") -- the WAC recommends using the Menu/List box instead.   Some designers prefer to use the menu/list for "yes/no/neither" questions as well.  

Check boxes resemble text boxes in that each box must be given a unique ID and the label tag must be updated for each. Also, FrontPage assigns each check box the value of "ON," which you can change, if desired. Like the radio button, add the FIELDSET and LEGEND tags to connect boxes related to the same form question/topic.

Insert a check box group:

1. FrontPage does not allow you to create a group box around check boxes. So, you'll begin by going into the HTML view. Place your cursor after the close paragraph tag of the text area (</textarea></p>) and type:
   
   <fieldset>
<legend>Join a listserv
   
   FrontPage will automatically insert the close LEGEND and close FIELDSET tags.
2. Place your cursor after the close LEGEND tag (</legend>)
3. Click on the "Insert check box" button on the Forms Toolbar: .
4. Type the label for this check box ("Graduate List").
5. Highlight the label and checkbox and click on the LABEL button on the Forms Toolbar: .
6. Right-click on the check box and choose "Form Field Properties…"
1. If desired, change the "Name" and "Value" fields to a recognizable value -- they can be the same, if you want.
2. Set the TABINDEX.
3. Click OK to save your changes.
7. Repeat steps 3-5 until all your check box choices are complete.

When you are done, your HTML should look similar to this:

Example of Check Box Group:

Return to Index.

Step 7: Add Buttons (Submit and Reset).

The like the OPTION in a menu or list, the "value" attribute serves as the label for button elements and should therefore be as simple and clear as possible. In particular, note if engaging the button leads to a "next step" (data verification) in the form process and not to the completion/submission of the data.

FrontPage automatically adds both a Submit and Reset button when you add a new form. Some designers do not like to include a reset/clear button, because of the possibility of accidentally erasing inputs (especially with a long form). Another suggestion is to move the reset button farther away from the submit button to help reduce the user's possibility of accidentally clicking on the wrong button.

In our example, we've added a bit more space between the two buttons and changed the value attribute to more descriptive text:

Example of Button: