How to Make Accessible Web Content Using Dreamweaver
- 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 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.
By default, the accessibility options are disabled in Dreamweaver MX. To enable the accessibility features of Dreamweaver MX 2004, selectand then check the boxes for , , , and
Once selected, Dreamweaver will display a prompt for accessibility features when each of the identified elements are inserted into a document.
Dreamweaver can validate against common accessibility standards and give feedback regarding the accessibility of web content. The reports can be accessed by selecting.
Among the other reference materials included in Dreamweaver, there is an 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.. The reference materials were provided by
Accessible authoring interface
Most of the dialogs, menus, and other interface elements are accessible to screen readers.
Creating Accessible Content
In order for accessibility prompts to display in Dreamweaver:
- The accessibility preferences must be enabled
- You must be in view in the interface. If you are in the 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.
Type the appropriate and equivalent alternative text into the
longdesc attribute of the
img tag). If nothing is selected for , then the
longdesc attribute is not added to the image. Alternatively, if the image does not convey content and does not provide page functionality, can be selected for to provide empty
alt text (
Once the image has been added to the document, the alternative text can be added or modified by using thepanel.
As with the accessibility prompt, you can selectfrom the drop-down menu to assign empty alternative text to the image.
Longdesc cannot be added to the image using the
longdesc to an image, either re-insert the image and complete the area of the accessibility options or add the
longdesc attribute to the image in the view.
Dreamweaver also provides an option for
alt text for hotspots of client side image maps.
With the accessibility options enabled, Dreamweaver will prompt for appropriate labeling information when form elements are added to your web page.
Simply type the appropriate form label into thedialog box. You can then select the label style: , , or . The best results are accomplished by selecting . 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 dialog also provides options for specifying and , 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:
- Delete, then reinsert the form element and add the appropriate label using the dialog box.
- Add the appropriate label information in view.
- Select both the label and the form element and select . 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.
Dreamweaver incorrectly provides 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 panel.
Data table accessibility
There are three principles involved in making data tables accessible to screen reader users:
- Designate table headers
- Assign a
scopeto row and/or column headers
- For complex tables, assign
idattributes 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 theoption on the panel.
Second, if the accessibility options are enabled in the, a dialog box will be presented when the table is inserted. You can then choose whether the table has no headers ( ), row headers ( ), column headers ( ), or row AND column headers ( ).
Dreamweaver will designate the correct cells as table headers using the
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
scope attribute to those headers (e.g.,
If you indicate that your table has both row and column headers by selectingunder , 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 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 view. For complex tables which have headers that span rows or columns and for which
scope is not sufficient, you must add
id attributes to the table in view. The visual interface does not support the addition of
Theaccessibility dialog box also allows the addition of and , both of which provide additional information about the contents of the table. In most cases, these should both be provided
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.
Theoption 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 dialog will only be displayed if you create a new frameset document ( ) and will not display if you modify an existing document into a framed page ( ).
You can also modify
noframes content for the frameset document by selecting .
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:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
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:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
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"
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. 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.
As with all automated accessibility validators, you must still perform the manual checks or else the feedback is much less useful.