Dreamweaver ResourcesSkip Navigation Links
|| Multimedia || Dreamweaver Home > How-To Home > Accessibility Home > Dreamweaver MX ||

 

Accessibility & Dreamweaver MX

For a printable version, please view the PDF (189 KB).

 

General Information
- Setting Accessibility Preferences

Images
- Adding a descriptive alt attribute
- Adding an empty alt attribute
- Adding a longdesc attribute

Data Tables
- Adding Headers
- Adding a summary Attribute
- Adding a caption Tag

Setting Accessibility Preferences

Dreamweaver MX has the ability to prompt you to add accessibility features while you are adding content to a Web page. Of course, you can still use the Property Inspector Palette or edit the HTML code to make the page accessible. (WebAIM also has a helpful article on Dreamweaver MX and accessibility, called "How to Make Accessible Web Content Using Dreamweaver".)

To turn on the accessibility features, go under the Edit menu and choose Preferences. The Preferences dialog box will open. (Figure 1)

Click on the "Accessibility" subject in the category list on the left. (Figure 2)

You can turn on the accessibility options for Form Objects, Frames, Media, Images, and Tables. The two options that we will be taking a look at are the options for images and tables. (Figure 3)

Images Options

With the accessibility options turned on, you will now have two dialog boxes when you insert an image on the page. The first is the standard insert image dialog box, asking you to locate the image. The second is the dialog box that will prompt you for an alt attribute and a longdesc attribute for the image. (Figure 4)

Table Options

With the accessibility options turned on, you will now have two dialog boxes when you insert an table on the page. The first is the standard insert table dialog box, asking you to set up the dimensions of the table. The second is the dialog box that will prompt you for a caption, a summary, and where the headers will be placed. (Figure 5)

Figure 1 The Preferences dialog box.
Figure 2 The accessibility subject in the category list.
Figure 3 Accessibility options for Dreamweaver MX.
Figure 4 This is the second dialog box that appears when you insert an image.
Figure 5 The second dialog box that appears when you insert a table.

Back to Top

 

Adding a Descriptive alt Attribute

If the accessibility preferences are turned on, you will automatically be prompted to fill in an alt attribute when you insert the image.

If you do not have the preferences turned on, or if you forget to add the alt attribute when you insert the image, follow the steps below to add an alt attribute using the Property Inspector Palette.

  1. Select the image. (Figure 1)
  2. Fill in information in the Alt field on the Property Inspector Palette. (Figure 2)
  3. You can view the alt attribute when you preview the Web page in Internet Explorer. Put the cursor over the image and the alt fly-out will appear. (Figure 3)
Adding the alt Attribute
Figure 1 Figure 2 Figure 3
A selected image in Dreamweaver. Putting the ALT Text in the Property Inspector Palette. Example of the ALT fly-Out in Internet Explorer.

Back to Top

 

Adding an Empty alt Attribute

Even if you have the accessibility preferences turned on, you will still have to put in the empty alt attributes using the Property Inspector Palette.

  1. Select the image. (Figure 1)
  2. Click on the drop-down menu for the Alt field and choose <empty>. (Figure 2)
Adding the alt Attribute
Figure 1 Figure 2
A image that doesn't require an ALT attribute.

The empty ALT option in the Property Inspector Palette.

Back to Top

 

Adding a longdesc Attribute

If the accessibility preferences are turned on, you will be prompted to add the longdesc when you insert the image on the page. (However, you will need to have already created the other page with the long description if you use this method.) Simply click on the yellow file folder icon to the right of the "Long Description:" field, and browse for the Web page containing the long description. (Figures 1 & 2)

If you do not have the preferences turned on, follow the steps below to add a longdesc attribute using the HTML code editor.

  1. Create a page that contains the in-depth description of the image.
  2. On the original page, select the image. (Figure 3)
  3. Open the HTML code editor by clicking on the purple brackets on the upper-left corner of the Dreamweaver window , or go under the "View" menu to "Code". (Figures 4a and 4b)
  4. The img tag for the image should be highlighted. (Figure 5)
  5. Click inside of the tag, after the src="". (Figure 6)
  6. Give yourself one space and type longdesc="" in the tag.
  7. Put the address of the page with the in-depth description in between the quotes. (Figure 7)
  8. Close the HTML code editor and save the page.
Adding the longdesc Attribute
Figure 1 The yellow file folder icon on the Image Tag Accessibility Attributes dialog box.
Figure 2 Example of the LONGDESC attribute filled in on the Image Tag Accessibility Attributes dialog box.
Figure 3 Example of a complex image. In this case, it is a pie chart with sales figures.
Figure 4a The code view button on the toolbar.
Figure 4b The Code View option from the View menu.
Figure 5 The HTML code editor view of the image tag.
Figure 6 The HTML code editor view of the cursor after the source attribute in the image tag.
Figure 7 The HTML code editor view of longdesc attribute after the source attribute in the image tag.

Back to Top

 

Adding Headers to Data Tables

If the accessibility preferences are turned on, you will be prompted to choose the location of the table headers when you insert the table on the page. (Figure 1)

If you do not have the preferences turned on, follow the steps below to choose the location of the table headers using the Property Inspector Palette.

  1. Select the row or column. (Figure 2)
  2. Check the Header box on the Property Inspector Palette. (Figure 3)
  3. The row will be automatically bolded and centered. (Figure 4)
Adding Table Headers
Figure1 The Accessibility Options dialog box with the option to choose the location of the table header.
Figure 2 Selected table cells.
Figure 3 The table header checkbox on the Property Inspector Palette.
Figure 4 Table cells that have been converted to a table header.

Back to Top

 

Adding a summary Attribute to Data Tables

Remember - a summary attribute is not necessary for small, basic data tables, and should not be used for layout tables.

If the accessibility preferences are turned on, you will be prompted to add the summary when you insert the table on the page. (Figure 1)

If you do not have the preferences turned on, follow the steps below to add a summary attribute using the HTML code editor.

  1. Select the table. (Figure 2)
  2. Open the HTML code editor by clicking on the purple brackets on the upper-left corner of the Dreamweaver window , or go under the "View" menu to "Code". (Figures 3a and 3b)
  3. The tags for the table should be highlighted. (Figure 4)
  4. Click inside of the opening table tag, after the cellpadding="". (Figure 5)
  5. Give yourself one space and type summary="" in the tag.
  6. Put the summary for the table in between the quotes. (Figure 6)
  7. Close the HTML code editor and save the page.
Adding a summary Attribute
Figure1 The summary field on the Accessibility Options for Tables.
Figure 2 A selected table in Dreamweaver.
Figure 3a The code view button on the toolbar.
Figure 3b The Code View option from the View menu.
Figure 4 Highlighted text inside the HTML code editor.
Figure 5 The HTML code editor view of the cursor after the cellpadding attribute in the table tag.
Figure 6 The HTML code editor view of the completed summary attribute.

Back to Top

 

Adding a caption Tag to Data Tables

Remeber - a table caption is not necessary for small, basic data tables, and should not be used for layout tables.

If the accessibility preferences are turned on, you will be prompted to add the caption when you insert the table on the page. You can also choose where you would like the caption to go in relation to the table: top, bottom, right, or left. (Figures 1 and 2)

If you do not have the preferences turned on, follow the steps below to add the caption using the HTML code editor.

  1. Select the table. (Figure 3)
  2. Open the HTML code editor by clicking on the purple brackets on the upper-left corner of the Dreamweaver window, or go under the "View" menu to "Code". (Figures 4a and 4b)
  3. The tags for the table should be highlighted. (Figure 5)
  4. Click after the opening table tag. (Figure 6)
  5. Give yourself a hard return and type <caption> </caption>. (Figure 7)
  6. Type the caption for the table in between the opening and closing CAPTION tags. (Figure 8)
  7. Close the HTML code editor and save the page. The caption will appear at the top of the table. (Figure 9)
  8. If you want to change the location of the caption, you have four options: top, bottom, left, or right. Here is an example of the code you would insert if you wanted the caption to appear on the top-left of the table.
    <caption align="left"> English Gothic Cathedrals</caption> (Figure 10)
Adding a caption Tag
Figure 1 The Caption field in the Accessibility Options for Tables dialog box.
Figure 2 The alignment options for the table captions in the Accessibility Options for Tables dialog box.
Figure 3 A selected table in Dreamweaver.
Figure 4a The code view button on the toolbar.
Figure 4b The Code View option from the View menu.
Figure 5 Highlighted code in the HTML code editor.
Figure 6 The location of the cursor after the TABLE tag.
Figure 7 The caption tags have been added to the HTML code.
Figure 8 The caption text has been added to the caption tags.
Figure 9 The table with the caption at the top.
Figure 10 The table with the caption at the top-left.

Back to Top

Updated 4/4/07
The Citadel | Hotline | Computing | WebCT Login