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

 

Accessibility & Dreamweaver 8

For a printable version, please view the PDF (188 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 8 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 8 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, and Images. The option we will be looking at is the option for images. (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)

 

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

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 the image is inserted on the page, 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 alt text in the Property Inspector Palette. Example of the alt fly-out in Internet Explorer.

Back to Top

 

Adding an Empty 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. Click on the drop-down menu for Alternative text and choose the <empty> option. (Figure 1) (See the information above for turning on the accessibility preferences.)

If you do not have the preferences turned on, or if you forget to add the empty 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 2)
  2. Click on the drop-down menu for the Alt field and choose <empty>. (Figure 3)
Adding the alt Attribute
Figure 1 The empty ALT option in the Image Tag Accessibility Attributes dialog box.
Figure 2

A image that doesn't require an ALT attribute.
Figure 3 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

When you insert the table, you will be prompted to choose the location of the table headers in the Table dialog box. (Figure 1)

If you did not choose the location of the headers when you inserted the table, follow the steps below to designate 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 header area in the Table dialog box.
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.

When you insert the table, you will be prompted to add the summary in the Table dialog box. (Figure 1)

If you did not add the summary when you inserted the table, 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

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

When you insert the table, you will be prompted to add the caption in the Table dialog box. 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 did not add the caption when you inserted the table, 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