Adobe® Dreamweaver® CC software offers the most comprehensive set of tools available for building dynamic and accessible web applications. Dreamweaver CC makes it faster and easier than ever to build accessible forms. Using the Accessibility preferences, it prompts designers and developers to add elements that make a form accessible to users with disabilities, such as labels, access keys, and a tab index for form objects.

Here's how to create accessible forms using Dreamweaver CC.

Accessibility preferences


Before working with forms, it's worth viewing the Dreamweaver CC Accessibility preferences — the preferences for accessible authoring prompts are enabled by default. You can find them by choosing Edit > Preferences or simply by pressing Control+U. When the Preferences dialog box appears, select the Accessibility category from the Category list. Then select the Form Objects option and click OK.


figure 1


With the Accessibility preferences enabled, you will be prompted to provide relevant accessibility information. As you add each text box, you'll be asked to provide a label, the tab index, and an access key. All of this information makes the form significantly easier to navigate for people with disabilities. In the following example, you'll see how to create a simple training registration form.

Adding labels

Labels identify the purpose of individual form objects, such as a text box, checkbox, or Submit button. When working with forms, users usually assume that the text to the left of the form object identifies its purpose. In many cases, this is true; however, sometimes the visual layout requires labels to be located to the right, above, or even below the form object. This can lead to considerable confusion for assistive technology users.

Labels associate the label text with the form object through HTML. If the labels are identified in the HTML, a screen reader will read the text label identified with the form object, regardless of where the label is placed visually. While it's also important to pay attention to the visual layout of labels, identifying labels within the HTML can make pages much easier for people to use with screen readers and other assistive technologies.

When a form object is inserted on a page in Dreamweaver CC, the following dialog box appears:


figure 2


In this example, a simple text box needs to be added. An ID such as FirstName would be entered. The text label "First Name" is entered in the Label text box.

Below the Label text box are three Style options. The first two allow you to specify the HTML coding technique used to mark up the label. Both represent standard HTML and will look the same on the page.

The Attach Label Tag Using 'for' Attribute option allows the label and form object to be separated by table cells or placed above or below each other. This option requires a bit more HTML code but offers more flexibility than the Wrap with label tag method.

The Wrap with Label Tag option places the HTML element <label> around the label and the form object itself. This method is the simplest; however, it assumes that the label and the form object will always be next to each other. This may not always be the case for each form element.




figure 3


When using the Attach Label Tag Using 'for' Attribute option, remember that if the text label is moved, the HTML label must be moved along with it. The easiest way to accomplish this is to select the HTML label element at the bottom of the Dreamweaver CS6 window before dragging the text label elsewhere on the page. This procedure will move the underlying HTML code along with the text.


figure 4


The No Label Tag option allows you to omit a label. This option is also helpful when you plan to add labels at a later time. However, Section 508 standards based on World Wide Web Consortium (W3C) guidelines require labels to be identified within the HTML.

The next set of options in this dialog box allows you to decide whether to place the label before or after the form object. You can choose either option, as long as your label placement is consistent throughout the page.

Setting access key

Access keys allow users to quickly access individual form objects using a keyboard shortcut. This is especially helpful on long forms that would otherwise require users to press the Tab key numerous times to access each text box. The inclusion of access keys is not required under Section 508 standards or most policies based on W3C guidelines, but it can make a form much easier to navigate, especially for people with mobility impairments. It is worth noting that substantial key conflicts exist that make access keys difficult to use without undesired effects.

In the form below, the access key for the Label text box is set to "T." To use this access key, users would press Alt+T to move the cursor directly.


figure 5


There are two issues to consider when adding access keys. First, you need to avoid standard key combinations used in web browsers. For example, a natural choice for the Label text box might have been Alt+F; however, Alt+F activates the File menu in most Microsoft® Windows® applications. Instead, the letter "T" was chosen from the end of the word "First."

Also, keep in mind that once an access key is specified, users need to be notified. The most common way to do this is to underline the letter used as the access key in the label of the form object. Note that the underlined text here is formatted using cascading style sheets (CSS). If you are not familiar with this technique, refer to "Applying Custom CSS Styles" in Dreamweaver CC Help.


figure 6

Setting a tab index

A tab index specifies the order in which the Tab key will move among the individual page elements. In many browsers, it will move among links, media objects, and form objects on the page. The default tab order is determined by the order in which these objects appear in the HTML code. If this order differs from the visual layout, a tab index might prove helpful. As with access keys, specifying a tab index is not required under Section 508 or most policies based on W3C guidelines, but it can make a page more navigable for disabled users when the layout is complex or the default tab order is unusual.