Using Dreamweaver to add labels to forms

There are still people out there who are convinced that Adobe Dreamweaver can’t create an accessible or standards-compliant web site. Well, it can. You do have to know what an accessible site is, and you do have to use the tools (in this case, Dreamweaver) properly. After that, you will be completely able to create accessible and standards-based work in Dreamweaver.

One aspect of accessibility is the proper use of the label element with form fields. Dreamweaver makes that very easy to do.

Starting with Dreamweaver CS4, all the accessibility preferences are on by default. If you are using Dreamweaver CS3 or older, you have to go to Preferences and turn them on. Select the Accessibility category on the left.

Make sure every field is checked, not only the one for Form objects. Use best practices at all times and you’ll be accessible.

On a document in Dreamweaver, insert a form element. You’ll see this dialog.

form dialog

Here you enter the ID and the label text. Select Attach label using ‘for’ attribute for the majority of form elements. Dreamweaver will give the ‘for’ attribute the same value as the value you enter for the ID. Form controls like Submit or Reset buttons need no label because the element itself is the label.

Next, decide whether to place the label text before or after the form element. For input elements such as text boxes, the label normally should go before the form element. For radio buttons and checkboxes, the label should go after the form element. Although the dialog has access key and tab index options, I suggest you leave them blank. These have proven over time to be more of a hindrance than a help.

Click OK and you have an accessible form element with a label.

Related article: Styling the label element with CSS

Leave a Reply