Achieve Accessibility with Dreamweaver

By Virginia DeBolt

Accessibility can be part of your normal workflow in Dreamweaver. Developing work habits that include the built-in accessibility help offered by Dreamweaver will not add any significant time to your projects. The information in this article applies to Dreamweaver MX 2004. This version of Dreamweaver has many new features aimed at making accessibility easier to create in the Dreamweaver environment. In older versions of Dreamweaver, any of the features described are possible, but may require some hand coding in Code View.

Start with Preferences

Long-time Dreamweaver users will benefit from a careful re-examination of their work habits to take full advantage of what Dreamweaver has to offer. The first step is to set the Preferences for maximum accessibility help.

In the General Preferences category:

General Preferences

Tagging elements with semantically meaningful tags such as strong or em is important for accessibility. The idea of using semantically logical elements to create content is a foundation concept that applies to other element choices as well.

Accessibility requires that you separate content from presentation. To do this, you must use HTML to structure the document with logical semantic elements that are clearly organized into headings, paragraphs, lists, and other logical content blocks. By using the generic HTML container div, you can add context to the structure to give yourself powerful descendant selectors for your CSS.

More information is available in The Early Bird Catches the CSS: Planning Structural HTML.

In the Accessibility Preferences category, select every option.

Accessibility Preferences

With these preferences selected, Dreamweaver will help you by reminding you to include labels on form objects, alt text with images, and other important accessibility attributes.

This is important as the number one accessibility need is effective alt text.

The References

Dreamweaver has a number of built in reference materials, including the UsableNet Accessibility Reference.

The Reference Window

Page Checks

Dreamweaver will run accessibility checks for the page.

Check Page Options

Install Helpful Extensions

On the day the following screen shot was taken, Macromedia Exchange offered 46 extensions related to Accessibility in Dreamweaver. Not all are free, but they are worth exploring to see if they will help with your particular needs.

Dreamweaver Exchange

Smart Link is one of many helpful extensions available from Macromedia Exchange. In Dreamweaver, the Smart Link dialog box gives you the following options.

smart link

Smart Link converts an existing link so the target page opens in a new browser window. It works in a similar way to the Dreamweaver Open Browser Window behavior, or using target="_blank", but gives you far more control over its look and position. Although it uses JavaScript, it is smart enough to work even if JavaScript is disabled, by opening the page in the same window. This keeps your site accessible to everyone, and is far more user-friendly than a link that doesn't work at all. It also has the advantage of keeping your pages valid, unlike target="_blank" which has been deprecated by the W3C.

To be accessible, pages should work if JavaScript is disabled. In most browsers, you can deselect the JavaScript option quickly, as in this Firefox preference option.

Firefox Preferences for JavaScript

Test your pages with JavaScript disabled to be sure your navigation and other functions are usable. Some of the assistive browsing devices in use by people with disabilities do not understand JavaScript.


Two valuable tools are available from UseableNet.

Usable Net commands

Source Order and Skip Navigation

A common barrier to accessibility is the failure to address the needs of visitors who are unable to navigate the site with a manual pointing device, such as a mouse. Accommodating users who rely on the Tab key can be a daunting task unless the content is structured logically.

According to Elderweb, the “ideal” web page would present text in a logical order to every user agent:

  1. The title of the page.
  2. For long pages, a summary or abstract of what is on the page.
  3. The main content of the page.
  4. Secondary content of the page (the kinds of things that might be displayed in a right column or inset box).
  5. Site navigation and other information not intrinsic to the main content.

Browsers and assistive devices read English documents from left to right and from top to bottom. The order of the HTML from left to right and top to bottom is called document flow.

Since not every document meets the ideal described above, many use skip navigation links. A skip navigation link allows the user to tab directly to the content. There have been numerous attempts to provide skip navigation links that are not visible to the normal user, but which would be usable by screen readers. For example, a negative margin of 1000px to move a skip navigation link out of the viewport, while still allowing it to be read by a screen reader.

The current wisdom on best practices for skip navigation is to make it visible in the viewport and to use the words "skip to main content" as the link text.

If your document contains a div for the main content that is identified with a named id, Dreamweaver can create a link directly to that id. Highlight the link text and select Insert>Hyperlink.

The DW Insert Menu commands

Before you select Insert>Hyperlink, you need the name of the id to link to and  the name of the HTML page, if it is different from the page you are on, to complete the dialog box. You type this information in the dialog box.

DW Hyperlink Dialog Box

You could also manually type the same information in using Code View or the quick tag editor:
<a href="#content">Skip to main content</a>

Navigation and the :focus Pseudo Class

When tabbing through a menu, the currently selected element can be indicated with the a:focus pseudo class.

Dreamweaver does not include a:focus among its pseudo class options.

DW pseudo class options

As with other advanced selector names, you can type the a:focus selector in the Selector field when defining a style for a:focus.

type your own selector name

In your CSS, the order of the links should be Link-Visited-Hover-Focus-Active to ensure that the pseudo class will work in most normal situations.

Use Code View or the Quick Tag Editor to add the class to the code. Here's a code example:

a:focus:hover { background: white }

Pseudo class selectors can be combined, as you can see in the code above. Focus works for those using the Tab key, hover for those using the mouse.

This is not widely used yet, and it provides no value for a person tabbing through a site using a screen reader. It does provide a visual cue to people tabbing through a site who can see what they are doing.

Title and Longdesc Attributes

Look again at the Insert>Hyperlink dialog box. (On the Insert bar, insert hyperlink is under the Common tab.)

There are accessibility advantages to using the Insert>Hyperlink dialog box. It contains fields for target (deprecated in XHTML), a title, and values for access keys or tab index.

Insert Hyperlink dialog

Using meaningful link text (as opposed to 'click here') is a key accessibility feature. However, a title can provide helpful detail to explain what to expect when clicking a link. Although Dreamweaver has a number of other ways to create a hyperlink, none of them provide the title field.

Different browsers display the title attribute in different ways. Many show it as a tool tip when the element is hovered over.

The Insert Hyperlink dialog box (for the anchor or a element) provides a way to insert the title attribute. Dialog boxes for other elements do not provide a way to add the title attribute. For other elements, a title attribute could be added in Code View or with the Quick Tag editor.

Expand Acronyms and Abbreviations

The acronym or the abbr element should be used to expand acronyms and abbreviations on first use. The Insert bar has an icon for abbr and acronym in the text category. Macromedia's geeky joke of a label for the icon for the acronym element says “W3C.”

Insert Bar

Rumor abounds that the W3C plans to deprecate acronym and use abbr for both acronyms and abbreviations in the future.

Either tag requires the addition of a title attribute to explain the meaning. For example,

the <acronym title="World Wide Web Consortium">W3C</acronym> plans to


For inserting images, Dreamweaver asks you to add both alt text and a longdesc.

Image Tag Accessibility Attributes

Most images don't require a longdesc, but an image conveying content such as a graph should be given a longdesc.

To add a longdesc attribute some elements, you must use either Code View or the Quick Tag Editor.

Quick Tag Editor used to add longdesc

Just having a longdesc attribute pointing to an HTML page containing a long description of the material isn't quite enough, because some older assistive devices don't announce the longdesc link to users. A commonly understood workaround is to put a visible link to the long description page in the form of a lowercase d, like this. [d] This method of visibly indicating the presence of a longdesc attribute with a "d-link" has been deprecated by the W3C. Most modern screen readers read the longdesc to users while the attribute remains unseen in visual browsers.

Many elements in addition to links can have title attributes. See the W3C for more info. Read this excellent article about the alt, title, and longdesc attributes from 456 Berea Street.

Relative Measures

When setting font-size or element width and height, Dreamweaver offers several measurement units.

Measurement units

For web display, setting the measurement units in ems or percentages is the most accessible choice. This allows the user to resize to suit individual needs.

Styles for the body element

Setting the font-size, for example, to 100% (or 1em) in the body style, means that the user's default font-size will be used for any text in the entire body. Of course, you may add styles for individual elements that are based on that 100% point of origin. For example, you might make the font-size of a level one heading 150% (or 1.5em) or the font-size of a footer paragraph 90% (or 0.9em).

When using percentages with floated elements, make the various divs add up to 98% or 99%, rather than 100% to allow for rounding errors and to accommodate the extra 3px that Internet Explorer adds to floated elements.

Making Tables Accessible

Make the most of Dreamweaver's insert table dialog box options.

Notice that the Table size presentation options are going to be in the CSS, not inserted here as HTML presentation attributes. This is one way to separate content from presentation with semantically clean HTML.

DW Table Dialog Box

If you select the Header option for the top of each column, Dreamweaver automatically includes scope="col" in the th elements, an accessibility feature that identifies the content of each cell as being related to the th for users of assistive devices.

Rating and Cost of Terni, Italy Hotels
Name Rating Cost
Michelangelo Palace 4 stars €150
ClassHotel Terni 3 stars €83
Del Lago 3 stars €70

Using the Insert Table Dialog box for a table with headers at the top and the sides is also helpful. Look at this table, and the code Dreamweaver created for it.

Yearly Events in Terni
Event Dates Cost
Water Festival June–July Free
Cavour Art September Free
Circuito dell'acciaio October Free

<table summary="Yearly events are listed with dates and admission costs.">
<caption align="top">
Yearly Events in Terni
<th scope="col">Event</th>
<th scope="col">Dates</th>
<th scope="col">Cost</th>
<th scope="row">Water Festival </th>
<th scope="row">Cavour Art</th>
<th scope="row"> Circuito dell'acciaio </th>

This help from Dreamweaver would be adequate for a simple table such as this. With headers on the top and side, Dreamweaver inserts scope="col" and scope="row" attributes.

When Header Attributes are Needed

With a complex table, however, there is nothing Dreamweaver does to help an assistive device match a cell to both a column heading and a row heading at the same time. Look at this graphic of a complex table, for example.

A complex table

You must go into Code View and add header id attributes for the columns and rows, and then match each cell to the appropriate headers. A good reason to keep your tables simple!

To demonstrate how id and header attributes work together, let's modify the Yearly Events in Terni code from above, even though it isn't needed in a table this simple. The table code now becomes the following:

<table summary="Yearly events are listed with dates and admission costs.">
<caption align="top">
Yearly Events in Terni
<th id="event">Event</th>
<th id="dates">Dates</th>
<th id="cost">Cost</th>
<th id="water" header="event">Water Festival </th>
<td headers="water dates">June&ndash;July</td>
<td headers="water cost">Free</td>
<th id="art" header="event">Cavour Art</th>
<td headers="art dates">September</td>
<td headers="art cost">Free</td>
<th id="acciaio" header="event"> Circuito dell'acciaio </th>
<td headers="acciaio dates">October</td>
<td headers="acciaio cost">Free</td>

See the W3C for complete details and more information.

Help with Table-Free Layouts

In accessibility terms, tables are for tabular data only, not for layout.

Dreamweaver's New Document dialog box offers a number of professionally designed style sheets and accessible layouts that you can modify.

New Document Dialog Box

There are many freely available CSS layouts that will work in Dreamweaver.

Color and Contrast

The Web Content Accessibility Guidelines 1.0 has two priorities for color:

  1. Ensure that all information conveyed with color is also available without color - for example from context or markup.
  2. Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen.

Dreamweaver does not have any built-in mechanism to check color contrast. Here are some helpful sources on the web.

Mozilla's Web Developer Tools will allow you to quickly check a page with the colors or the CSS disabled to see if it works in black and white. Be aware that just because it works in black and white, it doesn't necessarily mean that you have enough contrast for certain color combinations.

The recommendation is to use more than just a color cue. For example, instead of saying "Required fields are in red" you could say "Required fields are marked with a red star." You have two cues: the star and the red color.

Making Forms Accessible with Dreamweaver

Dreamweaver uses this icon (with abc on it) for the label attribute. Just to the right of it is the fieldset icon.

DW form icons

Making a form accessible involves:

If you have Preferences set to use "Accessibility for Form Objects", Dreamweaver will automatically present the label options when inserting a form element.

CSS Layouts and Label Elements

If you use CSS for layout, all you need to do is wrap the label.

Insert Accessible Form dialog box

Use the Property Inspector to name the element “fname.” The resulting code should be:

<label>First Name
<input name="fname" type="text" id="fname" />

The label associates the form element with the appropriate text. Any assistive device (e.g., Jaws, Home Page Reader) will understand this association.

Table Layouts and Label Elements

If the form is laid out in a table, with the label and the form element in two different table cells, then you need the form attribute with an id on the form element. For an assistive device to make the connection between text in one table cell and a form element in another table cell, you must help out by telling which element (identified with an id) the text is for.

Dreamweaver only does part of this for you.

Attach lable selection

If you select “Attach label tag using 'for' attribute” you get the for attribute inserted along with an id attribute, but the naming is so generic it isn't helpful. Since a named id must be unique on the page, you have to do some tweaking to the names to make it useful.

You get this code:

<label for="textfield">Last Name</label>
<input type="text" name="textfield" id="textfield" />

You can change the id to something more appropriate in the Property Inspector. Here the element is given the id “lname.”

Enter a form element id

However, the value of the id and the value of the for must match. To change the value of the for attribute, you must go into Code View and type the value you want for the for attribute.

The for attribute in Code View

The resulting code is:

<label for="lname">Last Name</label>
<input type="text" name="lname" id="lname" />

The value of for and id must match. The value of name does not have to match.

Tab Order

The dialog box for accessible form elements includes an option to change the tab index value. Try tabbing through your form to be sure the tab order is logical and adjust the tab index values if needed.

Group Form Controls

Related form elements can be grouped using a fieldset. Select the set of form elements you want to include in the fieldset. Click the fieldset icon and a dialog asking for the legend opens.

Insert Fieldset Legend

Note that the dialog box says “Label,” but in fact, the element you type here is the legend. However since, label, fieldset and legend can all be styled with CSS; this dialog field could be better named.


If a prompt such as “Type search words here” or “City Name” is needed, it can be entered directly in the input element using the Init val field on the Property Inspector.

Initial value added to form element


Make sure the form is submitted with a form control button, not merely by JavaScript. Because the form label is on the button, no label is needed.

Submit form Input dialog


Summary of Key Concepts for Accessibility

Knowbility, Inc offers this check list of key features to include in an accessible website. Some are not part of the work you do in Dreamweaver (captioning, for example), but most are part of the Dreamweaver work flow.

Images, Color, and Animation

  1. Use the ALT attribute to describe the function of all visual images.
  2. If image maps are present, use client-side MAP and text for hotspots.
  3. Provide captioning and transcripts of multimedia elements including audio, descriptions of video, and/or alternate versions.
  4. Use text, image, and background colors that contrast well. Don't use color as the sole means of conveying important information.
  5. Avoid ASCII art. Replace it with an image and alternative text.

Structure and Navigation

  1. Design so that information and structure are separate from presentation. Strive for universal design that transforms gracefully when used by a variety of browsing tools.
  2. Design for ease of navigation. Be consistent and consider adding keyboard shortcuts to important links.
  3. Provide a means to skip advertising or navigation bars and go directly to main page content.
  4. Use headings, lists, and consistent structure. Encode list structures and use structural elements properly.
  5. Use cascading style sheets for layout and style whenever possible and ensure that the page transforms gracefully if style sheets are not supported.
  6. Avoid using "Link" or "Click here" to denote a link to new information. Instead, create text that makes sense when read out of context.

Advanced Design Elements

  1. Summarize graphs and charts or use the longdesc attribute.
  2. Provide alternatives for scripts, applets, & plug-ins in case active features are inaccessible or unsupported.
  3. Label frames with the title or name attribute.
  4. Use the header attribute when presenting tabular data. Summarize table content.

And finally, check your work. Validate the HTML. Use evaluation tools and text-only browsers to verify accessibility.

For complete details, see the W3C's Web Accessibility Initiative (WAI). Also valuable is the W3C's article How People with Disabilities Use the Web.

Copyright 2005, Virginia DeBolt, All Rights Reserved


Photo of Virginia

Virginia DeBolt is owner of the Web Teacher blog and author of the book Integrated HTML and CSS: A Smarter, Faster Way to Learn.