Accessible Forms made easy with Dreamweaver MX 2004

With Macromedia's new release of Dreamweaver MX 2004, it has become increasingly simple to produce Accessible Web Content. To configure DMX 04 to produce valid and accessible code, you would need to first configure DMX 04. To do so, open the Preferences Panel by clicking Edit on your Menu and selecting Preferences from the drop down.

Select Accessibility in Category and check the boxes for form objects, frames, media and images as shown below :

Creating the unstyled form

Select Forms in your Insert Panel as shown below :

Insert a new form. We will be creating a user registration form in this example.

Name the form using the Properties Inspector. I am calling it regForm

Insert a fieldset

When you click the fieldset button, an accessibility hint box pops up as shown below

To insert a textfield click the text field insert button as shown

When you click the text field button an accessibility hint box pops up as shown below

In the Label input box type "Name", Select Attach label tag using 'for' attribute. Use Tab Index as 1. Click Ok.

If you switch to code view, you will see the following code inserted

HTML Code:

"Name :" is within the label tag with a for attribute. The for attribute for label tag and name attribute for input tag are both assigned the value "textfield". We will rename both of these values soon.

Switch back to Deign View and Select the Input box

Change the Name of input box to txtName using the properties inspector as shown

DMX 04 changes the name attribute of the input tag but doenot change the corresponding for atribute of the label tag. To change it select the label in the status bar tag selector, right click on it and select edit tag.

Change the for Atrribute to "txtName". Press control enter to insert a line break tag (move to next line in design view).

Repeat the process to insert input boxes for Address 1, Address 2 and City. Keep increasing the tab index by 1 for each new Input box. Your Form should look like this:

To complete the form we require a select box for state and two more input boxes for zip and email. I have created a snippet for US and Canadian states. After installing it using your extension manager, you can insert into the document. by double clicking the snippet from snippets panel as shown.

Change the tab index of the select box for state to 5

Insert the text boxes for Zip and Email. Insert your Reset and Submit Buttons. Enter Default Values for each form object. The final form looks like this:

Styling the Form

Create a new CSS file called basic.css (File --> New --> Basic --> CSS).

Tile the two documents, your form and the css file horizontally.

Attach the newly created style sheet to your form document.

Start creating your styles in basic.css file by manually tying the styles. Dreamweaver MX 2004 has excellent support for CSS code hints.

We will first style the fieldset and legend tags.

Code:

At this point save all the open documents (File -->Save All). You will notice that although DMX 04 CSS rendering capabilities are far superior to its predecessors, it still doesn't render the fieldset and legend as styled. Preview your form in browser (F12) to see how it looks like at this point. So far so good, we will now style the label tag.

Code:

Save all documents again. DMX 04 dos a better job at rendering the labels. Now we can style the input tag and select tag.

Code:

Since we have styled input tag, the buttons also have the same style as the text boxes. We will hence style a class called btn and assign this new class to our Reset and Submit Buttons.

Code:

Now Select each button and change its class to btn in the Properties Inspector

Save all documents. You would want a space equal to that of labels before the buttons, so that they align with the form objects. Switch to code view and insert the following code before the reset button.

HTML Code:

Switch back to design view. Now if we style the span with class spacer to a width equal to that of the labels our job is done.

Code:

Save all your documents and preview the form document in your browser. Your accessible form is ready!