Creating Accessible Online Forms with Expression Web 2

Author: Kathleen Anderson, Spider Web Woman Designs
Blog: http://msmvps.com/blogs/spiderwebwoman/default.aspx

Expression Newsletter, subscribe now to get yours.

In my last article, Designing Web Sites for Accessibility with Expression Web 2, I talked about web accessibility, what it is and why it’s important. I also started discussing how to make accessible web content with Microsoft Expression Web 2. In this article, we are going to focus on learning what makes an online form not accessible and how to create accessible forms.

What makes a form not accessible?

A web site form is normally very easy and intuitive for a sighted user to complete. The visual clues and instructions are usually written clearly enough that filling out the form and submitting it is a quick and painless process.

For a visitor who cannot see the visual clues, however (think “fields marked in red are required”), filling out the form is not so easy, and may sometimes be impossible. Figure 1 shows an example of a form that is not accessible:

Figure 1. A form that is not accessible.

And Figure 2 shows the markup behind that form:

Figure 2. The markup of a form that is not accessible.

I won’t walk you through how to create that form, because it’s not accessible, but I will tell you what is wrong with it.

A sighted user can see the entire form before they start filling it out. They can see that the fields for First Name and Last Name are marked in red, and the instructions at the bottom of the page tell them those fields are required. A user who is blind cannot see that those fields are marked in red and will not know they are required until they submit the form and get an error. Also, the use of the color red may also cause problems for users who have the red/green deficit form of colorblindness (Deuteranope).

The names of the form fields (e.g., “Text1”) bear no relationship to the type of data you are asking the user to enter. There is no way a screen reader could give any hints about what to enter in that field, and there is nothing that ties your text “First name:” to the text box into which the user should type their name.

How to Create an Accessible Form

Launch Expression Web 2 and create a new page.
From the Toolbox, drag and drop a Form control onto the page.
You are going to add some simple text boxes to your form, but first you want to identify for your users which form fields are required.
Type the following text into the Form control and press Enter: Fields marked with an asterisk are required.
This text will get read by a screen reader before it reads the rest of the form, and will let users know which fields they must complete before they hit the Submit button. It is good practice to place this text inside the form to assist the screen reader.
Drag and drop an Input (Text) Form control into the Form control, after the text you typed in (above).
Position your cursor just before the form field and type * First name:. In Design view, your page should look like Figure 3:
Figure 3. Example of the correct way to indicate a form field is required.
In Code view, your markup should look like this:
Note that the name of the field is “Text1” and there is nothing that implicitly ties it to the text before it. We are going to fix both of those issues.
Switch back to Design View, right-click the Form field, and choose Form Field Properties from the menu (see Figure 4).
Figure 4. The Text Box Properties dialog box.
In the Name field, change Text1 to firstname and click OK.
Switch to Code view and you will see the change reflected in your markup; name="firstname".
Note that this also assists those sighted users that have the Google Autofill option turned on—the form field background will turn yellow, letting them know that Autofill can fill in the field. The article ECML v1.1: Field Specifications for E-Commerce provides some information on form field naming conventions.

The “Label” Element

To associate the text: “* First name:” with the firstname Form field, we are going to use the Label element. To do this in the Expression Web UI, we are going to recreate the form field and start with the Label form control.

Drag and drop the Label form control into your form.
Type the text * Last name: into the form, and then drag and drop an Input (Text) Form control into the form.
Right-click the form field you just added, choose Form Field Properties, and rename it to lastname.
In Code view, your markup should look like Figure 5:
Figure 5. A Form field with the Label element.
The next thing we need to do is tweak the Label tag. Using the Quick Tag Editor, replace <label id="Label1"> with <label for="lastname"> and press Enter.
Using the Label tag will assist the screen reader, and therefore the user, in knowing what text is associated with what form field.

Form Field Tabbing Order (tabindex)

The final issue we need to take care of is the tabbing order of the form fields. When you are through with your form, the desired behavior is that by using the Tab key, a user will tab through all the fields on the form in sequential order. For various reasons, however, that may not happen by default, and the user may end up skipping over critical form fields and the form may not make any sense to them.

You can control that by assigning the tabindex attribute to each form field and assigning each one a number. The numbers should be assigned to each field in the sequential order that you want the tabbing to flow.

In Design View, right-click on each Form Field and choose Form Field Properties. In the Text Box Properties dialog box, you will see a field called “Tab order.” In our example, we will assign the first form field (firstname) a tab order value of “1” and the second form field (lastname) a value of “2”. In Code view, you should see the code in Figure 6:

Figure 6. Form fields with the tabindex attribute

If, later on, you need to add a Form field for middle name, you will need to correct the tabindex attribute values for all the form fields that follow it, to ensure that the tabbing order remains correct.

For more information

For more information on creating Accessible Forms, see:

Creating Accessible Forms: General Form Accessibility (WebAIM)
Creating Accessible Forms: Screen Reader Form Accessibility (WebAIM)
Accessible Forms (Jim Thatcher)

Our next article will cover making Data Tables accessible. If there are other topics you’d like to see addressed, please send me an email through my blog (above).