How to Make Accessible Web Content Using Dreamweaver

Introduction

Dreamweaver MX and MX 2004, developed by Adobe, formerly Macromedia, is one of the most popular and powerful web development applications available today. It is popular for a few reasons:

  • Its WYSIWYG (What you see is what you get) interface allows you to create a web page without looking at the code. If you are new to web Design, this can be especially inviting.
  • The HTML code created in the WYSIWYG interface tends to be cleaner and more compliant with W3C HTML and XHTML specifications than code created with other tools. Standards compliant code is usually more accessible more compatible with emerging and assistive technologies.
  • You can make changes manually, or in the Code view, without worrying that Dreamweaver will change your code back. This feature has really set Dreamweaver apart from other web development applications.
  • It integrates smoothly with other Macromedia tools, especially Flash.

Accessibility Features of Dreamweaver

Many of the features mentioned in this article are only available in the most recent versions of Dreamweaver (MX and MX 2004). If you are using Dreamweaver 4 or earlier, many of the features mentioned below will not be available, or will not be as complete. See Accessibility techniques for versions 3 and 4 below if you would like to read some additional techniques to improve the accessibility features of older versions of Dreamweaver.

New accessibility prompts (if enabled)

Dreamweaver allows developers to be prompted when inserting certain web elements that may need accessibility attributes added to them. Unfortunately, these options are disabled in the preferences by default.

Important

By default, the accessibility options are disabled in Dreamweaver MX. To enable the accessibility features of Dreamweaver MX 2004, select Edit > Preferences > Accessibility and then check the boxes for Form objects, Frames, Media, and Images

screenshot showing Dreamweaver's accessibility preferences

Once selected, Dreamweaver will display a prompt for accessibility features when each of the identified elements are inserted into a document.

Accessibility reporting

Screenshot showing Dreamweavers accessibility reporting features

Dreamweaver can validate against common accessibility standards and give feedback regarding the accessibility of web content. The reports can be accessed by selecting Site > Reports.

Accessibility reference

Among the other reference materials included in Dreamweaver, there is an Accessibility Reference. The reference materials were provided by UsableNet. Unfortunately, the reference is quite technical in nature and not very helpful unless you are already familiar with HTML and accessibility techniques in general.

Screenshot of Dreamweaver's accessibility reference

Accessible authoring interface

Most of the dialogs, menus, and other interface elements are accessible to screen readers.

Creating Accessible Content

Important

In order for accessibility prompts to display in Dreamweaver:

  1. The accessibility preferences must be enabled
  2. You must be in Design view in the interface. If you are in the Code view or the code window has the cursor focus when you insert elements, the accessibility prompts will not display.

Alternative text for images

With the accessibility options enabled in the preferences, Dreamweaver now prompts the user for alternative text when an image is inserted into a document.

Screenshot of image accessibility options

Type the appropriate and equivalent alternative text into the Alternate text area. If the image is a complex image, enter a URL or browse to a web page to use for a longer description (longdesc attribute of the img tag). If nothing is selected for Long description, then the longdesc attribute is not added to the image. Alternatively, if the image does not convey content and does not provide page functionality, <empty> can be selected for Alternate text to provide empty alt text (alt="").

Screenshot showing empty alternative text being selected

Once the image has been added to the document, the alternative text can be added or modified by using the Properties panel.

Screenshot showing alternative text being added through the properties panel

As with the accessibility prompt, you can select <empty> from the Alt drop-down menu to assign empty alternative text to the image.

Longdesc cannot be added to the image using the Properties panel. To add longdesc to an image, either re-insert the image and complete the Long description area of the accessibility options or add the longdesc attribute to the image in the Code view.

Dreamweaver also provides an option for alt text for hotspots of client side image maps.

Form labels

With the accessibility options enabled, Dreamweaver will prompt for appropriate labeling information when form elements are added to your web page.

screenshot of form label dialog box

Simply type the appropriate form label into the Label dialog box. You can then select the label style: Wrap with label tag, Attach label tag using 'for' attribute, or No label tag. The best results are accomplished by selecting Attach label using 'for' attribute. This allows the form label to be moved to another position within the page and is most compatible with existing screen readers. You can also choose to position the form label before or after the form item. The Input Tag Accessibility Attributes dialog also provides options for specifying Access key and Tab Index, neither of which are necessary for accessibility and both of which are often misused.

To add labels to form elements already within a web page, there are three methods that can be used:

  1. Delete, then reinsert the form element and add the appropriate label using the dialog box.
  2. Add the appropriate label information in Code view.
  3. Select both the label and the form element and select Insert > Form > Label. For this method to work, the label and the form element must be adjacent to each other. When this method is used, Dreamweaver surrounds the label and the form element with the label tags, which limits your ability to move the label and is not fully supported in all screen readers.
Important

Dreamweaver incorrectly provides the Label dialog box when you insert button and image input elements into your web page. Neither of these form elements should be given labels. A screen reader will read the value attribute of the button input element and will read the alt attribute of the image input element; both of which can be provided using the Properties panel.

Data table accessibility

There are three principles involved in making data tables accessible to screen reader users:

  1. Designate table headers
  2. Assign a scope to row and/or column headers
  3. For complex tables, assign headers and id attributes to header and data table cells.

Dreamweaver's visual interface supports option 1 (designating headers), partially supports option 2 (assigning scope), and does not support option 3.

Dreamweaver supports designating table headers in two ways. First, if the table already exists, you can identify table headers by selecting a table cell, row, or column, then selecting or deselecting the Header option on the Properties panel.

screenshot highlighting the Header option of the Properties panel

Second, if the accessibility options are enabled in the Preferences, a dialog box will be presented when the table is inserted. You can then choose whether the table has no headers (None), row headers (Left), column headers (Top), or row AND column headers (Both).

Screenshot showing table accessibility features, including headers, caption, and summary.

Dreamweaver will designate the correct cells as table headers using the <th> tag.

Note

If the table you are inserting is not a data table, do not select any of the accessibility options, as non-data tables do not need these additional accessibility features.

When using the Table accessibility dialog box to select headers, Dreamweaver will also insert the appropriate scope attribute to those headers (e.g., scope=col or scope=row).

Note

If you indicate that your table has both row and column headers by selecting Both under Header, then Dreamweaver will designate the top-left cell as a column header. In some instances, this cell may actually be a row header or not a header at all. Be sure to either remove or change the scope attribute for this cell in the Code view to appropriately match the layout of your data table.

The only way to add the scope attribute to tables that already exist in your document is to add them manually in Code view. For complex tables which have headers that span rows or columns and for which scope is not sufficient, you must add headers and id attributes to the table in Code view. The visual interface does not support the addition of headers and id.

The Table accessibility dialog box also allows the addition of Caption and Summary, both of which provide additional information about the contents of the table. In most cases, these should both be provided

Frame titles

If the accessibility option for frames is set within the preferences, Dreamweaver will prompt you for frame titles when a new frameset document is created.

screenshot showing frame properties and option to add frame title

The Title option should be a brief description of the frame contents or functionality. This information will be read by a screen reader to identify the frame. The Frame Tag Accessibility Attributes dialog will only be displayed if you create a new frameset document (File > New > Framesets) and will not display if you modify an existing document into a framed page (Modify > Frameset > Split Frame).

You can also modify noframes content for the frameset document by selecting Modify > Frameset > Edit NoFrames Content.

Accessibility Techniques for Versions 3 and 4

If you are using a version of Dreamweaver that predates MX, you have probably noticed that many of the accessibility features mentioned so far are either not available or not as complete. If you use Dreamweaver regularly, you may want to consider upgrading to a newer version. Still, there are some things you can do to make older versions of Dreamweaver more accessible.

Change the default template to one that is valid

The default blank page that comes with Dreamweaver is not inaccessible per se, but it is incomplete as far as valid HTML is concerned. To update the default blank page, you must exit out of Dreamweaver, then find the folder on your computer where Dreamweaver resides. Inside of that folder should be another folder called configuration, inside of which should be another folder called templates. The path to this folder is probably something like "C:\Program Files\Macromedia\Dreamweaver 4\Configuration\Templates," although it may be different on your computer. Inside of the templates folder is a document called default. Open this document in a text editor of some sort (Notepad, Wordpad, Text Edit, or something similar). Then change the HTML inside of that file to look something like this:

[skip over HTML markup]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html lang="en">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>

</body>
</html>

This is not the only valid template. The template above is for documents which are meant to be valid according to the HTML 4.0 Transitional syntax. A template for a XHTML 1.0 transtional document would look something like this:

[skip over HTML markup]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>

</body>
</html>

Install an accessibility validator extension

There are two accessibility extensions for Dreamweaver to choose from. Macromedia made one themselves, and UsableNet made another one. Overall, UsableNet's is better and more customizable. Neither one is perfect. The Dreamweaver extensions below can evaluate pages that are on your hard drive.

The "Section 508 Accessibility Suite Extension"

Screen shot of the new Accessibility menu item which was created when the UsableNet extension was installed - options include 'evaluate and fix', 'explain and fix', and 'run online report'.

The programmers at UsableNet.com have put together another accessibility validator, which they have called the "508 Accessibility Suite Extension." This extension creates an entirely new menu item called Accessibility . This extension is more customizable, and has more functionality than Macromedia's extension. You can check a single web page at a time, or you can check entire sites at a time. It should be mentioned that checking the whole site at a time can take a VERY long time. In addition, the sheer quantity of feedback about all of the pages is almost completely unmanageable. When used on a single page, however, this can be a useful tool and a starting point for accessibility.

Screen shot of the report settings in UsableNet's extension - You can turn on and off each of the individual checkpoints in the report, to get the report as specific as you like.
Screen shot of the Usable Net extension settings dialog box - Note that you can check the current document or the whole site at a time.

As with all automated accessibility validators, you must still perform the manual checks or else the feedback is much less useful.